grapesjs/docs/modules/Style-manager.md

title
Style Manager

Style Manager

::: danger TODO Hero image

:::

The Style Manager module is responsible to show and update style properties on your Components. In this guide, you will see how to setup and take full advantage of the built-in Style Manager UI in GrapesJS. The default UI is a lightweight component with built-in properties, but as you'll see next in this guide, it's easy to extend with your own elements or even create the Style Manager UI from scratch by using the Style Manager API.

::: warning To get a better understanding of the content in this guide, we recommend reading Components first ::: ::: warning This guide is referring to GrapesJS v0.17.30 or higher :::

toc

Configuration

To change the default configurations you have to pass the styleManager property with the main configuration object.

const editor = grapesjs.init({
  ...
  styleManager: {
    sectors: [...],
    ...
  }
});

Check the full list of available options here: Style Manager Config

Initialization

Built-in properties

Programmatic usage

Customization

Events

Here you can find all the available built-in properties that you can use inside Style Manager via buildProps:

float, position, text-align, display, font-family, font-weight, border, border-style, border-color, border-width, box-shadow, background-repeat, background-position, background-attachment, background-size, transition, transition-duration, transition-property, transition-timing-function, top, right, bottom, left, margin, margin-top, margin-right, margin-bottom, margin-left, padding, padding-top, padding-right, padding-bottom, padding-left, width, height, min-width, min-height, max-width, max-height, font-size, letter-spacing, line-height, text-shadow, border-radius, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius, perspective, transform, transform-rotate-x, transform-rotate-y, transform-rotate-z, transform-scale-x, transform-scale-y, transform-scale-z, color, background-color, background, background-image, cursor, flex-direction, flex-wrap, justify-content, align-items, align-content, order, flex-basis, flex-grow, flex-shrink, align-self, overflow, overflow-x, overflow-y

Example usage:

...
  styleManager : {
    sectors: [{
      name: 'Dimension',
      buildProps: ['width', 'min-height']
    },{
      name: 'Extra',
      buildProps: ['background-color', 'box-shadow']
    }]
  }
...