Explorar por categoría
GrapesJS Estilos
Los plugins del gestor de estilos de GrapesJS amplían la interfaz visual de estilos con propiedades CSS personalizadas, soporte para design tokens y controles avanzados de selectores. Estas extensiones te permiten añadir selectores de color, editores de espaciado, controles tipográficos y editores de CSS al panel de estilos de GrapesJS. Explora extensiones de estilo gratuitas y premium revisadas por la comunidad de desarrolladores de GrapesJS.
Sobre GrapesJS Estilos
El gestor de estilos de GrapesJS es el panel donde los usuarios aplican propiedades CSS a los componentes seleccionados: colores de fondo, tipografías, espaciado, bordes y maquetación. El gestor por defecto incluye un conjunto de campos CSS estándar agrupados en sectores. Los plugins de gestor de estilos en GJS.Market lo amplían con sectores personalizados, controles avanzados e integraciones con sistemas de diseño. Los plugins de sectores personalizados añaden grupos de propiedades pensados para un lenguaje de diseño concreto: un sector de Movimiento con controles de transición y animación, un sector de Grid con propiedades de CSS Grid o un sector de Tipografía con campos de interlineado, espaciado entre letras y variantes de fuente. Los plugins de design tokens conectan el gestor de estilos con una librería de tokens —tokens de Figma, salida de Style Dictionary o un archivo JSON propio— de modo que los campos de color y espaciado muestren tokens con nombre en lugar de códigos hexadecimales. Los plugins de editor CSS añaden una vista de código junto al gestor visual. Los plugins avanzados acotan los estilos a breakpoints de dispositivo, mostrando valores distintos para escritorio, tablet y móvil con un indicador claro del breakpoint activo.
GrapesJS Estilos — Preguntas frecuentes
- ¿Qué es el gestor de estilos de GrapesJS?
- Es el panel que escribe el CSS del componente seleccionado. Las propiedades se agrupan en sectores —tipografía, decoración, dimensión, flex— y cada campo se corresponde con una propiedad CSS. El gestor no aplica estilos en línea: escribe reglas en el CSS composer del editor, y por eso la salida sigue siendo una hoja de estilos real que puedes exportar.
- ¿Cómo añado una propiedad personalizada al gestor de estilos?
- Configura styleManager.sectors en la inicialización o llama a editor.StyleManager.addSector y addProperty en tiempo de ejecución. Cada propiedad declara un nombre, la propiedad CSS que escribe y un tipo: select, color, slider, composite o stack. Envuelve un conjunto de sectores en un plugin y tendrás un panel reutilizable adaptado a tu lenguaje de diseño.
- ¿Por qué mis cambios de estilo afectan a otros elementos?
- Porque el gestor de estilos actúa sobre la regla CSS seleccionada, no sobre el elemento. Si el componente tiene una clase, los cambios se aplican a esa clase y, por tanto, a todos los elementos que la comparten. Cambia el Selector Manager al estado de id propio del componente para estilar solo esa instancia: es, con diferencia, la principal fuente de confusión al aplicar estilos en GrapesJS.
- ¿Puedo tener estilos distintos por breakpoint?
- Sí. Los breakpoints del gestor de dispositivos y el gestor de estilos están conectados: al seleccionar Tablet o Móvil, las ediciones siguientes se escriben en la media query de ese dispositivo. El CSS exportado contiene media queries reales. Los plugins de esta categoría añaden un indicador más claro del breakpoint activo, lo que evita editar los estilos de escritorio por error.
- ¿Puede el gestor de estilos usar design tokens en vez de valores hexadecimales?
- De serie no, pero los plugins de esta categoría lo añaden. Vinculan los campos de color y espaciado a una fuente de tokens —tokens de Figma, salida de Style Dictionary o un JSON propio— de modo que el usuario elige un token con nombre y el CSS recibe la variable en lugar del valor bruto. Eso es lo que mantiene la salida del editor alineada con un sistema de diseño existente.