Headless for developers.
Editable for humans.
Native for AI.

Keep behavior in typed functions and configuration in Git. Give people and agents a shared way to change it, with your website rendering the result.

How it works Explore the API

Change a headline. See it flow.

Edit the headline below. Follow the same text into a small JSON block, through the inputs of your TypeScript component, and onto the website. The function's code stays the same.

The example loops automatically. Editing pauses it; it resumes after one second idle and keeps your text.

1Edit the headline on the CMS

Headline

Write anything. Follow your headline through the next three steps.

2Watch the JSON change

SummerBanner.json

{
  "__resolveType": "promo-banner",
  "title": "Free shipping over $75",
  "href": "/summer"
}

3Pass the new inputs to TypeScript

src/promo-banner.tsx

PromoBanner({
  title: "Free shipping over $75",
  href: "/summer",
})

4Render the website

CMS → JSON → TypeScript → website. The same headline at every step. This is a local preview.

Build from here

Understand the model

Follow typed code, schemas, saved configuration, publishing, and rendering in one technical walkthrough.

Read how it works

Make inputs editable

Turn your TypeScript types into editing fields and configure the values your functions receive.

Explore forms from types

Edit your website visually

Explore the Next editor integration contract. For a released project, use the Blocks 7.x Site Editor workflow.

Read the editor contract