Visual Designer¶

The Visual Designer is Doable's integrated point-and-click design environment that lives inside the project editor. It combines three coordinated subsystems (a live-preview canvas with element selection, a right-hand property panel, and a Figma-style design comments layer) so you can inspect, tweak, and annotate your project's UI without leaving the editor or spending AI tokens on every small style change.

Opening the Visual Designer¶

There are two entry points, both inside the project editor (/editor/[projectId]):

Entry point	How
Design tab	Click the Palette icon in the left activity bar. The tab label is "Design".
Preview toolbar toggle	In the toolbar above the live preview pane, click the cursor icon (MousePointer2) labelled "Enable visual editing". Keyboard shortcut: `V`.

Both routes activate the same mode. The Design tab also opens the right-hand property panel; the toolbar toggle keeps the current panel layout and overlays element-selection on the preview.

The Surface¶

Once the Visual Designer is active you are working with three panels simultaneously:

Design Panel (right side)¶

The property panel appears on the right. When no element is selected it shows an empty state:

Design View: Select an element to edit it. Hold Ctrl to select multiple elements. Start selecting

When you click an element in the preview the panel populates with section editors:

Section	What you can change
Text	Direct text content (inline edit)
Color	Text color and background color
Spacing	Margin and padding per side
Typography	Font size, weight, style, alignment
Size	Width and height
Border	Width, color, style, and border radius
Layout	Flex/grid direction, `alignItems`, `justifyContent`, gap (shown only for flex or grid containers)

All property changes apply live to the preview iframe the moment you adjust a slider or pick a color. Nothing is written to source yet.

Visual Edit Overlay (the canvas)¶

The live preview becomes interactive. Hovering an element shows an outline; clicking selects it and opens a floating toolbar near the element with four actions:

Ask Doable: type a natural-language prompt scoped to the selected element; submitted through the AI chat pipeline
Select parent: navigate up the component tree (CornerRightUp icon)
View code: jump to the source file and line in the Monaco code editor (Code2 icon)
Delete element: remove the element via AI (Trash2 icon)

Design Comments Layer¶

A transparent overlay that hosts Figma-style comment pins on top of the preview canvas. See Adding Inline Notes below.

Artifact Types¶

The Visual Designer works on the same artifacts the AI produces: React components, HTML pages, and Tailwind-styled elements rendered in the live preview. It inspects the React element, not the raw DOM, so when you click a <Hero /> component the property panel shows the props you can override (title, subtitle, imageSrc) and writes changes to the parent component's JSX.

Components inside node_modules are not visually editable; use the AI chat or Monaco editor for those.

Adding Inline Notes (Sticky Pins)¶

Design comments let you and your teammates pin notes directly onto the canvas without switching to a separate tool.

To place a pin:

In Design View, click the Comment button in the top-right of the preview to enter comment placement mode. The cursor changes to a crosshair.
Click anywhere on the canvas. A NewCommentInput popover opens with a "Leave a comment…" textarea.
Type your note and click Comment to save, or Cancel to abort.

Pin behavior:

Position is stored as xPercent / yPercent (resolution-independent), so pins stay in the right spot across screen sizes.
Each pin shows the commenter's avatar color and a sequential number badge (1, 2, 3…).
Click a pin to open its thread popover.

Design Comments Threading¶

The thread popover on each pin supports a full comment lifecycle:

Action	How
Reply	Type in the textarea; press Enter or click Reply
Resolve	Click the green check icon; the pin collapses and is marked resolved
Unresolve	Click the check icon again on a resolved thread
Delete	Click the X icon (available on your own comments only)
Nested replies	Replies appear indented under the parent comment, each with their own delete button

Timestamps use a human-friendly relative format: "now", "5m", "3h", "2d", or an absolute date for older items.

Presence Indicators¶

While collaborators are in Design View you see:

Remote cursors on the canvas: each teammate's pointer position rendered in their avatar color
Remote selection outlines: a colored border around whichever element a teammate has selected
Conflict warning: if two people select the same element simultaneously, a soft warning appears (VisualEditConflictWarning); the element is not locked, but the warning signals you should coordinate

Presence data is broadcast in real time over the Yjs CRDT WebSocket connection.

Three Save Modes¶

While the Design Panel shows an unsaved change, a sticky "Unsaved changes" bar appears at the bottom of the panel with three choices:

Button	Icon	What it does
Discard		Reverts all live style changes back to the original source values
Save		Writes the computed CSS directly back to the source file (`onDirectSave`). Fast and deterministic, with no AI in the loop
AI Save	Sparkles	Sends the style diff to the AI for a semantic code update (`onCommitChanges`). The AI rewrites the relevant component or class to match the design intent rather than just pasting raw computed values. Tooltip: "Send changes to AI for smarter code updates"

When to use which:

Discard: you were experimenting and don't want to keep anything.
Save: the change is small and mechanical (a color hex, a pixel value). Zero token cost, instant.
AI Save: the change involves Tailwind classes, a design system token, or restructuring. The AI produces cleaner, more idiomatic output.

Version Snapshots¶

TBD: version snapshot support specific to the Visual Designer (beyond the editor's existing History tab) was not confirmed in the source research at time of writing. Check the History tab in the editor activity bar for project-level version history.

Cross-Cursor Presence¶

When two or more collaborators are in the editor at the same time and at least one is in Design View:

Each person's canvas cursor is visible to others in real time.
Selected element outlines are broadcast, so you see a colored ring around whatever element your teammate is inspecting.
The conflict warning (VisualEditConflictWarning) fires when selections overlap.

In the code editor, multi-cursor presence works the same way through a separate binding (see Teams).

Walkthrough: Edit a Hero Section in 7 Steps¶

This example starts from an existing project with a React hero component.

Open the editor: navigate to your project and click Edit.
Switch to Design View: click the Palette icon in the left activity bar, or click the cursor icon in the preview toolbar. The preview becomes interactive.
Select the hero element: hover over the hero section in the preview until you see the selection outline, then click it. The Design Panel on the right populates with the element's properties.
Change the heading text: in the Text section of the Design Panel, edit the text content inline. The change is visible in the preview immediately.
Adjust colors and spacing: use the Color section to update background and text colors, and the Spacing section to adjust padding. All changes are live but not yet saved.
Choose a save mode: when satisfied, look at the "Unsaved changes" bar:
Click Save to write the changes directly (fast, no tokens).
Click AI Save (Sparkles) to let the AI translate the tweaks into idiomatic Tailwind or component props.
Click Discard to start over.
Pin a note for your teammate: click the Comment button in the preview's top-right, then click on the adjusted hero area. Type "Heading color matches brand guidelines now" and click Comment. Your teammate will see the numbered pin when they open Design View.

Visual Edit: the lower-level, token-free point-and-click element editing mode (the foundation the Visual Designer builds on)
Artifacts: what gets created and edited by the AI and the Visual Designer
Collaboration: full details on presence, cursors, design comments, and team chat