Visual Editor

The visual editor allows users to refine AI-generated designs without touching code.

Technology

Editor: Lexical (by Meta)
Why Lexical: See ADR 003

Editor Modes

1. Section Editor

Click any section to edit its content inline:

• Headlines (H1/H2/H3)
• Body copy
• Button labels
• List items

2. Style Panels

Right sidebar exposes design token overrides:

• Colors (primary, accent, background)
• Typography scale
• Section spacing
• Component variants

3. Asset Swap

Click any image to replace it:

• Re-generate with modified prompt
• Upload own image
• Browse asset library

Lexical Integration

<!-- src/lib/components/editor/LexicalEditor.svelte -->
<script lang="ts">
  import { createEditor } from 'lexical'
  import { onMount } from 'svelte'

  let { content, onUpdate } = $props<{
    content: string
    onUpdate: (value: string) => void
  }>()

  let editorRef: HTMLDivElement

  onMount(() => {
    const editor = createEditor({
      namespace: 'design-editor',
      nodes: [],
      onError: console.error
    })
    editor.setRootElement(editorRef)
    editor.registerUpdateListener(({ editorState }) => {
      onUpdate(JSON.stringify(editorState))
    })
  })
</script>

<div bind:this={editorRef} class="lexical-root" />

Change Propagation

graph LR
    A[User edits text] --> B[Lexical onChange]
    B --> C[Debounce 500ms]
    C --> D[PUT /api/projects/:id]
    D --> E[DB update]
    E --> F[Supabase Realtime broadcast]
    F --> G[Other connected clients update]

Undo / Redo

Lexical handles undo/redo natively via its internal editor state history. Keyboard shortcuts: Ctrl+Z / Ctrl+Shift+Z.

Saving

Changes are auto-saved with a 500ms debounce. A save indicator in the top bar shows:

• ⏳ Saving...
• ✅ Saved
• ❌ Error (with retry button)