Editing text without code

Most changes to a live site are words: a headline, a button's label, a plan's description. You can make them without reading or writing TSX. In the studio's editor, switch from Code to Content.

What you can change#

Content mode lists the text in the open file that visitors read:

• Text in markup, such as a heading or a paragraph.
• Text attributes and props, such as an image's alt, a page's title and description, an input's placeholder, and the words you pass to a component, like <Hero title="…" cta="…" />.
• Text in data at the top of the file, such as the plans or steps a page lists from an array.

Each field shows what it is, such as title of <Hero> or steps[0].title, and its line in the code. Text inside an experiment's variants comes first, under the experiment's name and the variant's, so you can change what one variant says without touching the others.

Technical values aren't listed: links and file paths, class names, ids, goal names, and the names of experiments and variants. Change those in Code mode.

How changes are saved#

Type in a field, and the change goes into the code as you pause, when you leave the field, or when you press Enter. It's written the way the code needs: an & in a heading becomes &, and quotes in a string are escaped, so the page reads exactly what you typed. Then it saves and previews as if you had typed it in the code, and the Problems panel checks it as usual.

Line next to a field switches to Code with that text selected. Selecting a problem or a search result also switches to Code.

If the file changes some other way while you're editing, such as in another tab, the change is refused rather than written in the wrong place, and the fields are read again.

What it doesn't do#

Content mode changes words, not layout: to add a section, reorder a page, or change styles, use Code mode. Text that your code builds from pieces, such as a greeting made from a name, can't be listed, and neither can text in a component's markup when the component gets it from its props: change it where the component is used.

import { For, Page } from "mockly"; const plans = [  { id: "hobby", name: "Hobby", blurb: "For side projects and your first experiments." },  { id: "team", name: "Team", blurb: "For teams that test every launch." },]; export default function Home() {  return (    <Page title="Acme" description="Landing pages with experiments built in.">      <h1>Ship faster</h1>      <img src="https://images.example.com/team.png" alt="The Acme team" />      <For each={plans}>        {(plan) => (          <p>            {plan.name}: {plan.blurb}          </p>        )}      </For>    </Page>  );}

In Content mode, this page shows plans[0].name, plans[0].blurb, plans[1].name, plans[1].blurb, the page's title and description, the heading, and the image's alt, but not the plans' ids or the image's address.