Site recipes
Focused changes and checklists for maintaining a Systhema client site.
On this page
Use these recipes after the Build a site tutorial. Each recipe assumes a Systhema project with synced token references and documentation matched to its installed version.
Choose a recipeLink to this section
| Task | Recipe |
|---|---|
| Compose a reusable UI element | Custom component |
| Give a CMS page its own shell | Custom page template |
| Change a region's colors | Theming and dark mode |
| Add a frontend and content locale | Adding a language |
| Connect the Admin metrics dashboard | Connecting analytics |
| Verify a production launch | Going-live checklist |
| Transfer ownership to the client | Client-handover checklist |
| Update a deployed site | Upgrading a client site |
Before changing a projectLink to this section
Run commands in the app that depends on Systhema, not an unrelated workspace root:
node -p "require('./node_modules/@systhemaui/core/package.json').version"
systhema infoRead systhema.config.ts and .systhema/references/tokens/_index.toon. If the references are missing, run the project's sync script and inspect them again:
pnpm syncUse version-matched docs for API questions. The project references, rather than documentation defaults, determine available themes and variants.
Verify the resultLink to this section
Run the consumer project's type check, lint and format scripts. The starter has no typecheck script, so use:
pnpm exec tsc --noEmit
pnpm lint
pnpm formatFor visual changes, inspect the rendered result at the project's breakpoints and in each supported theme. For Payload changes, check both published content and unsaved live preview.
Schema changes need a database plan. A clean type check says nothing about whether existing data can move safely into a new schema. Read Database migrations before deploying them.