Help us shape the future of Go! Take the 2026 Go Developer Survey

ui

package
v1.1.1 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Sep 18, 2026 License: Apache-2.0 Imports: 15 Imported by: 0

README

Presentation packages

ui/ is the server-rendered interface: Go functions that return HTML and a stylesheet that is a Go value. ARCHITECTURE.md explains the boundaries; this page maps the packages and the rules the gates enforce.

Package Owns Depends on
design Theme values: colours, typography, shape, tokens. Standard library only.
ui/css The stylesheet intermediate representation. Standard library only.
ui/icon The vendored glyph set. Standard library only.
ui/style Class lists, their rules, role and theme variables. design, ui/css.
ui/components Typed renderers: atoms, molecules, sections, layouts, shell. ui/style, ui/icon.
ui/components/examples Captured invocations, their descriptions and the Gallery. ui/components; the reflection lives here, not in the renderers.
ui Compose, Sheet, Controllers, Assets: what a shell serves. design, ui/style, ui/components.
ui/forms Portable entity forms without a router or a database. kit/entity, ui/components, ui/components/examples.
ui/document Chrome, a plain Request, View, Document, Render, the recovery notices: an HTML document as values. kit/locale, ui, ui/components/examples.
ui/resource List, detail and form screens rendered from an entity schema and plain rows. kit/entity, kit/entity/display, ui/forms, ui/document.
ui/page The typed Request, Serve, Render into an httpx.Page, navigation, the locale seam; aliases the document types. kit/httpx, ui/document.
ui/screens The seven operations of an httpx.Resource behind page.Serve, and the resource catalog; aliases the renderers. kit/rest, ui/page, ui/resource.
ui/export Snapshots, DTCG tokens, proposals, the Storybook composition. ui, ui/components/examples.
ui/source Development-time persistence of proposals into Go source. ui/export, go/packages, dst.
ui/storybook The optional Storybook.js build (Node). An export.Export snapshot.
ui/assets/js htmx and the browser controllers ui.Controllers lists. —

Dependency rules

scripts/check_packages.sh runs in make check and refuses growth beyond these recorded closures:

  • design imports the standard library alone; ui/style renders its tokens.
  • ui/forms reaches kit/entity, design, ui/css, ui/style, ui/icon, ui/components, ui/components/examples and gomponents, nothing else.
  • ui/document adds kit/locale and ui to that list; ui/resource adds kit/entity/display, ui/forms and ui/document. Neither reaches kit/db, net/http or a module: a document is values, and a screen is a schema plus the rows a caller read.
  • ui/page and ui/screens are the adapters and are gated at the adapter closure, which reaches kit/db and net/http through kit/httpx; neither may import ui/export or ui/source. What needs the kernel stays there: the local-path check on a sign-in link, the nonce on an inline script, the guarded closures of an httpx.Resource.
  • ui/components never imports ui/components/examples: a renderer needs no reflection. ui never imports ui/export: a shell needs no design tooling.

Next action

To serve a page, compose the stylesheet once with ui.Compose, mount ui.Assets beside the API and return views through page.Serve; the web module is the smallest complete shell. To render the same document or screen without the router — a preview, an export, a test — call document.Document or resource.List with values. To add a component, add its renderer and class lists in ui/components and its entry to examples.Gallery; go test ./ui/components/... proves every emitted class resolves to a rule. To change colours or type, supply a design.Pair.

Documentation

Overview

Package ui is the browser half of the application: one stylesheet and small browser controllers, served as static files beside the API.

The stylesheet is a Go value

There is no CSS build. ui/components declares every class list it renders with; ui/style resolves exactly those classes to rules; design supplies the tokens they are written in terms of. Compose folds the three, plus whatever a consumer adds, into one Sheet, and a Sheet is bytes and their fingerprint.

A consumer calls Compose once, at mount, and carries the Sheet in its chrome. Nothing is memoised here because nothing is called twice: the value is the cache. That is also why a second consumer needs no machinery of its own — the first client storefront copied a memo, an in-memory file and an overlay tree to add fourteen class lists, and appended its resolution to the kernel's bytes, so a shared utility had two rules.

Application controllers

htmx is vendored, minified, under its MIT licence, and it is the only third-party script in application pages. The optional Storybook.js development interface is built separately under ui/storybook and served through authorization. The application enhancements live in assets/js, listed in Controllers.

What is not here

Design snapshots, token export, proposals and the storybook composition are ui/export. This package is what a shell needs to serve a page and nothing a design tool needs, so ui/page depends on it without linking the tooling.

Index

Constants

This section is empty.

Variables

View Source 
var Controllers = []string{
	"htmx.min.js",
	"htmx-config.js",
	"theme.js",
	"confirm.js",
	"session.js",
	"components.js",
	"gallery.js",
}

Controllers are the browser scripts a page loads, in order. The list is here rather than in the shell that writes the <script> tags, so that "how much JavaScript is there" is answered by reading one slice.

htmx is first because the others configure it. The remaining scripts enhance themes, requests, confirmation, sign-in, component interaction and gallery controls.

