Create a template

A template owns an output definition: its dimensions, editable fields, content, variants, assets, and render function. Keep the first implementation in one template.tsx; split it only when the file becomes difficult to maintain.

Create the template file.

Add a lowercase kebab-case directory under src/templates/ and default-export a defineTemplate() result.

import { defineTemplate, field } from '@mauriciodmo/framekit'

export default defineTemplate({
  meta: {
    title: 'Social card',
    description: 'A square card for social posts',
    marketingDescription: 'Present the message and motivate an action',
    tags: ['social', 'promotion']
  },
  width: 1080,
  height: 1080,
  fields: {
    title: field.text({
      label: 'Title',
      required: true,
      minLength: 1,
      maxLength: 80
    }),
    accentColor: field.color({
      label: 'Accent color',
      defaultValue: '#173d31'
    })
  },
  content: {
    default: {
      title: 'Your next story starts here'
    }
  },
  variants: {
    default: 'default',
    labels: {
      default: 'Default'
    }
  },
  render ({ data, width, height }) {
    return (
      <article
        style={{
          width,
          height,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          padding: 72,
          background: '#10271f',
          color: data.accentColor,
          fontSize: 72
        }}
      >
        {data.title}
      </article>
    )
  }
})

Validate the definition.
Terminal window
```
pnpm framekit check
```
The check regenerates the registry, validates the definition, resolves every content variant with no edits, and validates the resulting data. It catches invalid metadata, dimensions, field options, content values, and numeric constraints before the template is used.
Regenerate while authoring.
Terminal window
```
pnpm framekit generate
```
pnpm framekit dev generates before starting and watches changes under src/. pnpm framekit build also generates through its check step. pnpm framekit start is read-only with respect to generation and expects an existing production build.

The template definition, fields, and template reference document the complete contracts. When a definition grows, see Split a template definition.