Editing

Styles

Single-click a stamped element to open the style panel. In a Tailwind project, tweaks are written as utility classes on that element's className. Everywhere else they go into an inline style={{}}object. You don't choose — nextcanvas detects which kind of project it is.

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. In Autosave each control change writes immediately. In Manual mode it stages behind the Save button, alongside your text and attribute edits — each property stages separately, so you can restyle several things and write them in one go.

In a Tailwind project

Each control is written as a utility class, and the class that previously controlled that property is removed rather than left to fight with the new one:

<h1 className="text-lg text-red-500">      // before
<h1 className="text-lg text-[#0000ff]">   // after setting the colour

• Weight and alignment use the named utilities — font-bold, text-center.
• Colour, size and padding use arbitrary values — text-[#0000ff], p-[13px]. That keeps the value exactly what you picked; snapping to p-4 would silently mean something different in a project with a customised scale.
• Utilities carrying a variant (hover:, md:, dark:) are never removed — they apply conditionally, and deleting them because you changed a base value would throw away states you wrote deliberately.
• Clearing a value removes the class. If className ends up empty, the attribute is dropped.

Everywhere else

Without Tailwind, 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.
• On the Tailwind path, className must be a plain string — className="a b" or className={'a b'}. A computed one such as className={cn('a', busy && 'b')} is refused, because there is no position in a conditional that is correct for every render.

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).