◆nextcanvas/docs
HomeGitHubQuickstart

Editing

Styles

Single-click a stamped element to open the style panel. Tweaks write into that element's inline style={{}} in source — not into Tailwind classes (yet).

How to edit

  1. Leave Buttons off so single-click selects instead of activating the page.
  2. Click once on an outlined element.
  3. Use the style panel: color, background, font size, font weight, text align, padding.
  4. Each control change writes immediately (styles always autosave, even in Manual mode — staging for styles is on the roadmap).

What gets written

nextcanvas sets or removes keys on a literal inline style object:

<h1 style={{ color: '#111', fontSize: '2rem' }}>
  Headline
</h1>
  • Changing a control updates that property in the object.
  • Clearing a value removes the key. If the object becomes empty, the style attribute is dropped.

Requirements

  • The element must already be stamped (editable text, bound text, or an editable attribute — or you selected it via the outline after a prior stamp).
  • Only a literal style={{ ... }} object is editable. style={someVar} is rejected.
Not Tailwind (yet).Class names and utility strings are left alone. If your design is class-only with no inline style object, the panel can't rewrite the look into source until a className layer lands.

Undo

Style changes ride the shared undo/redo stack (⌘Z / ⌘⇧Z). Undo writes the previous inline value back (or removes a property that didn't exist before).