Skip to content

Work / Trunk / Wiki / Surfaces

components-playground

Surfacecanonicalverified 2026-10-21

SURFACE.WEB.COMPONENTS-PLAY.PLAYGROUND

Summary

One component, live, in a new tab: its interactions play, its properties are controls, and every event it emits is logged.

Raw wireframe

  • .context/designs/web/components-play/playground.html
  • .context/designs/web/components-play/playground-empty-view.html
  • .context/designs/web/components-play/playground-loading-view.html
  • .context/designs/web/components-play/playground-error-view.html

Why it is drawn this way

It is Preview for a component. ⌘P on a component's canvas opens it, the way it opens a page's Preview. Share makes a preview link, the same as a page's.

State is a switch at the top, not a state of this screen. Empty, Loading, Data and Error are views the toolbar picks, so they are -view files, as on the component's own canvas. The screen has no state of its own worth drawing: it opens what is on the ref.

Controls are the component's properties, like Storybook's: Text is a text box, Boolean a switch, Variant a segmented pick, Instance swap a menu of the preferred icons or components, a Slot lists what it holds. Clicking the component changes them too: tick AIS and its row ticks.

In the app it is /<company>/<product>/play/<component>?ref=, beside Preview, so it names the ref in its query. The frame runs only Trunk's played-frame script, which says where a press landed; the interactions are played by the runtime in @trunk/render/interactions, which Preview shares.

Events are logged with what they carried, newest first. CheckboxGroup emits onChange with the checked values; the Error view logs the empty list that put it there; Empty logs onUpload.

The demo is CheckboxGroup "Share with your CA": Form 16 · FY 2025-26 and AIS ticked, 26AS pending. Edit returns to the set.

Related

Sources

  • .context/designs/web/components-play/playground.html
  • .context/designs/web/components-play/playground-empty-view.html
  • .context/designs/web/components-play/playground-loading-view.html
  • .context/designs/web/components-play/playground-error-view.html
  • 2026-10-21-components-like-figma