Skip to content

Work / Trunk / Wiki / Surfaces

pages-edit

Surfacecanonicalverified 2026-10-19

SURFACE.WEB.PAGES-EDIT.PAGES-EDIT

Summary

A page in Edit, with the Place order button selected; and with an element you drew selected.

Raw wireframe

  • .context/designs/web/pages-edit/pages-edit.html
  • .context/designs/web/pages-edit/pages-drawn-element.html

Why it is drawn this way

Edit adds the drawing tools and the Design and AI tabs. The inspector changes the selection: shape, radius, fill and border from Styles, text, and its links.

A link has an action. Place order goes to /checkout on Tap and to /sign-in when signed out. Add a link opens it on Journey.

What you drew moves as in Figma. Drag it to move it; its eight handles resize it from any side; the arrows nudge it (⇧ for ten pixels). The handles sit over the frame, never in it. Its inspector has its place and style; Duplicate, Copy, Paste, Bring to front and Send to back are on its menu and keys. A move, nudge, resize, delete, duplicate or reorder shows in the frame the moment you do it and is saved behind it, so working fast never waits on the server; arrow presses close together are saved as one move. What was captured moves too. Press an element you picked again and drag it, or nudge it with the arrows: it is drawn moved, as a translate saved like any style, so the page's layout around it stays as the product has it, and it snaps as a drawn element does. Its eight handles set its width and height, and its place from a left or top handle, as one change. A drag on an element not picked draws the box that picks what was drawn.

Colours from Styles, numbers that scrub, words typed in place (owner, 2026-10-19). For a captured element and for one drawn in Trunk alike, Fill, Border and Text colour are a swatch and a token name, picked in pages-pick-color. Numbers (X, Y, W, H, Radius, Opacity) change by dragging their label, and by ↑ and ↓ in the field, ⇧ for 10. Double-clicking any words on the page types them in place (pages-edit-text).

Related

Sources

  • .context/designs/web/pages-edit/pages-edit.html
  • .context/designs/web/pages-edit/pages-drawn-element.html
  • 2026-10-18-editor-redesign