Headless para developers.
Editável para pessoas.
Nativo para IA.
Gestão de configuração para pessoas e agentes. Crie seções React tipadas, mantenha conteúdo editável no Git e renderize no seu site. Estes guias cobrem a versão publicada Blocks 7.x.
Mude um título. Veja o caminho.
Edite o título abaixo. Acompanhe o texto no bloco JSON salvo, nos props de uma seção React e no site. O código da seção continua o mesmo.
Este preview local roda automaticamente. Uma interação pausa a animação; ela retoma após um segundo de inatividade e mantém seu texto. A publicação em produção passa pela revisão de um pull request no Git e pelo deploy configurado.
Escreva o que quiser. Acompanhe seu título nas próximas três etapas.
{
"__resolveType": "site/sections/PromoBanner.tsx",
"title": "Frete grátis acima de R$ 75",
"href": "/summer"
}
<PromoBanner
title={"Frete grátis acima de R$ 75"}
href="/summer"
/>Comece pelo seu framework
Adicione Blocks a um site novo, conecte um projeto existente ou migre do runtime descontinuado.
TanStack Start
Configure seções React, resolução de conteúdo e um Cloudflare Worker com o binding TanStack.
Abra o quickstart TanStackNext.js
Adicione seções editáveis e rotas gerenciadas por conteúdo a um projeto App Router.
Abra o quickstart Next.jsMigre um site existente
Migre um site Fresh/Deno descontinuado para a versão 7.x publicada e conecte o Editor de Sites do Studio.
Planeje sua migraçãoAntes de começar
Use React 19 e Node.js 24 ou superior nas ferramentas Node. O binding Next.js usa App Router 15 ou superior; o binding TanStack usa TanStack Start 1.x e Vite 6 ou superior, com nodejs_compat no Cloudflare Workers. Cada quickstart detalha suas dependências e configuração.
Do código ao conteúdo
Escreva sua primeira seção
Exporte props tipados de um componente React e transforme-os em campos que sua equipe pode editar.
Conheça seções e blocosConecte o Editor de Sites
Conecte o repositório e o preview ao app de CMS dentro do Studio para que pessoas componham páginas e editem conteúdo.
Conecte seu siteRevise e publique
Revise o diff de conteúdo em um pull request, faça o merge e o deploy da configuração aprovada.
Entenda a entregaExplore o framework
Veja os pacotes e exports, entenda como tipos viram formulários, conecte integrações de comércio ou consulte logs e traces. O glossário explica os termos do framework.
As gravações de treinamento do admin descontinuado estão no arquivo histórico. Use os guias atuais do Editor de Sites para os fluxos de edição.
Blocks faz parte da oferta Storefront. O Editor de Sites fornece a interface de CMS dentro do Studio; os templates fornecem implementações completas de sites.