Skip to content
decodecodeveloper docs

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

Configuration management for humans and agents. Build typed React sections, keep editable content in Git, and render it with your website. These guides cover the released Blocks 7.x framework.

How it works Start building

Change a headline. See it flow.

Edit the headline below. Follow it into a saved JSON block, through the props of a React section, and onto the website. The section's code stays the same.

This local preview loops automatically. Editing pauses it; it resumes after one second idle and keeps your text. Production publishing follows a reviewed Git pull request and your configured deployment.

1Edit the headline on the CMS

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

2Watch the JSON change
SummerBanner.json
{
  "__resolveType": "site/sections/PromoBanner.tsx",
  "title": "Free shipping over $75",
  "href": "/summer"
}
3Pass the new inputs to TypeScript
src/sections/PromoBanner.tsx
<PromoBanner
  title={"Free shipping over $75"}
  href="/summer"
/>
4Render the website
Free shipping over $75Shop summer →
CMS → JSON → TypeScript → website. The same headline at every step. This is a local preview.

Start with your framework

Add Blocks to a new website, connect an existing project, or migrate from the retired runtime.

TanStack Start

Set up React sections, content resolution, and a Cloudflare Worker with the TanStack binding.

Open the TanStack quickstart

Next.js

Add editable sections and content-managed routes to an App Router project.

Open the Next.js quickstart

Migrate an existing site

Move a retired Fresh/Deno website to released 7.x, then connect Studio's Site Editor.

Plan your migration

Before you start

Use React 19 and Node.js 24 or later for Node-based tooling. The Next.js binding targets App Router 15 or later; the TanStack binding uses TanStack Start 1.x and Vite 6 or later, with nodejs_compat on Cloudflare Workers. Each quickstart covers its dependencies and setup.

From code to content

Write your first section

Export typed props from a React component and turn them into fields your team can edit.

Learn sections and blocks

Connect the Site Editor

Link your repository and preview to the CMS app inside Studio so people can compose pages and edit content.

Connect your website

Review and publish

Review the content diff in a pull request, merge it, and deploy the approved configuration.

Understand delivery

Explore the framework

Find the packages and exports, learn how types become forms, connect commerce integrations, or inspect logs and traces. The glossary explains the framework's terms.

Training recordings for the retired admin are in the historical archive. Use the current Site Editor guides for editing workflows.

Blocks belongs to the Storefront offering. The Site Editor provides its CMS interface inside Studio; templates provide complete website implementations.