Blocks Page Builder: editor visual open source em React

Editores visuais costumam prender o usuário em HTML gerado e difícil de manter. No Blocks Page Builder resolvemos isso exportando componentes React limpos, versionáveis e reutilizáveis.

Por que editores visuais falham

Usamos Craft.js para o core de drag-and-drop e árvore de nós, React e TypeScript no front, e Vite para um dev experience rápido. Cada bloco é um componente tipado, o que mantém o preview fiel ao resultado final.

O erro comum é tratar layout como strings de HTML. Nós tratamos como árvore de componentes: o que é arrastado na tela vira exatamente o mesmo elemento que um desenvolvedor escreveria à mão.

Como construímos

O projeto é open source (MIT) e nasceu da nossa necessidade interna de prototipar landing pages rapidamente. Hoje é também um ponto de entrada para a comunidade contribuir e para novos talentos nos encontrarem.

A arquitetura separa o editor (estado, histórico de ações) do runtime (renderização dos blocos), o que permite exportar código sem dependências do editor e manter o bundle enxuto.

Open source e comunidade

Mais do que uma ferramenta, é uma demonstração prática de como escrevemos front-end: tipado, componentizado e focado em developer experience.

Receber contribuições de fora força o código a ser claro e documentado. É um ciclo positivo: a comunidade melhora a ferramenta e nós melhoramos como time ao revisar cada PR.