Editing
Studio opens your home page in a live canvas. What you see there is rendered by the same components as your published site, so it’s exactly what visitors get.
Click anything to edit it
Section titled “Click anything to edit it”- Text edits in place: click a selected text block (or press Enter) and type. Headings, lists, links, quotes and emphasis work as you’d expect; text styles come from your type presets, not ad-hoc sizes.
- Images open the media picker — choose from your library or upload. See Media.
- Any block shows a toolbar: Edit text, Style, Duplicate, Move up, Move down, Delete and Ask AI.
- Sections have their own toolbar: move, duplicate, hide or show, color theme, Stack/Grid layout and delete.
The inspector on the right shows the selected block’s Content and Design, or the section’s Layout and Design. On phones it opens as a bottom sheet.
Sections and presets
Section titled “Sections and presets”Pages are built from sections — a hero, an about block, services, testimonials, a gallery, pricing, questions, a call to action, contact details and more. To add one, hover between two sections and press +, or use the Add section panel. The gallery shows over a hundred designed section presets, rendered live in your site’s styles, not as generic thumbnails.
Presets come with designed copy that shows the intended length. Replace it with your own words — keeping roughly to that length keeps the design balanced.
Each section has a color theme: Light, Light accent, Dark, Dark accent or Brand. Alternating them deliberately gives a page rhythm — for example Light → Light accent → Light → Dark for a strong finale. All five themes are generated from your palette and always keep text readable.
Blocks
Section titled “Blocks”Inside a section, add blocks from the searchable block menu (⌘/ or / on the canvas, or “Add block” in the inspector). There are more than forty: text, images, buttons, galleries, video, quotes and testimonials, forms, newsletter signup, maps, accordions, pricing tables, team grids, stats, timelines, tabs, menus, events, products, booking embeds, link lists and more.
Two layouts: Stack and Grid
Section titled “Two layouts: Stack and Grid”Stack is the default. Blocks flow top to bottom in one to four columns, with column widths and stacking order per device. It’s impossible to misalign, which makes it the safe choice for most sections.
Grid is for precise, layered designs, like Squarespace’s Fluid Engine:
- 24 columns on desktop and tablet, 8 on phones.
- Drag blocks to place them and drag the handles to resize. Rows grow to fit text, so nothing gets clipped.
- Blocks can overlap; change the order with ⌘] / ⌘[ (bring forward / send backward), or ⌥⌘] / ⌥⌘[ (to front / to back). Text overlapping text is flagged.
- Hold ⇧ to lock the drag direction, ⌥ to drop a copy, and Esc to cancel.
- Blocks can bleed to the edge of the screen.
Switch a section between Stack and Grid from its toolbar.
Desktop, tablet and phone
Section titled “Desktop, tablet and phone”Preview at desktop (1440), tablet (834) and phone (390) widths from the top bar. Changes you make while previewing tablet or phone apply only to that size, and are marked with a colored dot (purple for tablet, orange for phone) — click the reset button to go back to the inherited value.
For Grid sections, the phone layout is automatic: blocks are stacked in visual reading order (top to bottom, then left to right). Once you rearrange it, your phone layout is kept. “Reset mobile layout” goes back to automatic.
Editing on a phone
Section titled “Editing on a phone”Studio works on phones too: edit text, swap images from your camera roll, add and reorder sections, and publish. Grid placement is edited on a tablet or computer; on phones a simple Reorder blocks sheet changes the phone order.
Undo, autosave and collaborators
Section titled “Undo, autosave and collaborators”- Undo and redo without limit during a session (⌘Z / ⇧⌘Z).
- Every edit is saved automatically — on your device instantly, and to your cloud draft within seconds. The status in the top bar says Saved, Saving… or Saved on this device when you’re offline.
- When someone else (or Claude) is editing, you see them in the top bar and their changes appear live.
Handy shortcuts
Section titled “Handy shortcuts”| Keys | Action |
|---|---|
| ⌘K | Command menu |
| ⌘/ or / | Add a block |
| Enter / Esc | Edit the selected text / select the parent |
| ⌥↑ / ⌥↓ | Move the selection up or down |
| ⌘C / ⌘V | Copy and paste blocks or sections (across pages too) |
| ⌘+ / ⌘− / ⌘0 | Zoom in, out, reset |
| Space + drag | Pan the canvas |
| ⌥4 | Site Styles |
| ? | All shortcuts |
On Windows and Linux, use Ctrl for ⌘ and Alt for ⌥.
Design check
Section titled “Design check”Studio’s Design check looks over a page the way a designer would: contrast problems, more than two typefaces, headings out of order, empty sections, images much larger than they’re shown, missing alt text, text overlapping text in grid sections, pages without a clear call to action, long runs of the same color theme, and copy far outside a preset’s intended length. Many issues have a one-click fix. The same rules guide Claude when it edits your site.