Add a second template

Goal

Add another template to the workspace — or another section to one you already have.

Prerequisites

• A workspace — Install creates one.

Steps

A template is a plain folder under templates/, so adding one is copying a folder that already works:

cp -r templates/starter templates/listings

Then open templates/listings/template.ts and change key to match the folder it now lives in — the two must agree. Change name while you are there: it is what the editor shows a user. The copy is check-clean before you change anything else.

Copy the template closest to what you are building, not always the one the workspace shipped with. A template carries its output class and a copy inherits it: a website lays sections out across pathed pages, while an image or document template declares frame formats and pathless pages (Frames and formats). Starting from a template in the class you want is what keeps its pages, presets and theme in the shape that class needs.

Adding a template duplicates nothing else. Every template in the workspace shares the same kit version, the same root package.json and lockfile, and the same tsconfig.json and ESLint config. There is nothing per-template to configure beyond the folder itself.

Another section, inside a template

A section is a plain folder too, under a template’s sections/:

cp -r templates/listings/sections/main templates/listings/sections/gallery

A section folder holds the three files every section has — Renderer.tsx, section.ts and fixtures.ts (Sections and declarations). In the copy, give the section its own identity: anchor and label in section.ts, and the component name in Renderer.tsx. Anything else the folder needs is yours to add — see Organize a section’s files.

Copying a section does not put it on the site. Composing it is two entries in that template’s template.ts: one in the composeSections({ ... }) block, which builds the instance, and one naming that handle inside a page() — Add a second page covers laying instances out across pages, and a single-page template lists it on the one page it already declares.

Commands

cp -r templates/starter templates/listings
template-kit check listings

Verify

Verify with the author loop — a copied template is check-clean before you change a line, which is the point of starting from one that already passes.

Rules that can fire

• template-invalid — the copy’s declared key still names the folder it was copied from, or the entry you add to composeSections({ ... }) names a section the workspace does not have.

See also

• Add a second page — laying composed instances out across more than one page, and sharing one of them between them.
• Organize a section’s files — what else may live in a section folder beyond the three reserved files.
• Run check — the gate every template (new or edited) must pass.