¿Te imaginás crear tu propio page builder visual sin quedar atado a un CMS específico? Con Puck, un editor visual open source para React, podés integrar una experiencia de edición drag-and-drop directamente en tu aplicación y decidir dónde y cómo guardar tus páginas. En este taller vamos a construir desde cero un page builder completo con React/Next.js y Puck, sumando componentes personalizados como headings, grids y cards, y llevando todo al siguiente nivel con Tailwind v4 para el estilo y la personalización dinámica.
- Qué es Puck y por qué no depende de un CMS
- Instalación de Puck en un proyecto React/Next.js
- Configuración inicial del editor y rutas de edición/publicación
- Creación y registro de componentes personalizados (Heading, Grid, Card)
- Uso de DropZone para anidar bloques dentro de otros
- Persistencia de páginas como JSON y renderizado dinámico
- Integración de Tailwind v4 en el proyecto
- Cómo aplicar estilos con utilidades de Tailwind en el editor
- Estrategias para manejar estilos dinámicos: inline, opciones fijas y safelisting
- Extensiones posibles: landing pages, micrositios, dashboards, PDF o form builders
