BUILD · THE COMPOSER

Design on the page your visitors see.

The Composer opens your real page, rendered by the same server that serves your visitors, and lets you click a section and type into it where it stands. Move it, restyle it from your theme, design a version for one audience or one experiment on the same canvas, and publish behind your approval. Not a preview, and not a mock-up: the page itself. You and the copilot work on it through one governed path, with one history and one undo.

Every figure on this page is as of October 2026.
Composer with the Stats section selected and its settings open beside the page.
On this pageWhat it does
  1. What it does
  2. What happens on one canvas.
  3. Click a section. Type.
  4. Pages built from typed sections, not pasted code.
  5. One search for everything you can add.
  6. Your theme first. Your own value when you need it.
  7. One canvas, every version of the page.
  8. Measurement, code and access, set on the page they govern.
  9. Change a live page safely. Publish when it is right.
  10. The rules every page starts from. In the admin, these live under Site › Catalogs.
  11. A theme is a set of named values. The whole site follows it.
  12. Forty-three typefaces, served from your own site.
  13. How it works
  14. The journey of one edit.
  15. What keeps it safe
  16. Common questions
Edit in place, style, compare, and undo.

What it does

The Composer is a room of its own in your admin, and Pages › "Add New" opens it, so every new page starts here.

One canvas, seven things at once

What happens on one canvas.

Each of these is how the Composer works today, as the product's own code records it.

You edit the served page itself.

The canvas is the page your server renders for visitors, opened in a frame.

You and the copilot share one path.

Both write through the same governed tools, with one history and one undo.

Live pages are safe to edit.

Three honest states: "Draft", "Published", and "Published · changes pending".

It asks before one edit changes many places.

Rename the site's title or a menu link from the canvas, and a card tells you the change applies "everywhere, not just here".

An audience or a variation is edited on the same canvas.

Choose who you are editing for, and the page renders that version.

Tracking, scripts and paywalls are set where the page is built.

Three drawers, on the page they govern.

Styling is typed and theme-first.

Your theme's roles come first; your own value is the fallback, never a pasted style string.

The Composer on a draft page of ours: the canvas showing a dark band whose picture is a capture of the copilot's approval card, and the side panel's Settings for the Stats section, open on its Layout options.

Edit the real page

Click a section. Type.

  • "Choose a page to compose" lists every page, draft or live, with "Search pages" and filters by status and by experiment. The list can be copied or downloaded.
  • A new page or post starts from a gallery of page types, and the draft begins with that type's own sections. Or choose "Describe it to the Copilot".
  • Hover, and a chip names the section's type. Click to select it. "Edit text", or a double-click, edits the words on the page itself, and Escape applies them. "Edit appearance" opens its look.
  • The keyboard works too: the arrows move between sections, M moves one, + adds one, with Enter and Esc.
  • Each section carries its own bar: "Edit", "Edit text", "Edit appearance", "Undo", "Track", "Move up", "Move down", a grip to drag it, add, duplicate, and delete, which asks "Delete?" first.
  • The top bar holds "← All pages" and "Switch page"; the page's state; "Preview width" at Desktop 1280, Tablet 768 and Mobile 390; zoom; "Refresh render"; "Scripts (n)"; "Structure"; "Access (Public)"; "View page ↗" and "Preview draft ↗" on a published page, or "Open preview ↗" on a draft; and "Publish".
  • The words around the page can be edited from the canvas as well: the site's title in the header, the footer, and each menu link.
The Composer on a draft page of ours: a Layout section with two columns, a heading, text and a button in the first and an image in the second, and the insert menu open on “Inserting into column 1 of Layout” with the elements that can go into it.

Sections and elements

Pages built from typed sections, not pasted code.

  • A page is a column of sections, 40 types in all: heroes, features, testimonials, galleries, video, pricing, questions and answers, calls to action, forms, stats, team, timelines, comparison tables, recommendations, live lists of your posts and more.
  • "Row (columns)" sets text, headings, images, buttons, icons, social icons, lists, ratings and dividers side by side. "Layout" holds 12 elements: heading, rich text, image, button, icon, icon list, icon box, image box, video, embed, divider and spacer.
  • "Columns" is a 12-column grid with separate widths for desktop, tablet and phone, vertical alignment, and moving an element from one column to another.
  • "Structure" shows the page as a tree of rows, columns and their children. Click any node to select it and scroll to it.
  • Every layout is a responsive 12-column grid, so pages hold together on every screen.
All 40 sections and 12 elements
The Composer on our Lighthouse page with its insert menu open between two sections: Find anything to add, the tabs Sections, Elements, Patterns and Page templates, and the sections recommended for this page, Hero, Features and FAQ, each with its variants.

Add anything

