Web Page Editor Tour

In Circuitry, a web page is a first-class document. Open one and you get the source and the rendered page side by side — type in the code pane and watch the page update, or work directly on the rendered page and click the element you want to change. No export step, no separate browser window, no reload ritual.

That matters because pages in Circuitry aren't just files — they're live participants in your work. A Web node puts a real page inside a workflow, so upstream nodes can generate or transform its content and downstream nodes can consume it. Sketch a layout on the whiteboard, have an agent draft the page, then open it here to inspect and finish it by hand. The editor is where you direct the result: see exactly what was produced, fix exactly what's wrong, and save it back into the flow.

The editor opens as a tab with the page's name and a live character count on the left of the toolbar, and split preview / code panes below.

A tour of the controls

Top toolbar

• Edit Mode — click elements in the rendered preview to edit them directly; click again to exit.
• Hover — hover-select: as you move through the code, the matching element lights up in the preview, so you always know which markup produced which pixel.
• Preview — show or hide the live preview pane.
• Code — show or hide the HTML source pane.
• Format HTML — reformat and prettify the source in one click (handy after agent-generated markup).
• Save — saves the page (⌘S); the button turns emerald when there are unsaved changes and reads "No unsaved changes" when you're in sync.
• Refresh preview — re-renders the preview, restarting any animations and clearing hover highlights and selection.
• Reset to saved — discard your edits and return to the last saved version.
• Zoom — with a % readout between them; zooms the preview when only the preview is showing, otherwise zooms the code pane.

Keyboard

One shortcut to remember (Cmd is Ctrl on Windows/Linux):

Works with the rest of the studio

• Web Node — the workflow node this editor backs: real pages as workflow inputs and outputs.
• Website Node — assemble multiple pages into a whole site inside a workflow.
• Web Design — designing pages with AI across Circuitry's surfaces.
• Workflows Overview — wire pages into flows with agents, code, and data.
• Agentic IDE — the code-first side of the same loop: plan, generate, inspect, iterate.
• The Smart Whiteboard — sketch the layout first, then make it real.