Repolode
Enviar
puckeditor

puckeditor/puck

Editor visual modular, de código abierto y de arrastrar y soltar para React, que renderiza con tus propios componentes y datos.

Alternativa open source a:WebflowFramer

Ver en GitHubSitio web
Estrellas
13,490
Forks
1,001
Issues abiertos
198
Último commit
hace 4 días

¿Qué es?

Puck es un editor visual para React.js que te permite crear páginas mediante la función de arrastrar y soltar, usando los componentes de tu propia aplicación. Se distribuye como un componente de React, por lo que puedes integrarlo en aplicaciones React existentes y funciona con entornos como Next.js.

Defines una configuración que vincula los nombres de los componentes con sus campos editables y funciones de renderizado. El editor genera una estructura de datos JSON que puedes guardar en tu propia base de datos, y un componente Render independiente convierte esos datos de nuevo en una página. Los datos permanecen bajo tu control y no necesitas un backend alojado.

El proyecto cuenta con licencia MIT, por lo que puedes usarlo en herramientas internas y productos comerciales. Hay recetas iniciales para Next.js y React Router v7 disponibles mediante create-puck-app.

Funciones clave

  • 01Edición mediante arrastrar y soltar con tus propios componentes de React.
  • 02La configuración de los componentes define los campos editables y el resultado del renderizado.
  • 03El editor genera JSON sin formato que guardas en tu propia base de datos.
  • 04Un componente Render independiente muestra las páginas guardadas.
  • 05Funciona con Next.js y otros entornos de React.
  • 06Hay recetas iniciales disponibles mediante create-puck-app.

Casos de uso

  • Permitir que personas que no desarrollan creen páginas de destino con un sistema de diseño existente.
  • Añadir un creador de páginas a un flujo de gestión de contenido con React o Next.js.
  • Crear herramientas internas para que los equipos de marketing editen diseños sin escribir código.

Inicio rápido

  1. 1

    Instala el paquete

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

    Renderiza el editor con el componente Puck y config

  3. 3

    Renderiza la página publicada con el componente Render

Antes de usarlo

  • Requiere un proyecto de React; es un componente de React, no una aplicación independiente.

Temas

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

Preguntas frecuentes

¿Qué es puck?
Editor visual modular, de código abierto y de arrastrar y soltar para React, que renderiza con tus propios componentes y datos. Puck es un editor visual para React.js que te permite crear páginas mediante la función de arrastrar y soltar, usando los componentes de tu propia aplicación. Se distribuye como un componente de React, por lo que puedes integrarlo en aplicaciones React existentes y funciona con entornos como Next.js.
¿puck es gratuito? ¿Qué licencia tiene?
puck es open source bajo la licencia MIT. Revisa los términos de la licencia antes de usarlo en productos comerciales.
¿puck sigue mantenido?
Mantenimiento activo. El último commit de puck fue el 16 oct 2026.
¿Para qué puedo usar puck?
Permitir que personas que no desarrollan creen páginas de destino con un sistema de diseño existente. Añadir un creador de páginas a un flujo de gestión de contenido con React o Next.js. Crear herramientas internas para que los equipos de marketing editen diseños sin escribir código.
¿Cómo se instala puck?
Instala el paquete: npm i @puckeditor/core --save Renderiza el editor con el componente Puck y config Renderiza la página publicada con el componente Render
¿Dónde consigo puck?
El código fuente y las instrucciones de instalación están en GitHub: https://github.com/puckeditor/puck

Resumen generado por IA a partir del README del proyecto. Las estadísticas de GitHub se actualizan a diario.

Proyectos relacionados