The interface
The preview, the coding panes beneath it, the project panel down the side, and the structure and styling panels.
One window, four areas, and everything in it is pointed at real files.
The preview
The largest area, and the point of the app. It renders your page — through your own dev server for a framework project, or from the files directly for plain HTML.
Above it sits a bar with the address, a Pages button for jumping between pages and collection entries, and a reload. The preview can be dragged narrower to check a layout at any width, and the width is labelled while you drag.
Pages and the preview covers that bar properly.
The coding panes
A row beneath the preview: HTML, CSS, Globals, JavaScript and Assets. Each connects to one real file, and each can be collapsed to its title bar or expanded to a full-screen editor.
They are described in The coding panes.
The project panel
Down one side, with tabs for what the project actually contains:
- Files & Folders — the folder as a tree
- Assets — images, fonts and media
- AI Prompt — prompt snippets and generated agent files
- Pages, Components, Layouts, Collections — for an Astro project
The four Astro tabs appear when the project has the folder each one browses, so a
site with no src/content is not offered a Collections tab with nothing behind
it. They follow the project rather than the file you have open, so they do not
vanish when you click a plain .html inside an Astro site.
The panel docks to either side or pops out, from Preferences → Layout.
Structure and Styling
On the opposite side to the project panel, and this is where Creative Mode and Framework Mode differ most.
In Creative Mode you get the structure tree — every element in the document, nested, selectable — with an Inspector for the selected node’s tag, classes, ID and fields, and a Styling tab beside it.
In Framework Mode there is no tree, because the file is not parsed into one. Styling still works, from whatever you click in the preview.
Moving the panels
Hover a panel’s title bar and three small buttons appear at its right: move left, move right, hide. Structure and Styling both have them.
It is the same preference underneath — the Preferences dialog shows the same setting and the two stay in step — but where a panel sits is a decision you make because of what is on screen, and by the time Preferences is open you are no longer looking at it.
A hidden panel comes back from the sidebar, the way the project panel does. One also reappears on its own if the app needs it: opening a collection entry, for instance, which has nowhere else to go.
By default Styling shares the Inspector’s tabs. Preferences → Styling in its own panel gives it a column instead, with its own side and its own width — which matters because tabbed, you cannot watch the tree you are selecting in and the controls you are changing at once.
The bottom bar
Mode, the project and file you are connected to, and the icon buttons: terminal, git, inserts, preferences, the startup screen, and Disconnect all panels.
Icons can be named on hover, from Preferences → Functionality.