The Editor
The editor is a dark, full-screen workspace for one funnel. You reach it by opening a funnel from the funnels list — it takes over the whole window. On the left is an icon rail that switches views; in the middle is the workspace for the active view; on the right, always mounted, is a live device preview of your funnel.
Everything you do here edits one thing: the funnel’s draft — the working copy of its files. The AI assistant, a connected agent, and every config view all write to that same draft through the same path, so undo covers all of it and nothing is live until you publish.
[IMAGE OF the full editor: far-left icon rail, a center panel, and the phone-framed live preview on the right]
The header
The top bar carries the funnel’s identity and every publish control.
- Funnel name — the funnel you’re editing.
- Release chip — Live, Live · Edited, or Draft, reflecting how the draft compares to what’s published. Hover for detail: the live release id and whether you have unpublished changes, or
Not published yet. Click it to open the Releases popover. - Issues chip — an amber N issue(s) button when the funnel has problems that block a clean publish. See Issues.
- Connect agent pill — pairs a terminal coding agent (Claude Code, Cursor, Codex) to this funnel over MCP. See Connected agents.
- Undo / redo — coarse, file-level snapshots. One undo reverses a whole change, whoever made it — a manual edit, an assistant turn, or an agent’s write.
- Save status — Saving…, Saved, Unsaved, or Save failed (see Autosave).
- Preview — opens a full test build of your funnel in a separate tab — the real published shape, in test mode, distinct from the live in-editor preview panel.
- Publish — a split button that builds and promotes your draft to live. Its menu holds View live, Copy live URL, and Releases….
[IMAGE OF the editor header showing the funnel name, a “Live · Edited” chip, an amber issues chip, the Connect agent pill, undo/redo, and the Publish split button]
The tools rail
The far-left icon rail switches the center workspace between views. It’s split into two groups.
Editing
- Chat — the AI assistant. Describe a change; it edits your draft files.
- Code — the file tree plus a full code editor. Hand-edit any funnel file.
- Flow — the visual canvas: pages as nodes, routing as edges, A/B tests as groups. Start a page test here and author its variant page; the verdict and lifecycle live in the Experiments dashboard.
Configuration
- Localization — enable translations and edit the message catalogs. See Localization.
- Offerings — assign an offering to each offer slot your pages show. See Offerings & checkout.
- Settings — funnel-level settings.
The header also has two quick tabs, Chat and Code, for the two editing surfaces you switch between most. A dot appears on Chat when an assistant answer arrives while you’re looking at another view.
The file tree and code view
The Code view pairs a file tree with a full code editor. A funnel is a small React/TypeScript project:
funnel.ts the spine: id, pages, responses, offerings, checkout, locales
layout.tsx persistent chrome around every page
styles.css Tailwind entry + @theme tokens
pages/
welcome.tsx one component per page; filename === page key
email.tsx
paywall.tsx
finish.tsx
messages/ optional per-locale translation catalogsGenerated files (mount.tsx and friends) are hidden from the tree — they’re maintained for you. See Project structure for the full contract.
Folders carry add-actions on hover: pages gives you create page; messages gives Enable translations / Add language; assets opens a file picker to upload images. The right-click context menu holds the rest — Rename page…, Duplicate, Delete page… for pages; Rename / Duplicate / Copy reference / Delete for assets; Rename / Delete for locales.
Renaming a page forks its analytics. The rename dialog makes you acknowledge this — “I understand this page’s event history will split.” — before you confirm with Rename & fork. A renamed page is a new page as far as event history is concerned.
Uploaded images show a Read-only pill: they’re binaries, so you can view and reference them but not edit their contents in the code view. Upload replacements through the assets folder. Renaming, deleting, or creating a page also updates funnel.ts automatically so the page stays registered — the editor keeps the pages array and your files in lockstep.
Autosave
The draft loads once when you open the editor. From then on, every change is debounced and saved after 800ms of quiet. You never press save; the status chip in the header tells you where things stand:
| Chip | Meaning |
|---|---|
| Saving… | A save is in flight. |
| Saved | The draft on the server matches your edits. |
| Unsaved | You have edits not yet flushed (mid-debounce, or a save in progress). |
| Save failed | The last save did not persist. |
If you try to close the tab while there are unsaved edits, the browser warns you. Closing normally flushes the draft first.
Save failed is the one status to take seriously. Its tooltip reads: “The draft could not be saved — your latest edits are NOT persisted…”. If you see it, your most recent changes exist only in the tab. Don’t close it; fix connectivity and let the next save succeed before you walk away.
Issues
The amber Issues chip appears when the funnel has problems that would block a clean build or publish. Clicking it opens N issues to fix before publishing, and each row deep-links to the exact spot in Code or Flow. The checks include:
- Dead end · <Page> — “This page has no way forward…”.
- Unreachable · <Page> — no route leads to it.
- Broken route · <From> → <to> — “The target page … doesn’t exist.”.
- No email-capture step — “Add one so you can identify and re-engage users.” Every funnel needs an email-capture page.
- Offering problems — a page references an offer that isn’t set up, or a declared offer has no offering assigned. See Offerings & checkout.
[IMAGE OF the Issues popover listing a dead-end page and a “No email-capture step” issue, each with a jump link]
Releases
The release chip in the header opens the Releases popover — your publish and rollback surface. It lists your READY releases.
- The draft row shows Unpublished changes / N unpublished change(s) with a Publish button, or Up to date / “Matches what’s live” when the draft equals the live release.
- Each release row shows a short release id; the current one carries a Live pill, and hovering any older release reveals Roll back. Rollback is instant, not a rebuild — “In-flight visitors finish on the current release — only new visitors get the one you roll back to. Reversible.”
- Empty state: “No releases yet. Publish to create your first release.”
A running experiment owns its variant pages, so publishing can’t strip one out. If a release would drop a page that backs a live test’s arm, the editor blocks the publish with A running test is missing its pages — conclude the test (promote a winner or discard it) to free the page.
The full publish pipeline — deployments, their stages, releases, custom-domain serving — is covered in Publishing.
[IMAGE OF the Releases popover with an unpublished-changes draft row and a list of releases, the live one badged]
One draft, many editors
The single most important thing to internalize about the editor: chat, connected agents, and the config views all write the same draft files.
The assistant’s edits land in your files exactly like typed ones — you can see the diff in Code, and undo covers them. Assigning an offering in the Offerings view rewrites funnel.ts. A connected agent’s write_file runs through the identical path. There is no separate “AI layer” or “no-code layer” sitting on top of the code; there is one draft, and everything edits it. That’s why undo is universal and why you always review in the preview before you publish.