Working with blocks

A page is a stack of blocks. Each block is a finished, styled piece of a page: a hero, a row of stats, a feature grid, an FAQ, a pricing table, a form. You fill in the content, and the block takes care of layout, spacing, and responsive design.

Building a page from sections

Add a block

Put your cursor where the block should go

Click an empty line in the page body, or press Enter at the end of a line to create one.

Type /

A menu opens with text options (headings, lists, quotes), media (Image, Video), and Components, the Deep Woods blocks.

Find the block

Keep typing to filter the list, for example /hero or /faq, then pick the block. It appears with sample content.

Blocks are grouped in the menu:

Group	What's in it
Deep Woods Starter Blocks	Cta (a single button), Page Section, and Hero (older; use Page Hero instead).
Deep Woods Page Blocks	Page Hero, Stats, Page Logos, Page CTA, plus layout helpers (Page, Page Header, Page Body, Page Grid, Page Card, Page Columns, Page List, Page Links, and more).
Deep Woods Marketing Blocks	Pricing Plans, Pricing Plan, Faq, Testimonials, Banner, Footer, Footer Columns, Header.
Deep Woods Forms	Form Embed, Form Block, and the fields that go inside a form.

Feature Grid also appears in the list. Some groups contain lower-level interface components, such as Button, Card, Tabs, Modal, and Table. Most sites never need them. Every block you're likely to use is described in the Block reference.

Edit a block's content

Each block has props, the fields that hold its content and options: title, description, buttons, list items, colors, and so on.

Select the block

Hover over the block in the page body and click its name.

Open its props

