Deep Woods Studio
Studio is Deep Woods' visual editor. It opens on top of your actual site, so you edit next to a live preview of the page. You can change text, images, links, colors, fonts, and whole page layouts without writing code.
Open Studio
Open your project
In the Deep Woods dashboard, go to Projects → Pages and open your project.
Click Edit site
Edit site opens your site in a new browser tab and signs you into Studio automatically. If the button says Setting up…, the editor is still being built. It turns into Edit site on its own when it's ready.
Edit next to the preview
Studio opens as a panel beside your site. The rest of the window is a live preview of the page you're editing.
The Studio layout
Content and Media
The top of the Studio panel has two tabs:
- Content: your pages and site files. Pick a file to edit it.
- Media: your uploaded images, videos, and font files. See Media, images & fonts.
What's in Content
| Item | What it is |
|---|---|
| index | Your home page (/). |
| Other page files (for example about) | Additional pages. A file named about is the page at /about. |
| settings → site | Site-wide brand settings: name, logo, colors, fonts, navigation, footer. See Brand & site settings. |
| forms | Where your built-in forms send their answers. See Forms. |
| embeds | Saved embed codes for forms from other services. See Forms. |
Editing a page
When you open a page, Studio shows:
- Page Settings at the top: the page's title, description, header and footer visibility, background, and fonts. See Page settings.
- The page body below: a stack of blocks (also called sections), such as a hero, a feature grid, an FAQ, or a form. See Working with blocks.
Your changes appear in the preview as you type.
Visual editor and code editor
Every page can be edited two ways. Switch between them from the editor's menu with Use code editor and Use visual editor.
- Visual editor (the default): forms, toggles, dropdowns, icon pickers, and image pickers. Use it for nearly all of your editing.
- Code editor: the page as plain text. It's useful for pasting a ready-made block (many examples in these docs can be pasted straight in), for a few advanced style settings, and for fixing a block that's hard to select. See Using the code editor.
Preview linking
Studio keeps the editor and the preview linked by default. When you click a link in the preview, the editor opens that page. Use the Unlink editor and preview button to browse the preview without switching the file you're editing.
Your first edit
Open the home page
In Content, click index.
Change the headline
Find the first block (Page Hero), select it, and open its props. Change Title to your own headline. The preview updates as you type.
Review your change
Click Review at the top of Studio. You'll see index listed under Updated.
Publish it
Type a short description of the change, such as "New homepage headline", and click Publish. Then follow Publishing your site to preview it and make it live.
In this guide
| Page | Covers |
|---|---|
| Pages & page settings | Creating, naming, organizing, and deleting pages, plus every page-level setting. |
| Working with blocks | Adding, editing, nesting, and reordering blocks, along with text, images, links, and the code editor. |
| Block reference | Every block, every field, with copy-paste examples. |
| Brand & site settings | Name, logo, colors, appearance, fonts, navigation, header button, footer, favicon, site-wide code. |
| Media, images & fonts | Uploading and using images, video, and brand fonts. |
| Forms | Embedding forms from other services, or building your own. |
| Styling & advanced options | Per-block style changes, backgrounds, and text sizes. |
| Reviewing & publishing changes | Review, publish, revert, and what happens next. |
| Recipes | Step-by-step guides for common tasks, plus a launch checklist. |
| Troubleshooting & FAQ | Fixes for common problems. |