AnvilKit
Open Studio
Anvilkit × Puck

The Puck-native component studio

Independently publishable React components, composed into a real visual editor, a free-form canvas, an AI copilot, live collaboration, and a clean export pipeline.

Open the editorSee it in action →
11+ published blocksPuck headless builderHTML · React · JSON export
Live preview

Edit props, render live

This is the editor's core loop in miniature: change a block's serializable props on the left and watch the render update on the right. The generated snippet is real, runnable usage.

Accent
Alignment

Puck-native

Compose pages from real packages.

Every block is an independently published @anvilkit/* package. Edit its props here — the preview re-renders live.

Get started
import { Hero } from "@anvilkit/hero";

export function LandingHero() {
  return (
    <Hero
      eyebrow="Puck-native"
      headline="Compose pages from real packages."
      description="Every block is an independently published @anvilkit/* package. Edit its props here — the preview re-renders live."
      cta={{ label: "Get started", variant: "iris" }}
      align="center"
    />
  );
}
Open the full editor →Explore all capabilities
How to use

From install to published page

Four steps take you from an empty project to a published, exportable page built entirely from @anvilkit/* packages.

1

Install the packages

Add the core runtime and just the blocks you want. Each is an independent @anvilkit/* package.

pnpm add @anvilkit/core \
  @anvilkit/hero @anvilkit/navbar
2

Compose a Puck config

Each package exports a componentConfig. Assemble them into one consumer-owned Puck Config.

import { createHeroConfig } from "@anvilkit/hero";

const config = {
  components: { Hero: createHeroConfig() },
};
3

Mount the Studio

Render <Studio> from @anvilkit/core with your config and data. Plugins extend it without forking.

import { Studio } from "@anvilkit/core";

<Studio puckConfig={config} data={data} />;
4

Publish & export

Publish to the Headless Page IR, then export production HTML, React, or JSON with resolved assets.

// Publish → IR → export
await exportHtml(ir);
await exportReact(ir, { syntax: 'tsx' });
Core features

Everything a page builder needs

The studio shell, plugins, and packages cover the full authoring lifecycle — editing, AI, collaboration, canvas, and export.

Puck-native

Every package exports a Puck componentConfig — fields, defaultProps, render, metadata — so it drops straight into the editor.

Independent packages

No umbrella bundle. Install only the @anvilkit/* blocks you need; each is versioned and published on its own.

AI Copilot

Generate whole pages or regenerate a single section from a prompt, wired through the @anvilkit/plugin-ai-copilot pipeline.

Real-time collaboration

A one-line managed transport adds shared editing, live cursors, and presence over Yjs — no backend wiring required.

Canvas studio

A Konva-powered free-form canvas with geometry, snapping, alignment, brand kits, and accessible keyboard tools.

Export pipeline

Publish to a Headless Page IR, then export clean HTML, React/TSX, or JSON with resolved assets.

Design system tokens

Token-bound field renderers plus off-token and WCAG-AA contrast validators keep every page on-brand.

Built-in i18n

Components and Studio ship en/zh/ja/ko catalogs with a config-centric locale switch baked into the shell.

Ready to build a page?

Jump into the editor hub for every interactive surface, or read the docs for the full package reference.

Explore the editorRead the docs ↗