Enviar a producción más rápido: Novedades en GrapesJS Shadcn

¡Supercarga tu creador de páginas! GrapesJS Shadcn añade previsualizaciones de arrastre en vivo, texto enriquecido / comandos, datos dinámicos y presets de lienzo para enviar y producir más rápido.

Blocomposer
Blocomposer
11 de junio de 2026hace 2 meses
5 lectura mínimaVistas de 1,370
Crear un creador de páginas visual puede engañarte para que pases semanas usando pixeles en la interfaz del editor en vez de refinar tu producto principal. GrapesJS se encarga del trabajo pesado desde el principio, y nuestro envoltorio GrapesJS Shadcn ofrece ese aspecto pulido y profesional desde el primer momento.
Nuestra última versión se centra completamente en eliminar fricciones en el desarrollo, pulir la experiencia del usuario y dotar al editor de potentes funciones basadas en datos. Aquí tienes un desglose de las novedades.

Construido para la velocidad de producción

Hemos implementado diversas correcciones de errores y mejoras en la interfaz y la experiencia de usuario en todo el espacio de trabajo para garantizar un flujo de trabajo fluido.

Esta versión se centra con un objetivo principal: llevar a los usuarios a la producción rápidamente. En lugar de dejarte con una hoja en blanco, hemos incorporado preajustes sensatos y patrones de diseño de interfaz que hemos visto mejorar la experiencia de usuario real tras años construyendo editores basados en plantillas.

Fórmulas inteligentes de edición de texto y matemáticas

El Editor de Texto Enriquecido (RTE) recibió dos grandes mejoras de funcionalidad:

Integración con KaTeX: 

Ahora puedes renderizar y editar fórmulas matemáticas complejas directamente en el lienzo usando la sintaxis KaTeX.

Katex formulasComando de Inserción de Variable: 

Escribir / dentro del editor de texto abre un menú de comandos, que te permite insertar rápidamente variables dinámicas desde fuentes de datos conectadas.

Text variable

Fuentes de datos dinámicas y correcciones de selector

Conectar el diseño con los datos es ahora mucho más robusto:

  • Estabilidad del selector: Hemos solucionado problemas heredados relacionados con el cambio de nombre de los selectores CSS, asegurando que tu sistema de diseño no se estropee durante los cambios de diseño.

  • Propiedades de los datos: Los rasgos y estilos ahora pueden conectarse directamente con los valores de la fuente de datos. Puedes mapear atributos de componentes (como una URL de imagen o alineación de texto) dinámicamente basándote en el conjunto de datos activo.
    Data bound properties

Arrastre de componentes y bloques personalizados

Reestructuramos completamente cómo interactúan los bloques con el lienzo:

  • Impagos sensatos: Los nuevos bloques personalizados por defecto vienen equipados con estados vacíos predecibles, rasgos preconfigurados y las propiedades de estilo más relevantes.

  • Avances visuales de arrastre: No más arrastrarse a ciegas. Al arrastrar un componente desde el panel lateral al lienzo, verás una vista previa en vivo del elemento exactamente donde va a aterrizar.

Tablas avanzadas, tablas y selecciones personalizadas

Para mostrar las capacidades más profundas de nuestro framework, hemos introducido dos componentes principales construidos sobre spots y rasgos personalizados de lienzo:


El componente de la lista: 

Gráfica visualmente los datos directamente en el diseño de la página.

Charts

El componente de la tabla: 

Construye filas y columnas estructuradas sin esfuerzo.

Table component

  • Selecciona opciones Interfaz de rasgos: Hemos lanzado una interfaz de rasgos personalizada y elegante específicamente para configurar ciertas opciones, haciendo que largas listas de propiedades desplegables sean fáciles de gestionar.

Construcción ultrarrápida con manchas de lona

Queremos minimizar las acciones repetitivas de arrastrar y soltar. Esta actualización introduce espacios contextuales en lienzo que te permiten hacer clic para añadir componentes al instante antes o después de un elemento seleccionado.

Además, hemos optimizado Columns: cuando la disposición de columnas está vacía, puedes añadir componentes hijos dentro con un solo clic, sin necesidad de arrastrar. Los componentes redimensionables también muestran ahora dimensiones exactas en tiempo real a medida que los escalas, dándote una conciencia espacial inmediata.

Canvas spots

Pulido visual y mejores iconos

Finalmente, revisamos la interfaz para estandarizar y mejorar los recursos de iconos. El diseño se ve más nítido, las acciones resultan más intuitivas y la retroalimentación visual general encaja perfectamente con las expectativas de la interfaz moderna.

¿Listo para probarlo? Consigue la última versión aquí

11 de junio de 2026 publicado
17 de agosto de 2026 actualizado
🔌 GJS.Market

¿Buscas plugins para GrapesJS?

Más de 100 plugins, presets y plantillas seleccionados — seleccionados cuidadosamente para la calidad y mantenidos por la comunidad.

Comparte esta publicaciónTwitterFacebookLinkedIn
Publicado a través de
Blocomposer
Blocomposer
Visita la tienda →

Más de Blocomposer

Descubre otras publicaciones interesantes y mantente al día con el contenido más reciente.

Ver todas las publicaciones

Plugins premium de Blocomposer

Añadidos pagados seleccionados a mano por este creador.

Visita la tienda →