Using FrameKit

FrameKit turns React templates into editable image workflows. Start with the task you need to complete; the sidebar contains the deeper concepts and reference material.

Caution

Authentication is opt-in. When FRAMEKIT_AUTH_ENABLED is missing or false, /editor and /brand are open, /login redirects to /editor, /settings and the access API are absent, and image rendering needs no credential while retaining its renderer defenses. Set FRAMEKIT_AUTH_ENABLED=true before exposing production to an untrusted network.

Start here

Create a new projectScaffold the canonical Next.js project and open Studio.

Add FrameKit to Next.jsIntegrate FrameKit into an existing App Router application.

Create your first templateDefine editable fields, content, dimensions, and a React renderer.

Use StudioEdit template content, work with brands, and export PNGs.

Build with FrameKit

TemplatesUnderstand definitions, fields, variants, assets, and rendering.

Brand componentsCreate reusable visual building blocks discovered by FrameKit.

HTTP APIIntegrate optional access management and server-side image rendering.

DeploymentPrepare Node, Chromium, optional auth data, secrets, and persistence.

For command details, configuration contracts, migrations, and diagnostics, use Reference, Migrations, and Troubleshooting in the sidebar instead of repeating those details in the task guides.