Skip to content
FrameKit Docs

Create your first template

A template is a React definition discovered under src/templates/. This walkthrough keeps only the minimum pieces needed to see one in Studio.

  1. Create the template file.

    src/templates/first-template/template.tsx
    import { defineTemplate, field } from '@mauriciodmo/framekit'
    

    export default defineTemplate({
      meta: {
        title: 'First template',
        description: 'A minimal template for learning the FrameKit workflow.',
      },
      width: 1200,
      height: 630,
      fields: {
        title: field.text({
          label: 'Title',
          required: true,
          minLength: 1,
          maxLength: 80,
        }),
      },
      content: {
        default: {
          title: 'Hello from FrameKit',
        },
      },
      variants: {
        default: 'default',
        labels: {
          default: 'Default',
        },
      },
      render({ data, width, height }) {
        return (
          <article
            className="flex items-center justify-center bg-[#10271f] p-16 text-center text-6xl text-white"
            style={{ width, height }}
          >
            {data.title}
          </article>
        )
      },
    })

  2. Validate the template.

    Terminal window
    pnpm framekit check

  3. Start the application.

    Terminal window
    pnpm dev

  4. Open Studio.

    Visit http://localhost:3000/editor and choose the template. This works without login in the default open mode. If FRAMEKIT_AUTH_ENABLED=true, visit /login, sign in, and then choose the template from /editor.

What the definition controls

Section titled “What the definition controls”
  • fields declares editable data and validation rules.
  • content contains the values for each variant.
  • variants.default selects the initial content key.
  • render({ data, assets, variant, width, height }) returns the React output.
  • width and height define the export dimensions.

The directory name becomes part of the template slug. Variant keys such as default, en, or es belong to the template; FrameKit does not reserve them as language metadata.

Continue with Project structure, then use the template and asset guides when you need the full authoring contract.