API Selector Manager

Artur Arseniev edited this page Aug 30, 2016 · 1 revision


Selectors in GrapesJS are used in CSS Composer inside Rules and in Components as classes. To get better this concept let's take a look at this code:

span > #send-btn.btn{
  <button id="send-btn" class="btn"></button>

In this scenario we get: span -> selector of type tag send-btn -> selector of type id btn -> selector of type class

So, for example, being btn the same class entity it'll be easier to refactor and track things.

Before using methods you should get first the module from the editor instance, in this way:

var selectorManager = editor.SelectorManager;


  • config Object Configurations
    • config.selectors Array.<Object>= Default selectors (optional, default [])
    • config.states Array.<Object>= Default states (optional, default [])
    • config.label String= Classes label (optional, default 'Classes')
    • config.statesLabel String= The empty state label (optional, default '-State-')


 selectors: [
 states: [{
   name: 'hover', label: 'Hover'
   name: 'active', label: 'Click'
 statesLabel: '- Selecte State -',

Returns this


Add the new selector to collection if it's not already exists. Class type is a default one


  • name String Selector name
  • opts Object Selector options
    • opts.label String= Label for the selector, if it's not provided the label will be the same as the name (optional, default '')
    • opts.type String= Type of the selector. At the moment, only 'class' is available (optional, default 'class')


var selector = selectorManager.add('selectorName');
// Same as
var selector = selectorManager.add('selectorName', {
  type: 'class',
  label: 'selectorName'

Returns Model


Get the selector by its name



var selector = selectorManager.get('selectorName');

Returns (Model|null)


Get all selectors

Returns Collection