The Builder

The builder has three modes, switched with the Preview / Edit / Code control front and center in the top bar (only the active mode shows its label; the others collapse to icons):

• Preview — your site as a visitor sees it. Click around, follow links, switch pages — nothing lights up, nothing selects, no editing chrome in the way.
• Edit — the same canvas, live. Click a section to edit its copy in a form, add sections from the library. This is the default when you open a site.
• Code — the file tree and the code editor, full width, for when you want the HTML itself. A split toggle brings the live preview back beside the code.

All three edit (or show) the same real files — Edit just gives them a friendlier surface. Anything you do visually, you could also do by hand in Code mode, and vice versa. The builder remembers which mode you left open, per site.

Down the left edge runs the activity rail — Assistant, Pages, Content, Media. Click an item and its panel opens beside the canvas; click it again (or press Esc) and the panel tucks away, giving the canvas the whole screen. Only one panel is open at a time, and everything contextual (a selected section's options, a page's settings) slides in over whichever panel is open, with a back arrow returning you to it. With everything closed, a floating "Ask AI…" composer waits at the bottom of the canvas.

#The top bar

The chrome is the same in every mode:

• Your site's icon and name (top left) — click for the menu: site-level actions like Documentation, Settings, and Upload. (Renaming the site lives in Settings; while the panel is collapsed, only the icon shows.)
• The sidebar toggle and the Preview / Edit / Code control — the toggle collapses/reopens the panel region (⌘B), and the mode control is the pane switch: flip it and the whole workspace changes face. The pair sits beside the icon while the region is collapsed and glides to the content's left edge when a panel opens.
• Centered over the content: the page pill — devices, refresh, the page switcher, open-in-tab (see below).
• On the right: the save state and Publish (in Code mode, a split button here brings the preview back beside the editor).

Everything else lives on the activity rail: Assistant, Pages, and Media open as panels beside the canvas, and Content opens full-screen (its tables want the room). See Pages, Content, and Media below. ⌘B collapses or reopens the Assistant.

#The canvas: Preview and Edit

Preview and Edit share the same canvas, kept almost chrome-free. Everything browser-ish lives in the top bar's page pill, centered over the canvas:

• A device button that cycles Desktop → Tablet → Phone per click (also keys 1/2/3). At tablet or phone width the page floats as a framed artifact — rounded corners, hairline ring, soft shadow. You can still drag the preview's edge to check any width; a width badge floats over the canvas while you hold the handle.
• Refresh, tucked inside the pill's left edge.
• The current page — "Homepage" for /, the route for everything else. Click it for a dropdown of every page (Homepage by name, routes for the rest) — with an inline New Page, a gear for each page's settings, and open-in-tab (the editing rows step aside in Preview).
• Preview in a new tab, beside the pill.
• Sections are added right on the canvas — the + Add section pills between sections (or ⌘K → "Add Section…").

Below, while the Assistant is closed, the floating composer carries your request straight to the AI — it knows the page you're on, and if a section is selected it scopes the ask to that section (the placeholder says so).

In Preview, that's the whole story: the canvas behaves like your published site — links navigate, pages scroll, and nothing gets between you and the content.

Switch to Edit and the canvas wakes up. Hover it and each section lights up with an outline and a name chip — blue for the page's own sections, purple for sections that belong to the layout (the shared header and footer that appear on every page), which also carry a LAYOUT badge.

Sections can hold other sections — a hero often draws the site's header over its own background — and those count too: they outline in teal, and the chip names the section they live in (Navigation · HERO). Outlines nest, so the smallest thing under your cursor wins: over the menu you get the header, over the headline you get the hero. Editing one changes it everywhere that parent section is used, exactly like the layout's shared header.

Click a section to select it, and a floating toolbar appears with the essentials:

