Repolode
Enviar
puckeditor

puckeditor/puck

Um editor visual modular e open source de arrastar e soltar para React, que renderiza páginas com seus próprios componentes e dados.

Alternativa open source a:WebflowFramer

Ver no GitHubSite
Estrelas
13,490
Forks
1,001
Issues abertas
198
Último commit
há 4 dias

O que é?

Puck é um editor visual para React.js que permite criar páginas com recursos de arrastar e soltar usando os componentes da sua própria aplicação. Ele é distribuído como um componente React, então pode ser integrado a apps React existentes e funciona em ambientes como Next.js.

Você define uma config que associa nomes de componentes aos campos editáveis e às funções de renderização. O editor gera uma estrutura de dados JSON, que você salva no seu próprio banco de dados; um componente Render separado transforma esses dados de volta em uma página. Os dados ficam sob seu controle, sem necessidade de um backend hospedado.

O projeto usa a licença MIT, então pode ser usado em ferramentas internas e produtos comerciais. Há receitas iniciais para Next.js e React Router v7 disponíveis pelo create-puck-app.

Recursos principais

  • 01Edição por arrastar e soltar criada com seus próprios componentes React.
  • 02A config dos componentes define os campos editáveis e o resultado da renderização.
  • 03O editor gera JSON puro, que você armazena no seu próprio banco de dados.
  • 04Um componente Render separado exibe as páginas salvas.
  • 05Funciona com Next.js e outros ambientes React.
  • 06Receitas iniciais disponíveis pelo create-puck-app.

Casos de uso

  • Permitir que pessoas não desenvolvedoras montem landing pages usando um design system existente.
  • Adicionar um construtor de páginas a um fluxo de gerenciamento de conteúdo com React ou Next.js.
  • Criar ferramentas internas em que equipes de marketing editam layouts sem escrever código.

Início rápido

  1. 1

    Instale o pacote

    npm i @puckeditor/core --save
  2. 2

    Renderize o editor com o componente Puck e config

  3. 3

    Renderize a página publicada com o componente Render

Antes de usar

  • Requer um projeto React; é um componente React, não um aplicativo independente.

Tópicos

#react#visual-editor#page-builder#drag-and-drop#no-code#typescript#ai#builder#draganddrop#nocode

Perguntas frequentes

O que é puck?
Um editor visual modular e open source de arrastar e soltar para React, que renderiza páginas com seus próprios componentes e dados. Puck é um editor visual para React.js que permite criar páginas com recursos de arrastar e soltar usando os componentes da sua própria aplicação. Ele é distribuído como um componente React, então pode ser integrado a apps React existentes e funciona em ambientes como Next.js.
puck é gratuito? Qual é a licença?
puck é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
puck ainda é mantido?
Manutenção ativa. O último commit de puck foi em 16 de out. de 2026.
Para que posso usar puck?
Permitir que pessoas não desenvolvedoras montem landing pages usando um design system existente. Adicionar um construtor de páginas a um fluxo de gerenciamento de conteúdo com React ou Next.js. Criar ferramentas internas em que equipes de marketing editam layouts sem escrever código.
Como instalar puck?
Instale o pacote: npm i @puckeditor/core --save Renderize o editor com o componente Puck e config Renderize a página publicada com o componente Render
Onde consigo puck?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/puckeditor/puck

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados