User guide · Adopt

Adopt your existing copy

Your components are already full of copy — headlines, button labels, empty-state text — written as string literals. stet moves those strings behind keys without you retyping anything. stet scan finds them, stet register rewrites them, and every adopted value lands in your committed fallback in the same commit.

You need a project with stet installed — the quickstart gets you there. Everything on this page works snapshot-only; the last step needs a store.

01Scan your components

scan lists the words your visitors see: headlines, paragraphs, button labels. Each one comes with where it lives and a suggested key name. Your files stay exactly as they are.

In React and Next.js components, the next step moves the text behind keys for you. In other templates, scan points the text out and you add the key yourself, just like in Render your first key. Plain HTML sites have their own chapter.

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

"Never miss a post again."
  src/pages/index.tsx:4 → home_page_headline

"Track every mention of your brand…"
  src/pages/index.tsx:5 → home_page_paragraph

"Start free"
  src/pages/index.tsx:6 → home_page_link_text

02Adopt them

register turns each literal into a key read and shows you every diff as it goes. The rewrite touches only the leaf — callers, props and markup stay exactly as they are. Anything that shouldn't be copy, you leave out.

Run it with --write, then review the change with git diff before you commit. The adopted values land in defaults.json in the same commit, so the words that were in your components are now in your committed fallback — same text, same rendering, now editable.

$ npx stet register --from scan --write
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
-export default function Home() {
+import { useCopy } from '@getstet/stet/react';
+export default function Home() {const copy = useCopy();
   return (
     <main>
-      <h1>Never miss a post again.</h1>
+      <h1>{copy('home_page_headline')}</h1>
⋮
src/pages/index.tsx: rewrote 9 edits
wrote … 3 keys added
register: applied

03Rename a key

Keys are named by page and role. To give one a name of your own, rename moves it everywhere at once: the registry, the committed copy and every place your code reads it. It shows the plan first, and --write applies it.

$ npx stet rename home_page_link_text home_signup_link --write
1 key renamed

  src/pages/index.tsx
- <a href="/signup">{copy('home_page_link_text')}</a>
+ <a href="/signup">{copy('home_signup_link')}</a>

04Seed the store

With a database, seed writes the snapshot in as version 1, once per key — the point where your copy history starts. Snapshot-only projects skip this; the committed file already is the live value.

$ npx stet seed

05Check the result

audit compares the descriptor against the store and reports what's registered but not yet editable, and what's in the store but no longer in your code. It reports and never deletes.

$ npx stet audit