Browse by category
GrapesJS Styles
GrapesJS style manager plugins extend the visual styling interface with custom CSS properties, design token support, and advanced selector controls. These extensions let you add color pickers, spacing editors, typography controls, and custom CSS editors to the GrapesJS style panel. Browse free and premium styling extensions reviewed by the GrapesJS developer community.
About GrapesJS Styles
The GrapesJS style manager is the panel where users apply CSS properties to selected components — background colours, fonts, spacing, borders, and layout. The default style manager includes a set of standard CSS property fields grouped into sectors. GrapesJS style manager plugins on GJS.Market extend this with custom sectors, advanced controls, and design system integrations. Custom sector plugins add property groups tailored to a specific design language: a Motion sector with transition and animation controls, a Grid sector with CSS Grid layout properties, or a Typography sector with line-height, letter-spacing, and font-variant fields. Design token plugins connect the style manager to a design token library — Figma tokens, Style Dictionary output, or a custom JSON token file — so colour and spacing fields show named tokens instead of raw hex codes. CSS editor plugins add a raw CSS code view alongside the visual style manager. Advanced style manager plugins scope styles to device breakpoints, showing different property values for desktop, tablet, and mobile with a clear indicator of which breakpoint is active.
GrapesJS Styles — FAQ
- What is the GrapesJS style manager?
- It is the panel that writes CSS for the selected component. Properties are grouped into sectors — typography, decorations, dimension, flex — and each field maps to a CSS property. The manager does not set inline styles: it writes rules into the editor's CSS composer, which is why the output stays a real stylesheet you can export.
- How do I add a custom property to the style manager?
- Configure styleManager.sectors at init, or call editor.StyleManager.addSector and addProperty at runtime. Each property declares a name, the CSS property it writes and a type — select, color, slider, composite or stack. Wrap a set of sectors in a plugin and you have a reusable panel tailored to your design language.
- Why do my style changes affect other elements?
- Because the style manager targets the selected CSS rule, not the element. If the component has a class, edits apply to that class and therefore to every element sharing it. Switch the Selector Manager to the component's own id state to style just one instance — this is the single most common source of confusion in GrapesJS styling.
- Can I have different styles per device breakpoint?
- Yes. Device manager breakpoints and the style manager are connected: selecting Tablet or Mobile makes subsequent edits write into that device's media query. The exported CSS contains real media queries. Plugins in this category add a clearer indicator of which breakpoint is active, which prevents editing desktop styles by accident.
- Can the style manager use design tokens instead of hex values?
- Not by default, but plugins in this category add it. They bind colour and spacing fields to a token source — Figma tokens, Style Dictionary output or a custom JSON file — so users pick a named token and the CSS receives the variable rather than a raw value. That is what keeps editor output aligned with an existing design system.