Skip to content

Work / Trunk / Wiki / Surfaces

components-get-code

Surfacedraftverified 2026-10-17

SURFACE.WEB.COMPONENTS.COMPONENTS-GET-CODE

Summary

Get code for the component in the state and size shown, in whatever the person asks for: a framework and a styling from the list, or anything else in words, written by AI.

Raw wireframe

  • .context/designs/web/components/components-get-code.html — React · CSS Modules · TypeScript · tokens
  • .context/designs/web/components/components-get-code-empty.html — empty: nothing chosen yet
  • .context/designs/web/components/components-get-code-loading.html — loading: an AI request being written
  • .context/designs/web/components/components-get-code-error.html — error: the AI request failed, nothing counted
  • .context/designs/web/components/components-get-code-locked.html — locked: Can view asked for something else

Why it is drawn this way

Nothing is chosen until the person chooses. The sheet opens empty the first time; no library's code is shown that nobody asked for. After that it opens on the person's last choice for this product.

Two choices and three options cover the common cases: Framework (HTML, React, Vue, Angular, Svelte, Web Component), Styling (CSS, CSS Modules, Tailwind, inline styles), then TypeScript, tokens or plain values, and this state and size or all of them. Styling that does not fit the framework is not offered.

Anything else is asked for in words. "SwiftUI", "Flutter", "Angular with Material" go to AI. That uses one AI action and needs Can edit on Team; Can view sees it locked.

The product's stack is a hint, not a default. "Your product looks like Next.js · Tailwind" fills the choices only when clicked.

The output is files, each with Copy, and Download all. A component made of other components imports them and links to them ("Uses ProductCard").

The same request as a trunk command is shown above the files, so what a person picked here can be repeated from a terminal or by an agent over MCP.

The code is generated, not the captured markup. Class names come from each element's role and values from the product's tokens. How: 2026-10-17-get-code.

The code has the words the person typed (owner, 2026-10-19). Words typed on the component's canvas — the variant's text edits in the person's view — are written into the spec before the code is made (withWords in @trunk/codegen): a part's words become its text, and words that came from a prop become the prop's default. The same spec feeds Get code, the CLI, MCP and /api/v1. The styles set on the component are in it too (withStyles): the same at every width, so a narrower width no longer paints over them, and a colour picked from Styles is written as its token — var(--brand-700) with the token in tokens.css — while a value of its own is written as itself. A list's item or an icon is not changed this way.

Related

Sources

  • .context/designs/web/components/components-get-code.html