Making templates

Every template in PopCraft's gallery is a source file written with the Kit, built, checked and pictured by a pipeline. All of it is public. @popcraft/kit ships:

• Every official template's source, all 1,275 of them, to read and to start from.
• Every module they are made with: the Kit, the helpers, the twelve SaaS style systems, the fifty-odd theme kits, the comic and anime engines, the Lottie kit, 3D devices and stages, and the music library.
• The build, which finishes a template exactly as the official build does.
• Every check the official templates pass in PopCraft's own test suites.

The command line runs that pipeline in one command. It also adds two things PopCraft's own authoring never had: a searchable catalogue to start from, and a review render of every size, moment and brand kit.

This page is for people and coding agents alike. An agent should read it, then Designing with an AI agent for the look-and-fix method, and the design reference for the Kit.

Twenty-five of them, one or more in every format, are set up as a ready project in getpopcraft/examples/templates: clone it, npm install, npm run check.

Set up

mkdir my-templates && cd my-templates
npm init -y && npm pkg set type=module
npm i @popcraft/kit
npm i -D @popcraft/cli puppeteer      # puppeteer: the pictures and the review are drawn by the app

Node 24 or later runs TypeScript sources as they are, so a template is a plain .ts file.

Start from the best match

npx popcraft template list black friday countdown            # best matches first
npx popcraft template list --format reel --platform tiktok --use-case launch --animated
npx popcraft template new templates/spring-sale.ts --from motion-promo-sale-drop
npx popcraft template new templates/hours.ts                 # a starter that already passes every check

--from copies the official source as written, points its imports at the kit (@popcraft/kit/templates/…, @popcraft/kit/lib/…) and gives it your id. To read any official source first, look in node_modules/@popcraft/kit/src/templates/. The catalogue, with each template's file and listing, is node_modules/@popcraft/kit/dist/templates/index.json.

A source

import { Kit, preset, type Cue } from '@popcraft/kit/templates/kit'
import { defineTemplate } from '@popcraft/kit/templates/build'
import { pill, postVariants, outro } from '@popcraft/kit/templates/social/shared'
import { media } from '@popcraft/kit'
 
const cues: Cue[] = [
  { layer: 'Headline', preset: 'rise-in', at: 300 },
  outro(['Headline'], 5900),
]
 
export default defineTemplate({
  id: 'spring-sale',                       // yours, and stable: publishing again updates the template
  meta: {
    name: 'Spring sale post', description: 'What it is for, in a sentence.',
    category: 'animation', tags: ['sale', 'spring'],
    platforms: ['instagram'], formats: ['post', 'story'], useCases: ['sale'],
    created: '2026-10-04', updated: '2026-10-04',
  },
  motion: { cues, loop: true },             // the cues it plays, so every one is checked at every size
  stableNumbers: true,                       // builds the same file on every machine
  build() {
    const k = new Kit('Spring sale post', preset('ig-post'))
    k.brand({ paper: '#FBF6EE', text: '#2A1E14', primary: '#9A3412', onPrimary: '#FFFFFF' })
    // … styles, components, stacks, your own picture: k.image(parent, media('assets/shot.png'), 600, 400)
    k.cues(k.sheet, cues)
    k.variants(k.sheet, postVariants({ portrait: 96 }))
    return k.finish()
  },
})

What a source can say is the same as an official one:

Your own pictures and sounds. media('assets/file') returns the media:// reference for an image fill or a timeline's audio. The build writes the file beside the template, and pictures and publishing take it from there. PopCraft's music library is already there: @popcraft/kit/templates/audio/media names every track, and the music helpers (templates/music/shared, beat) time cuts to its beats. A build that needs a track fetches it from the app once, into ~/.cache/popcraft/media.

Your own fonts. k.font(family, media('fonts/Brand.ttf'), { weight, style, face }) puts a font file in the template, and a text style set in that family uses it: k.textStyle('Title', { size: 64, fontFamily: 'Brand' }). Register one face per weight and style; face chooses a face of a collection (.ttc), from 0. A file URL (new URL('./fonts/Brand.ttf', import.meta.url)) works as well as media(); a web address does not, since a template carries its files and does not fetch them. Text is measured in the font as it is laid out (TrueType, OpenType and collections; a WOFF2 is measured in the stand-in face), the build ships the file with the template, and every file made from the template carries it. Only use a font whose licence lets you share it this way.

What to build with. Read the shared modules before writing your own:

• templates/shared/*: drawing, marks, motion recipes, captions, cursors, windows, devices, type pairs.
• templates/web/shared: responsive pages.
• templates/web/shop-shared: storefronts a Next.js Commerce store renders: standardStore(config) makes a whole store (home with a carousel, search, a page per category and per product, the cart, or a one-product launch), and productGrid, carousel, categoryChips and the page builders compose your own. Their products, cart and menu are collections with a commerce schema, exported as a storefront (a Next.js Commerce store, or with the Ecommerce plugin a Shopify theme). The Fieldwork, Kiln and Ode templates are the worked examples.
• templates/social/shared: post and feed variants, outros and pills.
• templates/saas/*: twelve complete visual languages (bento, brutalist, editorial, glass, Swiss, terminal and more), each with its own shared module.
• templates/themes/*-shared: the theme kits (gothic, noir, art deco, Bauhaus, risograph, solarpunk, the holiday sales and more).
• templates/anime, templates/game, templates/motion3d and templates/lottie/lottie-kit: the comic and anime engines, game UI, 3D devices and stages, and Lottie-exportable motion.

Build, check, look, picture, publish

npx popcraft template check                  # every source under templates/: build, then every check
npx popcraft template look templates/spring-sale.ts   # render every size at rest, at four moments, under two brand kits
npx popcraft template pictures               # the gallery's thumbnail, detail still and hover loop
POPCRAFT_TOKEN=pop_… npx popcraft template publish    # all of the above, then upload to your account

Each source builds into build/<id>/:

The checks are the ones PopCraft's own test suites run over every official template:

The checks measure. They cannot judge composition: run template look and look at every picture, name what is wrong, fix it and look again, as Designing with an AI agent describes.

From code

The command line is a thin layer over the kit. The same pipeline from a script:

import { prepareFonts, buildFromSource, checkTemplate } from '@popcraft/kit'
import source from './templates/spring-sale.ts'
import { readFileSync } from 'node:fs'
 
await prepareFonts([readFileSync('./templates/spring-sale.ts', 'utf8')])   // real type before anything is laid out
const template = await buildFromSource(source)    // the official build; fetches any PopCraft music it uses
const issues = await checkTemplate(template, { source })

Templates you publish land private in your account's template gallery; list one publicly from the gallery.