Visual Editor

Last updated: 2026-03-12
The Visual Editor is a browser-based WYSIWYG interface that renders your landing page in a live iframe — exactly as visitors see it. Click any element to edit it, drag sections to reorder them, use AI to rewrite copy, or switch to Code Mode to edit the raw HTML directly.

How to use it

  1. Open the editor

    From the landing page detail view, click 'Open Visual Editor'. The page loads in an iframe canvas with a properties panel on the right.

  2. Click to select

    Click any text, image, or section to select it. A blue outline ring indicates the selected element.

  3. Double-click to edit text

    Double-click any text element to enter edit mode. Use the floating toolbar for Bold, Italic, and Underline. Click outside to confirm.

  4. Replace images

    Click an image, then click 'Replace' in the Properties panel. Upload a new image (JPG, PNG, WebP, max 5 MB). It is automatically converted to WebP and stored in your media library.

  5. Drag sections to reorder

    Click any section to reveal the drag handle (top-left corner). Drag it up or down to reorder. A blue line marks the drop position.

  6. Switch to Code Mode

    Click the </> button in the topbar. Edit the raw HTML with a live preview beside it. Changes sync back to the visual canvas on save.

  7. Use AI Edit

    Click the purple AI button (sparkle icon) in the topbar. A panel slides down with two modes: Entire Page rewrites the full layout based on your instruction; Element edits only the selected element. Type your instruction and click Apply.

  8. Save

    Changes autosave every 5 seconds. Click 'Save' for an immediate manual save. Up to 20 version snapshots are kept — restore any of them from the History panel.

Frequently asked questions

Can I undo changes?
Yes. Ctrl+Z / ⌘+Z for undo, Ctrl+Shift+Z / ⌘+Shift+Z for redo. The editor keeps a 50-step in-memory history.
Is there a maximum page size?
No hard limit on HTML size. Uploaded images are capped at 1200 px wide and converted to WebP (max 5 MB per upload).
How do I restore a previous version?
Click 'History' in the topbar to see up to 20 saved versions. Click 'Restore' — a new snapshot is created before the restore so you can always undo.
What is the difference between AI Edit Page mode and Element mode?
Entire Page mode sends your whole landing page HTML to the AI along with your instruction and rewrites the full layout — the result is saved automatically and a new version snapshot is created. Element mode sends only the selected element's HTML so you can refine a single headline, paragraph, or button without touching the rest of the page. Element-mode changes are previewed in the editor and saved only when you click Save.
Does AI Edit consume AI credits?
Yes. AI Edit uses the same credit pool as page generation. A page-mode edit costs approximately 5–15 credits (text only). Element mode costs less since only a small fragment is processed.
How long does AI Edit take?
AI Edit runs as a background task. Results appear in the editor automatically — typically within 15–60 seconds for element mode and 30–90 seconds for full page mode.

Related