View Source 
var Gallery = sync.OnceValue(func() Sheet {
	shell := emitted(components.ShellClassLists())
	var only []string
	for _, name := range emitted(components.GalleryClassLists()) {
		if !slices.Contains(shell, name) {
			only = append(only, name)
		}
	}
	rules, err := style.Rules(only...)
	if err != nil {
		panic("ui: the gallery declares a class the style engine cannot render: " + err.Error())
	}
	return fingerprinted(css.NewSheet().Merge(rules))
})

Gallery is the second sheet: the rules for the classes only the gallery's own components emit and app.css therefore does not carry. It is the difference and not the whole set — the two share most of the utility alphabet, and a second copy of .flex would make the pair bigger than the one sheet it replaced.

It carries no tokens, no roles and no base layer: it is loaded beside app.css, never instead of it, and it is the same bytes whatever the palette, because a utility rule is written in terms of a role and a role is written in terms of a token. That is why it takes no theme, and why it is computed once.

Functions

func Assets 

func Assets(app Sheet, more ...fs.FS) fs.FS

Assets is the tree a shell serves under its asset prefix: app.css is the sheet it composed, gallery.css is Gallery, js/ is Controllers, and then any trees the consumer adds — its own scripts — looked up in order after the computed files and before the kernel's.

Types

type Extra added in v1.1.0 

type Extra struct {
	Lists  []style.ClassList
	Sheets []*css.Sheet
}

Extra is what one consumer adds to the kernel's sheet: the class lists its own markup renders with, resolved by ui/style exactly as the components' are, and the rules no class can express — an attribute selector for a client's grain, a keyframe for an animation.

type Sheet added in v1.1.0 

type Sheet struct {
	Body        []byte
	Fingerprint string
}

Sheet is a composed stylesheet: the bytes a browser downloads and the first eight bytes of their SHA-256 as hex. A page puts the fingerprint in the asset's query string, so a deploy that changes a rule — or a client that changes a colour — changes the URL and a browser that cached the old one asks again.

func Compose added in v1.1.0 

func Compose(theme design.Pair, extra ...Extra) Sheet

Compose is every page's stylesheet in one palette: that palette's tokens, the role variables, the small base layer, one rule per class the components and the extras declare, and then the extras' own rules. It is a pure function of its arguments. Call it once and keep the value.

The components' lists and the extras' lists are resolved together, which is what gives a shared utility one rule: a consumer that appended its own resolution to the kernel's bytes emitted .flex twice.

Source Files

View all Source files

Directories

Path Synopsis
Package web renders pk-ui component contracts to HTML with gomponents, styled entirely through tw class lists against the PlatformKit design system's role variables.
 Package web renders pk-ui component contracts to HTML with gomponents, styled entirely through tw class lists against the PlatformKit design system's role variables.
examples
Package examples captures component constructor invocations as typed examples and describes them: Props as JSON Schema, named slots, observed HTML and child occurrences, derived by reflection from the actual Go inputs.
 Package examples captures component constructor invocations as typed examples and describes them: Props as JSON Schema, named slots, observed HTML and child occurrences, derived by reflection from the actual Go inputs.
Package css is the CSS intermediate representation the stylesheet is built in: typed values, declarations, rules, custom properties and the two at-rules the design system uses.
 Package css is the CSS intermediate representation the stylesheet is built in: typed values, declarations, rules, custom properties and the two at-rules the design system uses.
Package document is an HTML document as values: what every page of a shell shares (Chrome), what a render may know about the caller (Request), what a handler returned (View), and Document, which puts them together around the body a frame arranged.
 Package document is an HTML document as values: what every page of a shell shares (Chrome), what a render may know about the caller (Request), what a handler returned (View), and Document, which puts them together around the body a frame arranged.
Package export is the design-tooling half of ui: content-addressed snapshots of the composed components (Export, ExportWithLayout), token export in the DTCG interchange format (ExportTokens, TokenExport.DTCG), typed proposals applied to source captures (ProjectProps, ProjectReplacement), and the Storybook a shell serves so a person can browse the same composition.
 Package export is the design-tooling half of ui: content-addressed snapshots of the composed components (Export, ExportWithLayout), token export in the DTCG interchange format (ExportTokens, TokenExport.DTCG), typed proposals applied to source captures (ProjectProps, ProjectReplacement), and the Storybook a shell serves so a person can browse the same composition.
Package forms composes portable entity forms from detached presentation inputs.
 Package forms composes portable entity forms from detached presentation inputs.
Package icon is the glyph set the components draw with: the regular-weight Phosphor subset this application uses, vendored as path data.
 Package icon is the glyph set the components draw with: the regular-weight Phosphor subset this application uses, vendored as path data.
Package page is how a shell turns a screen into an HTML document.
 Package page is how a shell turns a screen into an HTML document.
Package resource renders the screens of a schema-described resource — the list, the detail and the two forms — from plain values: the entity's schema, the rows a handler read, and the words the request's locale chose.
 Package resource renders the screens of a schema-described resource — the list, the detail and the two forms — from plain values: the entity's schema, the rows a handler read, and the words the request's locale chose.
Package screens generates the screens of any resource kit/rest registered, for any shell that mounts them: the list, the detail, the two forms, the two writes and the delete.
 Package screens generates the screens of any resource kit/rest registered, for any shell that mounts them: the list, the detail, the two forms, the two writes and the delete.
Package source verifies and persists bounded edits to captured Go properties.
 Package source verifies and persists bounded edits to captured Go properties.

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.