Click Edit props (the sliders icon on the block's row). A panel opens with the block's fields.

Edit the fields

Change text, flip toggles, pick from dropdowns. The preview updates as you go. Press Esc or click an empty part of the editor to close the panel.

Fields come in a few types:

Field type	How to use it
Text	Type. Short fields hold a line, such as a title. Longer ones hold a paragraph, such as a description.
Toggle	On or off, for example Reverse or Fill.
Dropdown	Pick a value, such as a Color (`primary`, `neutral`, …), a Variant (`solid`, `outline`, …), or a Size (`xs`–`xl`).
Icon	Search the icon library by name, for example `rocket`. Icon names look like `i-lucide-rocket`. While you're editing, blocks with icons show a Browse icons link in the preview that opens the full icon list. Visitors don't see that link.
Image	Pick from Media, upload, or paste an image address.
List	Lists of items, such as stats, FAQ questions, feature cards, or buttons. Use Add to add an item, the arrows to reorder, Edit item to open one, and Delete item to remove it.

Move, duplicate, and delete blocks

Hover over a block to show its handle (⠿) on the left. Click the handle for a menu:

Menu item	What it does
Move up / Move down	Moves the block one place in the page.
Duplicate	Adds a copy directly below.
Insert before / Insert after	Adds an empty line above or below, so you can type `/` and add a block there.
Copy to clipboard	Copies the block so you can paste it on another page.
Delete	Removes the block.

You can also drag the handle to move a block.

Use Move up and Move down rather than dragging when you can. If you drop a block on top of another block instead of between two blocks, it lands inside that block. In a hero, for example, the dropped block shows up in the button row. If that happens, press Ctrl+Z (Cmd+Z on Mac) to undo, then use Move up or Move down.

Blocks inside blocks

Some blocks hold other blocks:

Page Hero and Page Section: put Cta blocks inside to create a row of buttons.
Form Block: holds Form Field blocks, each holding an input.
Page Section: holds an image beside or below its text.

To add a block inside another, click inside the parent block's content area and type /.

Slots: content in a specific spot

Some blocks have named slots, specific places where you can put your own content. In a Page Hero, for example, the bottom slot places an image below the buttons.

Select the block and choose Add slot.
Search for the slot name (for example bottom) and pick it.
Click inside the new slot and type / to add an image or other content.

To remove a slot, open its menu and choose Delete slot.

Block	Useful slots
Page Hero	`bottom` (an image under the hero), `top`, `headline`, `title`, `description`, `body`, `footer`
Page Section	`bottom`, `top`, `body`, `features`, `footer`, `links`
Page CTA	`body`, `footer`, `links`

If a slot's content duplicates a field, such as a title slot and a Title prop, the slot replaces the field.

Text

Type straight into the page body for regular text between blocks, or inside blocks that accept it. Select text for the formatting toolbar: Bold, Italic, Strike, Code, Headings, lists, and links.

Type / on an empty line to add a Heading 1–4, Bullet List, Ordered List, Blockquote, Code Block, or Horizontal Rule.

Use one Heading 1 per page at most. A Page Hero's title is usually the page's main heading already, so use Heading 2 and Heading 3 for text sections.

Images

Type / and choose Image.
In Select Image, pick an image from your library, Upload a new one, or choose Use external source to paste the address of an image hosted elsewhere.
Click Confirm.

Select the image afterward and choose Edit image to set:

Alternative text: a short description for screen readers and search engines. Always fill this in.
Width and Height: optional sizes in pixels.

Uploads can be up to 3 MB each. See Media, images & fonts.

Video

Type / and choose Video, then pick or upload a video, or use an external source. Edit video sets the Poster image URL (the still shown before playback), Show controls, Autoplay, Loop, and Muted.

Uploaded videos must be under 3 MB, and most videos are larger. For anything longer than a few seconds, host the video on a video service or in Deep Woods Files and use Use external source.

Links

On buttons, menus, and footers, each link field accepts three kinds of address:

Kind	Example	Use it for
A page on your site	`/pricing`	Another page in Studio.
A section on a page	`#faq` or `/pricing#faq`	Jumping to a block with that ID. See Linking to a section.
An external address	`https://example.com`	Another website. Set Target (or Open in new tab) to `_blank` to open it in a new tab.

In text, select the words, click the link button, paste the address into Paste a link..., and choose Apply link. Turn on Open in new window for external links. If the link field doesn't appear, use the code editor and write the link as [link text](/pricing).

Linking to a section

To link straight to a block, such as a "Pricing" menu item that scrolls to your pricing table, give that block an ID:

Switch to the code editor (Use code editor).
Find the block, for example the line ::pricing-plans, and add id: pricing to its settings between the --- lines:
```
::pricing-plans
---
id: pricing
title: Pricing
---
::
```
Link to it with #pricing from the same page, or /your-page#pricing from another page.

IDs should be lowercase, with hyphens between words, and unique on the page.

Using the code editor

The code editor shows the whole page as text. It looks technical, but the pattern is consistent:

---
title: About us
description: Who we are and what we do.
hideHeader: false
---

::page-hero
---
title: We build things that last
description: A small team with a big portfolio.
---
  :::cta
  ---
  label: Contact us
  to: /contact
  ---
  :::
::

Some regular paragraph text between blocks.

Part	Meaning
The `---` section at the very top	Page Settings.
`::page-hero` … `::`	A block. The name after `::` is the block type, and a closing `::` ends it.
`---` lines inside a block	The block's props, one per line, as `name: value`.
`:::cta` (three colons)	A block inside another block. Each level of nesting adds one colon.
`#bottom` inside a block	A slot. Everything after it, until the block closes, goes in that slot.
`::form-embed{embed="newsletter"}`	A shorter way to write props on one line.

Rules that keep the code editor happy:

Indentation inside the --- props section matters. List items start with - and their fields line up underneath.
If a value contains a colon, starts with #, or starts with @, wrap it in quotes, for example to: "#features".
Every opening ::name needs a matching closing :: with the same number of colons.

The examples in the Block reference are written for the code editor. Paste one where you want the block, switch back to Use visual editor, and edit it there.

Studio sometimes shows "Formatting applied to align with MDC syntax standard." That means it tidied up the text's formatting. Your content didn't change.

Pages & page settings

Create, name, organize, duplicate, and delete pages in Studio, and use every page-level setting.

Block reference

Every Deep Woods block, with its fields and copy-paste examples.