Editing code

Stacki never rewrites markup it does not understand. When a page or component contains something the visual model cannot represent, the file opens in the built-in code editor instead — with the live preview still beside it.

The floating editor

Some nodes are code by nature: the page’s frontmatter, a <style> block, a <script> block. Selecting one and pressing Enter — or clicking Edit code in the Settings panel — opens it in a floating window you can move and resize while the canvas keeps rendering.

The editor is CodeMirror with syntax highlighting for Astro, CSS and JavaScript, and it has its own find, so ⌘F inside it searches the file rather than opening the insert palette.

Round-tripping

Opening a file and saving it does not reformat it. Stacki keeps:

• the quote style of your imports
• blank lines between nodes, before a closing tag, and at the end of the file
• attributes written across several lines
• a condition or loop’s own text
• <x/> against <x />, and <span></span> against <span />
• a file with no frontmatter, which does not grow an empty one

Each node is compared by rebuilding it the way Stacki would write it from scratch: if that says the same thing as the original, the original is handed back untouched. Editing a node reflows that node, and only that node.

See how editing works for the model behind this.

Unused imports

A component or image the page no longer refers to has its import removed. A name mentioned only in a stylesheet or a comment does not count as a use, and is not treated as one.