GrapesJS Shadcn

grapesjs-shadcn es un preset moderno de GrapesJS construido con React, @grapesjs/React y shadcn/UI, diseñado para ofrecerte una experiencia de edición limpia, componible y amigable para desarrolladores desde el primer momento.

Se centra en una interfaz pulida, valores predeterminados sensatos y extensibilidad para flujos de trabajo avanzados de páginas, correo electrónico y documentos de construcción.

El preset viene con un editor GrapesJS completamente cableado y una capa de interfaz de usuario refinada construida con shadcn/ui y Tailwind CSS.

• Gestor de bloques

  • Hermoso panel moderno de bloques
  • Búsqueda incorporada para el descubrimiento rápido de bloques
  • Agrupación limpia y disposición escalable

• Gestor de capas

  • Gestor de capas completo
  • Jerarquía visual clara
  • Selección y reordenación fluidas

• Gestor de páginas

  • Crear, renombrar y duplicar páginas
  • Diseñado para flujos de trabajo de varias páginas

• Gestor de temas

  • Gestor de temas configurable

• Gestor de activos

  • Modal de activos con subidas de arrastre y solta
  • Previsualizaciones limpias y gestión intuitiva
  • Panel de activos con arrastrar y soltar al lienzo

• Administrador de dispositivos

  • Previsualizar contenido en dispositivos (escritorio, tableta, móvil)

• Comandos de la barra superior

  • Comandos comunes del editor expuestos mediante una barra superior limpia
  • Deshacer / rehacer, previsualizar, acciones de lienzo y más

• Gestor de Selectores

  • Gestión del selector CSS para seleccionar el estado y añadir clases

• Gestor de rasgos

  • Editar atributos y comportamientos de componentes

• Responsable de estilo

  • Controles de estilo intuitivo

• Símbolos

  • Componentes reutilizables que comparten estado y estilo

• Manchas de lienzo

• Ajusta rápidamente el relleno y el margen arrastrando los mangos visuales directamente sobre el lienzo
  • Controla la visibilidad por componente con showPaddingSpot propiedades y showMarginSpot 
• Redimensionamiento multicolumna más inteligente que redistribuye el ancho entre columnas vecinas, evitando "saltos" y manteniendo los diseños estables
  • Para obtener mejores resultados, aplica el arrastre de columnas y los anchos porcentuales por defecto.
• Insignias integradas y una barra superior con menús contextuales — todo implementado como componentes de React para facilitar el diseño y la personalización
  
  

• Editor de Texto Enriquecido por defecto (RTE)
• Editor de texto enriquecido con opiniones para reemplazar el predeterminado para la edición de texto mejorada
• Construido sobre Prosemirror con interfaz personalizada usando React 

• Fuentes de datos
• Creación de esquemas de datos
• Importación y gestión de datos 
• Variables dinámicas
• Integración lógica condicional en tiempo de ejecución
• Colecciones de tiempo de ejecución
  

• Construido sobre Tailwind CSS
• Personaliza fácilmente el espaciado, los colores, la tipografía y la disposición
• Ajusta los sistemas de diseño existentes con un esfuerzo mínimo
• Modo oscuro y claro