One search for everything you can add.

  • "Add to the page" opens the palette: "Find anything to add", with "Sections", "Elements", "Patterns" and "Page templates".
  • "Browse all N section types · M variants" opens the full browser, with real preview images and "Recommended for this page".
  • Behind it sit 196 pre-filled sections and 132 patterns: 76 for sections and 56 whole-page templates.
  • Pictures and links are picked, never typed: a search-first media library with upload, and links chosen from your real pages or a web address.
The Composer editing a Rich text section in place on a draft page of ours: the formatting bar above it, set to a table of 3 rows by 2 columns, over that table with its Time and What header and two filled rows.

Appearance and styling

Your theme first. Your own value when you need it.

  • The side panel's "Settings" shows the selected item's fields under "Words", "Entries", "Layout", "Behaviour" and "Motion", with "Find one of N settings" and "Apply changes".
  • Under Advanced, a developer sets an "HTML anchor" and "Additional CSS classes".
  • "Appearance" sets the text's colour, scale, weight, line height, letter spacing and alignment, and the section's background and padding. It offers your theme's roles first, and your own value as a fallback.
  • Choose a background, and it suggests the theme's paired text colour, so the contrast holds.
  • The rich-text bar: bold, italic, link, underline, strikethrough, code, subscript and superscript, alignment, headings one to six, lists, quotes, tables with rows, columns, a header row and a caption, images, the theme's text colours and highlight, undo and redo.
  • You type with the page's own styles applied, so the words look as your visitors will see them.
  • Every section and element carries one typed styling field, never a free style string.
The Composer on a demo store's Home, “Editing for Came from Demo data: autumn layers”: the page framed and labelled for that audience, and its hero headline being rewritten for that audience alone, with the format bar open.

Edit for an audience or a variation

One canvas, every version of the page.

  • "Editing for" asks one question: who are you editing for? Choose all visitors, one audience, or one variation of an experiment, and the same canvas renders that version.
  • A variation. Pick an experiment and one of its variations, and edit that version where it stands, with the banner naming the variation you are editing. "Edit name & split" adjusts the test, "Promote" copies the variation into the page's draft, and "+ New experiment" starts a draft test from the page you are on. A variation reaches visitors only when its experiment is put live, behind its own approval. An edit to a live experiment's version waits for your approval too.
  • An audience. "Paint for an audience": moving a section writes that audience's own order of sections, and editing a field writes that audience's own version of the section. A banner counts what you rearranged and what you edited. Both stay drafts until they are activated, and the page everyone else sees is never written.

Track, script and gate a page

Measurement, code and access, set on the page they govern.

Track an element.

"Choose the element", then "Choose the event": a lasting action on the page, or a rule by selector on "Click", "Submit", "Becomes visible" or "Hover", for this page, a path prefix or every page.

Scripts & events.

Your own JavaScript on this page, run on "Page load", "Click", "Submit", "Becomes visible", "Scroll depth", "Toggle open" or "Hover", with an optional event to capture. "Click", "Submit", "Becomes visible" and "Hover" need a CSS target.

Access.

"Who can read this": "Public", "Members only" or "In a package (choose which)". The "Members-only boundary" section marks where the free part ends.

The Composer after Publish on a draft page of ours, “Demo data: autumn open house”: three sections in the canvas still say they need your facts, and the foot reads “Could not publish” and “These sections still need your facts: Features, Testimonials, Call to action. Fill or remove them in the composer, then publish. Nothing went live.”

Publish, discard and one history

Change a live page safely. Publish when it is right.

  • Every edit lands on a draft. A live page reads "Published · changes pending" while it waits, and your visitors keep seeing the published version. An edit to a live experiment's version waits for your approval too.
  • "Publish" asks first: "Publish this page?" the first time, "Publish these changes?" after that. If a section still needs your facts, nothing is published: the Composer names the section, so you can fill or remove it first. Sample words are named in the Composer and on the card, and publishing them is your call.
  • The card also names the scripts and tracking the publish adds or changes, and who a new form's submissions are emailed to. It warns about links to an address where no page is published, or to a spot the page does not have, but never stops the publish.
  • Its undo says what it will do: "Take it offline" after a first publish, "Put the earlier version back" after a later one.
  • "Discard changes" drops what is unpublished, after asking you to confirm.
  • "Changes this session", at the foot of the canvas, lists every change made, with Undo and Redo. It is the same history the copilot writes to.
  • If the copilot changes the page while you have it open, a notice says so: "Your copilot changed this page". Leaving with unsaved work asks first.
Site, Catalogs, Page types: the Home / Marketing page type open, its label, default theme, description, Available to the copilot, and its recipe of sections in order: Hero, Logo cloud, Features and more.

Page types and recipes

