# Native UI

A window can show a user interface that MyGo draws itself instead of a web
page. You write it in Go with package `ui`: there is no HTML, no JavaScript
and no frontend build, and the window starts no webview, so it opens at
once and uses little memory. MyGo draws it on the GPU, with Metal on macOS,
Direct3D 11 on Windows and OpenGL on Linux.

```go
package main

import (
	"fmt"
	"log"

	"github.com/egoist/mygo"
	"github.com/egoist/mygo/ui"
)

// counter is the app's state.
type counter struct{ n int }

// view builds the window's interface from the state, for every frame.
func (app *counter) view(c *ui.Context) {
	ui.Column(c).Fill().Center().Gap(12).Children(func() {
		ui.Text(c, fmt.Sprint(app.n)).FontSize(40).Bold()
		if ui.PrimaryButton(c, "Increment").Clicked() {
			app.n++
		}
	})
}

func main() {
	app := &counter{}
	mygo.App.WhenReady(func() {
		mygo.NewWindow(mygo.WindowOptions{
			Title:   "Counter",
			Width:   320,
			Height:  240,
			Content: ui.View(app.view),
		})
	})
	if err := mygo.App.Run(); err != nil {
		log.Fatal(err)
	}
}
```

**Reading the examples.** The examples in these guides are parts of a view
such as `counter.view`: `c` is the view's `*ui.Context`, and `app` its
receiver, the value of your own type that holds the state. A field such as
`app.volume` or a method such as `app.save()` is one you declare on that
type, as `counter` declares `n`; [Views](https://mygo.egoist.dev/docs/ui/views.md) says more.

`mygo init -template native my-app` starts a native UI project (see
[the CLI](https://mygo.egoist.dev/docs/cli.md#mygo-init)). The [counter example](https://github.com/egoist/mygo/tree/main/examples/counter-native)
includes a view test, and the [gallery](https://github.com/egoist/mygo/tree/main/examples/gallery) shows the
controls and layouts.

One app can have windows of both kinds. Native UI suits tools, settings,
inspectors and utilities, and apps that must start instantly; a web page
suits rich documents, existing web code and anything that needs what only
a browser has. Screen readers and other assistive technology read native
UI as they read other apps (see [Accessibility](https://mygo.egoist.dev/docs/ui/accessibility.md)).

## Guides

* [Views](https://mygo.egoist.dev/docs/ui/views.md): build lifetimes, event queries and callbacks, keys,
  and changing the state from other goroutines.
* [Layout](https://mygo.egoist.dev/docs/ui/layout.md): rows and columns, sizes, spacing, alignment and
  positioning.
* [Text](https://mygo.egoist.dev/docs/ui/text.md): text and its style, rich text, links within sentences,
  and fonts.
* [Styling and themes](https://mygo.egoist.dev/docs/ui/styling.md): backgrounds, borders, shadows and
  gradients, and the theme that follows the desktop.
* [Input](https://mygo.egoist.dev/docs/ui/input.md): the pointer, the keyboard focus, shortcuts, the keys
  held, input methods, dropped files, and widgets that take every key.
* [Drag and drop](https://mygo.egoist.dev/docs/ui/drag-and-drop.md): values dragged within the window, and
  rows reordered by dragging.
* [Pages and navigation](https://mygo.egoist.dev/docs/ui/navigation.md): a router of pages with a history,
  layouts, transitions, and going back and forward.
* [Overlays](https://mygo.egoist.dev/docs/ui/overlays.md): what dialogs, popovers and the layer above the
  window share: the focus, Escape, and what is behind them.
* [Accessibility](https://mygo.egoist.dev/docs/ui/accessibility.md): what screen readers see, naming
  elements, roles, descriptions and announcements.
* [Right to left](https://mygo.egoist.dev/docs/ui/right-to-left.md): interfaces laid out from the right
  for Arabic and Hebrew, logical edges, and what mirrors.
* [Languages](https://mygo.egoist.dev/docs/i18n.md#native-ui): the window's language and regional
  formats, numbers and dates written in them, and the controls' own
  strings.
* [Drawing and animation](https://mygo.egoist.dev/docs/ui/drawing.md): painting on elements, shaping text,
  and values that ease to their targets.
* [Shaders](https://mygo.egoist.dev/docs/ui/shaders.md): pixels computed on the GPU by shaders written in
  Go's syntax, with values and images the app passes them.
* [Transitions](https://mygo.egoist.dev/docs/ui/transitions.md): elements that move, resize, recolor and
  shade smoothly as the layout changes, and come and go.
* [Motion](https://mygo.egoist.dev/docs/ui/motion.md): springs that keep their velocity, curves, delays,
  values thrown by the pointer, keyframes, timelines that play several
  tweens on one playhead, and knowing when they are done.
* [Transforms](https://mygo.egoist.dev/docs/ui/transforms.md): visual translation, scaling and rotation of
  any element, which the pointer, text input and accessibility follow.
* [Custom widgets](https://mygo.egoist.dev/docs/ui/custom-widgets.md): the widgets without a look that every
  widget is built on, and widgets of your own.
* [Windows with native UI](https://mygo.egoist.dev/docs/ui/windows.md): window options, title bars drawn by
  the view, zooming the content, and vibrancy.
* [Testing](https://mygo.egoist.dev/docs/ui/testing.md): running a view without a window, as fast as a unit
  test.
* [Inspector](https://mygo.egoist.dev/docs/ui/inspector.md): the elements of a window, their boxes and
  styles, and the time frames take, beside the content.
* [Rendering](https://mygo.egoist.dev/docs/ui/rendering.md): how MyGo draws, on the GPU or the CPU.
* [Browsers](https://mygo.egoist.dev/docs/ui/browsers.md): the same app in a page, compiled to
  WebAssembly and drawn with WebGL 2.
* [Migration](https://mygo.egoist.dev/docs/ui/migration.md): element values, persistent handles, focus
  bindings and source migration.
* [Performance](https://mygo.egoist.dev/docs/ui/performance.md): measured frame costs and retained memory.

## Actions

* [Button](https://mygo.egoist.dev/docs/ui/button.md): a push button, plain or in the accent color.
* [Link](https://mygo.egoist.dev/docs/ui/link.md): text that opens a URL, or a page of a router.
* [Menu button](https://mygo.egoist.dev/docs/ui/menu-button.md): a button opening a menu below it, the
  system's or one MyGo draws in the window with the theme's look.
* [Split button](https://mygo.egoist.dev/docs/ui/split-button.md): a button joined to an arrow opening a
  menu of related actions, as Save and Save As….
* [Context menu](https://mygo.egoist.dev/docs/ui/context-menu.md): a menu of the system's for any element,
  on a right click, or one MyGo draws in the window with the theme's look;
  [every menu of a window](https://mygo.egoist.dev/docs/ui/context-menu.md#every-menu-of-a-window) drawn so,
  text inputs' and tables' too.
* [Toggle](https://mygo.egoist.dev/docs/ui/toggle.md): a button that stays pressed, and toggles joined in a
  group.
* [Segmented control](https://mygo.egoist.dev/docs/ui/segmented.md): segments choosing one of a few views.
* [Toolbar](https://mygo.egoist.dev/docs/ui/toolbar.md): a row of controls along a window, which overflow
  into a menu.

## Choices

* [Checkbox](https://mygo.egoist.dev/docs/ui/checkbox.md): a check box, and a check box over a group of
  others.
* [Switch](https://mygo.egoist.dev/docs/ui/switch.md): a switch that turns a setting on and off.
* [Radio](https://mygo.egoist.dev/docs/ui/radio.md): radio buttons choosing one value, in a group.
* [Select](https://mygo.egoist.dev/docs/ui/select.md): a drop-down choosing one of a list.
* [Slider](https://mygo.egoist.dev/docs/ui/slider.md): a slider setting a value in a range, with or without
  steps.
* [Range slider](https://mygo.egoist.dev/docs/ui/range-slider.md): two knobs setting a low and a high value.
* [Stepper](https://mygo.egoist.dev/docs/ui/stepper.md): arrows stepping a value up and down.
* [Rating](https://mygo.egoist.dev/docs/ui/rating.md): stars setting a rating.

## Text input

* [Text input](https://mygo.egoist.dev/docs/ui/text-input.md): text on one line or several, with selection,
  undo, the clipboard and input methods.
* [Text-input primitives](https://mygo.egoist.dev/docs/ui/text-input-client.md): application-owned text,
  native composition and queries, and retained geometry for custom controls.
* [Number input](https://mygo.egoist.dev/docs/ui/number-input.md): a number in a range, typed or stepped.
* [Decimal input](https://mygo.egoist.dev/docs/ui/decimal-input.md): an exact decimal, as an amount of money,
  typed or stepped, never rounded.
* [Search field](https://mygo.egoist.dev/docs/ui/search-field.md): a field for searching, which Escape
  clears.
* [Combobox](https://mygo.egoist.dev/docs/ui/combobox.md): a field choosing one of a list, which typing
  filters.
* [Autocomplete](https://mygo.egoist.dev/docs/ui/autocomplete.md): a text input suggesting what was typed.
* [Token field](https://mygo.egoist.dev/docs/ui/token-field.md): a list of strings as chips, as tags or
  recipients.
* [Editable text](https://mygo.egoist.dev/docs/ui/editable-text.md): a text renamed in place, as a file's
  name in Finder.
* [Find bar](https://mygo.egoist.dev/docs/ui/find-bar.md): a bar for finding text, with the count of
  matches and the next and previous ones.
* [Rich text editor](https://mygo.egoist.dev/docs/ui/rich-text-editor.md): attributed text with formats,
  links, headings, lists, tasks and images, the shortcuts and Format menu
  of word processors, rich copy and paste, and Markdown.

## Code

* [Code editor](https://mygo.egoist.dev/docs/ui/code-editor.md): an editor of code as Zed's, with
  highlighting, several carets, folding, completions and diagnostics, for
  files of any size.
* [Diff viewer](https://mygo.egoist.dev/docs/ui/diff-viewer.md): the changes between two texts, side by
  side or unified, with the new text editable and changes to review.

## Documents

* [Markdown](https://mygo.egoist.dev/docs/ui/markdown.md): CommonMark and GitHub's Markdown, as finished
  documents or a language model's replies streaming in, selectable and
  copied as text or Markdown.

## Dates and colors

* [Calendar](https://mygo.egoist.dev/docs/ui/calendar.md): a month choosing a day.
* [Date input](https://mygo.egoist.dev/docs/ui/date-input.md): a date in a field, chosen in a calendar below
  it.
* [Time input](https://mygo.egoist.dev/docs/ui/time-input.md): the time of day, its hours and minutes typed
  or stepped.
* [Color picker](https://mygo.egoist.dev/docs/ui/color-picker.md): a color well, and the picker it opens.

## Collections

* [List](https://mygo.egoist.dev/docs/ui/list.md): rows of any number and height, built only while in view.
* [Table](https://mygo.egoist.dev/docs/ui/table.md): rows in columns that the user sorts, resizes and moves.
* [Tree](https://mygo.egoist.dev/docs/ui/tree.md): items that open and close, built inside the items they
  belong to.
* [Outline](https://mygo.egoist.dev/docs/ui/outline.md): a tree of any size, as a list or a table.
* [Grid view](https://mygo.egoist.dev/docs/ui/grid-view.md): items in a grid of any size, as a photo
  library.

## Containers

* [Scroll view](https://mygo.egoist.dev/docs/ui/scroll.md): containers that scroll their children.
* [Grid](https://mygo.egoist.dev/docs/ui/grid.md): children in columns and rows, as CSS grid lays them out.
* [Split view](https://mygo.egoist.dev/docs/ui/split.md): two panes with a divider the user drags.
* [Collapsible](https://mygo.egoist.dev/docs/ui/collapsible.md): content that a label shows and hides.
* [Accordion](https://mygo.egoist.dev/docs/ui/accordion.md): sections that open and close, one above the
  other.
* [Form](https://mygo.egoist.dev/docs/ui/form.md): labeled controls with descriptions and errors.
* [Web view](https://mygo.egoist.dev/docs/ui/web-view.md): a web page in the window, under the native UI
  painted after it, as menus and dialogs.

## Navigation

* [Tabs](https://mygo.egoist.dev/docs/ui/tabs.md): a row of tabs choosing a page.
* [Sidebar](https://mygo.egoist.dev/docs/ui/sidebar.md): a source list of items in sections, as Finder's.
* [Breadcrumbs](https://mygo.egoist.dev/docs/ui/breadcrumbs.md): a path whose items take the user back.
* [Back and forward buttons](https://mygo.egoist.dev/docs/ui/history-buttons.md): buttons going through a
  router's history.

## Dialogs and messages

* [Dialog](https://mygo.egoist.dev/docs/ui/dialog.md): a dialog over the dimmed window.
* [Alert dialog](https://mygo.egoist.dev/docs/ui/alert-dialog.md): a question about something important,
  with buttons.
* [Popover](https://mygo.egoist.dev/docs/ui/popover.md): a panel below an element.
* [Tooltip](https://mygo.egoist.dev/docs/ui/tooltip.md): a tip shown as the pointer rests on an element, or
  the keyboard focus comes to it.
* [Toast](https://mygo.egoist.dev/docs/ui/toast.md): a short message near the bottom of the window, with an
  action or not.

## Status

* [Progress bar](https://mygo.egoist.dev/docs/ui/progress.md): work done so far, or of unknown length.
* [Spinner](https://mygo.egoist.dev/docs/ui/spinner.md): spokes turning while work of unknown length goes
  on.
* [Meter](https://mygo.egoist.dev/docs/ui/meter.md): a value in a range, colored by its level.
* [Badge](https://mygo.egoist.dev/docs/ui/badge.md): a short text in a pill, as a count.

## Charts

* [Charts](https://mygo.egoist.dev/docs/ui/chart.md): scales, axes and marks without a look, for bars,
  lines, areas, stacks and donuts, and a selection the pointer and the
  keyboard move.

## Images

* [Image](https://mygo.egoist.dev/docs/ui/image.md): bitmaps and SVGs in their own colors.
* [Video](https://mygo.egoist.dev/docs/ui/video.md): video files and streams with sound, played by the
  system's media engine, and animated GIFs and PNGs, as trailers, clips
  behind the content or previews.
* [Icon](https://mygo.egoist.dev/docs/ui/icon.md): SVG icons in the color of the text.
* [Avatar](https://mygo.egoist.dev/docs/ui/avatar.md): a picture of a person, or their initials.