• ↑ / ↓ — move the section up or down the page
• Duplicate — copy it in place
• Edit content — open the section's options (sections that have them)
• Edit code — jump straight to the section's file in Code mode
• Delete — remove it (two clicks, so a stray tap can't nuke your hero)

Between sections, a blue + Add section pill inserts a new section exactly there. (A section nested inside another has no "here" to add to, so it offers no pills — add to the page, or open Edit code.) Around the layout's sections the pills read + Add to header / + Add to footer in purple — and at the boundary between layout and page, the pill row offers both side by side: shell and page.

Right-click any section for the full menu — move, add above/below, duplicate, edit, delete — and with a section selected the keyboard works too: ⌘D duplicates, ⌘↑ / ⌘↓ move, ⌫ deletes (press twice), Esc deselects.

#Section options — over the Assistant

Select a section with editable options and its panel slides over the chat: a form with a field for each piece of the section's copy — headings, paragraphs, button labels and links, image URLs, colors — plus move, duplicate, edit-code, and remove actions. Type into a field and the canvas updates a moment later; every change autosaves and is tracked in the file's revision history. The ← back arrow (or Esc) deselects and returns you to the conversation.

The markup lives in components/sections/hero.blade.php — a component with @props for its copy and {{ $heading }} echoes in the HTML. What's editable comes from one of two places (see Components for the full contract): a companion .yml beside the component declares typed fields, and without one the panel derives a plain text field from each @props entry.

# components/sections/hero.yml
fields:
    heading:
        type: text
        label: Heading

The field's default value lives in the component's @props (@props(['heading' => 'Plan work without the busywork'])); the .yml just says how it's edited. That's also what the panel shows you before you've changed anything: a field you've never touched displays the copy the component actually renders, not a blank box. So changing a headline works either way:

<x-sections.hero heading="Plan work without the busywork" />

Sections without a companion .yml (hand-written page markup, pasted library sections) are still first-class citizens — and their text and images are editable too: select one and the panel reads its markup and offers a field for every heading, paragraph, link label, and image it finds. For anything deeper, Edit code takes you straight to the markup.

#Page settings

The gear on any row of the page pill's dropdown (or the Pages panel) opens that page's settings — its URL, title, and meta description, the layout it uses (the shared shell whose sections appear on every page), plus duplicate-page and delete-page. Like everything contextual, it slides over the open panel.

#Adding sections

Add section (any of the canvas's between-section pills, ⌘K, or the Insert menu) opens the library popup:

• Library — 289 prebuilt sections across every category (heros, features, pricing, testimonials, footers…), with live previews, category filters, and search. Click one and it lands exactly where you asked. Every library section is built entirely from the platform's semantic design tokens — the same ones defined in your site's resources/css/site.css (and, on a site built under the design.md mode, documented in resources/design.md) — so it arrives wearing your palette, fonts, and corner style, and follows along whenever you restyle by editing those tokens. The previews render with your site's own tokens when it has them, so what you see is close to what you'll get.
• Community — shared designs from the community catalog: official DevDojo blocks and designs the community has contributed. Insert one and it becomes a component in your site (components/designs/…), included on the page like any other section.
• My designs — your published Designer designs. Insert one and it becomes a component in your site (components/designs/…), included on the page like any other section. Design something once, drop it into any site.

The Library and Community tabs are two views of the same catalog: the whole section library is published into the community catalog at /designs, which is the one home for shared, reusable designs across DevDojo.

#Pages, Content, and Media

Preview, Edit, and Code are views of the same site. The rail's Pages, Content, and Media entries manage what's in it:

• Pages opens a compact panel — every page with its URL, a filter when the list grows, an inline + for new pages (name it; the URL is derived), a gear for each page's settings, and open-in-tab. Click a row and the canvas hops there.

• Content opens full-screen (collections need the width), with esc taking you straight back to your site.

• Pages lists every page on the left; pick one to edit its title, meta description, URL, and layout beside a live preview, duplicate or delete it, create a new page, or jump into the editor with Edit page.

• Content is your data: every collection as a spreadsheet-style grid — browse, search, edit entries in a slide-over, add rows, and create new collections. (For an App Mode site this is the Database — the same grid over your app's real tables.)

• Media is your image library — everything under your site's public/ folder, in a compact panel beside the canvas. Upload by button or drag-and-drop onto the panel, hop into folders, and search everything at once. Double-click an image (or select it and press Space) to zoom it fullscreen — use ← → to flip through the folder like a gallery, and Esc to drop back to the grid. Right-click any file for the quick menu: View File, Rename, Move, Duplicate, Copy URL (the exact address to paste into a page — <img src="…">), Delete.

#Code: the tree and the editor

Flip to Code and the main area becomes the code workspace: a file tree mirroring a Laravel site — resources/views/pages/, resources/views/components/ (with layouts/ and sections/ inside), resources/data/, resources/css/, and public/ — with a toolbar for uploading files, creating files and folders, and deleting the open file, and the code editor filling the rest. Changes autosave and roll the preview.

By default the code takes the full width — the split button in the top-right brings the live preview back beside the editor, with a draggable seam between the two.

#The Assistant

The AI chat is one rail-click (or one floating-composer keystroke) away — in every mode. It opens by itself whenever it matters: while a site is being generated, when a turn you started from the canvas is running, and when something fails. Finish a canvas-started request and leave it alone, and it politely tucks itself away after a few seconds so the result owns the screen. A fresh chat greets you by name and waits; once you're talking, your messages sit in blue bubbles and each reply lands in a card. When a change touches files, the reply stays clean — a More details toggle at the card's foot expands to show exactly what was created, modified, or deleted. Pick your engine right in the composer (next to the send button), and collapse the whole sidebar with ⌘B (⌘I brings it back focused).

Ask it for the bigger changes — it builds pages the same way you do, as section components (<x-sections.…>) with @props for their copy, so its work shows up on the canvas ready for you to fine-tune.