The rules every page starts from. In the admin, these live under Site › Catalogs.

  • "Catalogs" opens on one line, "N page types · N section types · N themes", and reports "valid" with a tick, or the issues it found. Its tabs are "Page types", "Sections" and "Themes".
  • 29 page types, from "Home / Marketing" and "Landing page" to "Case study", "Careers", "Changelog / release notes" and "Legal / policy".
  • Each type carries its label, "Available to the copilot", "Layout: the default section recipe" that you reorder by dragging, "Allowed sections", and the "Intake questions" the copilot asks before it builds one.
  • "Sections" is the library itself, with real previews in light and dark: "Sections", "Pre-filled", "Patterns", "Page templates" and "Elements". Each section shows its fields, its pre-filled versions, "Used by", "Personalization", and "What lands" when you insert it.

Themes and the Theme Studio

A theme is a set of named values. The whole site follows it.

  • 72 themes in 10 families: Executive, Editorial, Warm, Toned down, Happy, Brilliant, Elegant, Tech, Minimal, and Brutalist / raw. Every theme comes in light and dark.
  • "New theme" opens the Theme Studio: "Colors", "Typography", "Spacing", "Radius & shadows", "Layout", "Modes" and "Developer", with live contrast chips as you work. It previews the theme on a specimen page.
  • Any exact colour you name is accepted.
  • "Review and activate" shows every value that will change before the site follows, and its undo puts the old theme back.
  • Saving or deleting a theme carries an undo too. Coming soon.
  • A theme's tokens, and its contrast audit, can be exported.
  • Your visitors can switch the site between its modes, light and dark.
  • The visitor's light or dark choice is remembered from page to page, with the system preference and no flash. Coming soon.

How a theme becomes your CSS

Fonts

Forty-three typefaces, served from your own site.

  • 43 self-hosted font families, from Inter, Source Serif 4 and Playfair Display to IBM Plex Mono and Space Mono.
  • Because they are served from your site, your pages make no requests to an outside font service.
  • Each family is cut to the Latin range and kept small, with its licence and its source recorded.

All 43 families

How it works

The journey of one edit.

  1. The canvas is the real page.

    The server route that serves your visitors renders it, inside a frame opened through a signed preview address. The frame runs none of the page's own scripts.

  2. The controls sit beside the page.

    Inside the frame there are only outlines; every control lives outside it and follows the page's geometry. Each section carries a lasting address, so a click always reaches the section you meant.

  3. A gesture becomes an operation.

    Each one is sent as a typed operation, planned and applied with the same tools the copilot uses, on a draft layer of the page.

  4. A stale edit is refused.

    Each write carries the version it read, so an edit made from an out-of-date view is refused rather than written over newer work.

  5. Publishing is one governed step.

    It is the same approval-gated step the copilot uses, granted once, on the server.

What keeps it safe

Live pages stay as they are.

Edits go to a draft layer, and the published page is untouched, byte for byte, until you publish. An edit to a live experiment's version waits for your approval too.

Publishing waits for you.

"Publish this page?" or "Publish these changes?", and an undo that tells you what it will do.

One history, shared.

Your changes and the copilot's sit in one list, with one Undo and Redo.

Nobody overwrites anybody.

A stale edit is refused, and the copilot never writes over a page someone else has open.

Every door checks the same rule.

EmDash's own editor cannot save a Composer page, every write is checked field by field, and one publishing rule covers all four doors that publish: the copilot, the Composer, EmDash's own Publish button and migration's bulk publish.

Typed, not pasted.

No raw HTML section can be inserted by anyone. Embeds come from a closed list of ten providers, in a sandbox, and only a person can place one.

Common questions

Is the Composer a page builder?

It is a visual designer for typed sections. You place sections, and elements in a 12-column grid, with separate widths for desktop, tablet and phone, and you style them from your theme.

Will visitors see my edits before I publish?

No. A live page shows "Published · changes pending" until you publish, and visitors keep seeing the published version. An edit to a live experiment's version waits for your approval too.

Can the copilot and I work on the same page?

Yes. You share one history, a notice tells you when the copilot changed the page, and it never writes over a page someone else has open.

Can I write my own CSS?

On each section, set an "HTML anchor" and up to eight "Additional CSS classes". For the whole site, a style entry on Privacy & Data › Consent › "Head & CSP" applies everywhere. Styling fields themselves are typed.

Can I add my own JavaScript?

Yes, page by page, on the "Scripts & events" drawer, with seven triggers.

Does it replace EmDash's editor?

For pages and posts made in the Composer, yes: EmDash's editor refuses to save one, and points you here: "This page is built in the Composer. Open it there."

Does it work on pages moved from WordPress?

Yes. A migration lands pages as native sections, and they open in the Composer like any other, with extra layout controls for their breakpoints and states.

Can I use my brand's exact colours and type?

Any exact colour, yes. Type comes from 43 self-hosted families.