User guide · Layout

Change your page layout

New sections, removed sections, text that moves from one place to another: you change the page as you always would, and stet keeps the keys in step. Work on a branch, and the live site stays as it is until you merge.

The commands are the same on every kind of site. The examples use a plain HTML page.

01Work on a branch

Create a branch and push it once with -u, so every later push knows where to go. Then turn on branch previews at your host: Cloudflare Pages has a setting for it, and Vercel and Netlify build them already. Each push gets its own preview link.

$ git checkout -b develop
$ git push -u origin develop

02Edit the markup

Change the page by hand: add the new sections with their text in place and delete the ones you no longer need. Give each section an id that says what it is. stet uses the id when it names keys, so <section id="pricing"> gives home_pricing_headline.

  index.html
- <form>… Join the list …</form>
+ <section id="pricing">
+   <h2>One price per berth.</h2>
+   <p>Pay 4% of each booking. No monthly fee.</p>
+ </section>

03Clear out removed text

check lists every key whose text is no longer on the page and prints the command that drops them. remove shows what it will delete, and --write deletes it. Commit the removal with the markup change, so a single revert brings both back.

$ npx stet check
warn: 2 keys have no mark — stet remove home_page_button_text home_page_placeholder drops them

$ npx stet remove home_page_button_text home_page_placeholder --write
removed 2 keys

04Rename keys that moved

Text that moved into a new section keeps its old key name. rename --propose writes a plan that names every key the way stet would name it today. Read it, change any name you'd like, then apply it.

$ npx stet rename --propose names.json
wrote names.json: 3 of 5 keys would take new names

$ npx stet rename --plan names.json --write
home_page_headline        → home_hero_headline
home_page_paragraph       → home_hero_paragraph
home_page_image_alt_text  → home_hero_image_alt_text
3 keys renamed

05Adopt the new text

The new sections' text isn't behind keys yet. scan finds it and register adopts it, the same way you adopted the rest of the site. Review the change with git diff before you commit.

$ npx stet scan
scan: 1 file, 2 unkeyed literals

"One price per berth."
  index.html:17 → home_pricing_headline

"Pay 4% of each booking. No monthly fee."
  index.html:18 → home_pricing_paragraph

$ npx stet register --from scan --write
2 keys added

06Preview, then go live

Change any words in the dashboard, or in content/defaults.json followed by stet pull. Commit and push, then open the branch preview and check the page. When it's right, merge the branch into your live branch.

$ git push
  open the branch preview and check the page

$ git checkout main
$ git merge develop
$ git push