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.