The studio's editor is the page itself. Click what you want to change, and change it: its words, its link or image, its styles at each screen size, where it sits, or whether it's being tested. You don't need to read or write code, and nothing you do is hidden from someone who does: every change is a small, ordinary edit to the site's TSX, which the code pane shows beside the page.

Edit and Preview#

A site opens in Edit, at the top of the editor. The page is a canvas: Layers on the left, the inspector on the right.

Edit selects what you click. Links don't go anywhere, so you can click them to change them.
Preview uses the page as a visitor would: links, forms, and interactive parts work.
Code shows or hides the code beside the page, and counts errors while it's hidden.

Desktop, Tablet, and Mobile, at the top of the inspector's styles, show the page at that width. A change to a style applies to the width shown (see Styles).

Selecting#

Point at anything on the page, and an outline says what a change reaches before you click:

Outline	What it is	What a change reaches
Cobalt	The page's own markup	This page
Violet	A component's markup, such as a section	Every place the component is used, unless you change only this one
Gray	Part of an interactive island	Nothing here: it's changed in the code

A click selects. Clicking again inside a selection selects what's in it there, and the bar under the page selects what the selection is in. Layers shows the page as a tree, with lists, conditions, and experiments as rows of their own; it follows the selection, and a click on a row selects that. A click outside the page clears the selection.

The inspector's card says what's selected, whose it is (In Hero, placed 3 times on 2 pages), and what it's in, such as an experiment's variant or a list's item.

Words, links, and images#

Double-click words to type over them on the page. Enter keeps them, and Escape puts them back. Pasted text comes in as plain text.
In the inspector, change the words, a link's address and whether it opens in a new tab, or an image's file and its description for screen readers.
One placement, or all of them. Words in a component, such as a section's heading, can change for This Hero only, or for Every Hero.

Words the code works out, such as a greeting made from a name, and words in an interactive part are shown but can't be changed here: Edit in code opens the code at them.

Adding sections and elements#

Add (+), at the top of the sidebar, has the section library: a hero, features, pricing, testimonials, an FAQ, a call to action, a contact form, and a newsletter sign-up, each built on the site theme so it takes your colors and type. Above them are elements: a heading, a paragraph, a button, a link, an image, and a stack to hold others.

Click one to add it Before or After what's selected (an element can go In it too), or drag it onto the page. A section brings its component file and the theme colors it needs, and Undo takes all of it away again.

Moving, duplicating, and deleting#

Drag anything on the page to move it. A dashed magenta outline shows what it would go in, and a magenta line shows where. Grab a section by its heading to move the whole section. Escape cancels a drag.

Every drag has a command too, in the selection's menu (⋯ in the inspector, a right-click, or Shift+F10):

Move up and Move down (Alt+↑ and Alt+↓), Move to…, and Move into…, which lists the elements on the page that can take it.
Duplicate (⌘/Ctrl+D), Delete (Delete or Backspace), and cut and paste.
Wrap in a stack… puts the selection, and the elements after it you choose, in a new box laid out as a Stack, a Row, or a Grid.

HTML's rules are kept: a button can't go inside a link, or a list's item outside its list. Where something can't go, the editor says why instead of trying.

Deleting a section shows the code that comes out, and offers to delete its component too when nothing else uses it. Anything that would take a running experiment off every page, or leave its goal with nothing to record it, asks first.

Styles#

Below the card, the inspector has the selection's styles in sections: Layout, Spacing, Size, Grid cell, Typography, Fill, Border, Effects, and Visibility.

Values come from your site. Colors, text styles, corners, shadows, and spacing list the site theme's first. A heading's size and weight come from its text style, and a value you set says Overrides heading-2, with Reset to heading-2.
Desktop first. A change on desktop applies to tablet and mobile too, unless they have their own. A value from a bigger screen is labeled in amber ("From desktop"), and ↺ takes a screen's own value away. Use on all breakpoints copies the values shown to every screen size, and Hide on mobile hides an element on phones.
Hover. Normal and Hover switch between how it looks and how it looks under the pointer: colors, borders, and shadows.
Sliders for padding, margins, and gaps show the change on the page as you drag. Advanced takes a value of your own, such as 13px or #4f46e5.
Contrast shows under text and background colors: the ratio against what's behind the text, and whether it's enough to read.

Styles are written as the utility classes the code already uses, changing only the one you changed, so a developer reading the code later finds pt-32 max-lg:pt-16, not a block of generated CSS.

Testing what you selected#

Test this, on the inspector's card, wraps what's selected in a new experiment, in one step: what's selected becomes control, beside a copy of it, b, which the page then shows, selected, for you to change. It's named for what it wraps, and judged on the goal the site uses most; the toast says both.

Change b like anything else: its words, its styles, what's in it. Until you do, the inspector says Variant b looks the same as control on this page. When you publish, the test starts. See Experiments for splitting traffic, targeting, and what to do next.

A running experiment's variants are what its visitors see, so changing one asks first, with Edit anyway.

Undo, and the code beside the page#

Every change is one step to undo (⌘/Ctrl+Z) and redo, however it was made. Each is checked by the compiler like an edit to the code, and one that would break the page is undone with the reason.

Edit in code, on the inspector's card, opens the code beside the page at what's selected. Show on page, in the code's bar, selects on the page what the cursor is in, and says what that is before you press it. A click on one never moves the other.

Accessibility#

♿ in the sidebar opens Accessibility. Check the page checks the page as it renders, against WCAG 2.2 A and AA: contrast, images without descriptions, links and buttons with no name, heading order, and the rest. The site's own warnings, such as a form field without a label, are listed for every page. Pick a problem to select its element on the page; the inspector says what's wrong.

What it doesn't do#

Free placement. Elements sit in sections, stacks, rows, and grids, so pages stay responsive; there's no placing an element at any point on the page.
Rich text inside a sentence. A link or bold word in a paragraph is changed in the code.
Interactive parts, such as a calculator or a menu that opens, are changed in the code.
Touch screens: dragging needs a mouse or a pen.

For people who should change words but nothing else, invite them as content editors: see Editing text without code.

Visual editor