# BlockManager

You can customize the initial state of the module from the editor initialization, by passing the following Configuration Object (opens new window)

const editor = grapesjs.init({
 blockManager: {
   // options

Once the editor is instantiated you can use its API. Before using these methods you should get the module from the instance

const blockManager = editor.BlockManager;

# getConfig

Get configuration object

Returns Object (opens new window)

# onLoad

Load default blocks if the collection is empty

# add

Add new block to the collection.

# Parameters

# Examples

blockManager.add('h1-block', {
  label: 'Heading',
  content: '<h1>Put your title here</h1>',
  category: 'Basic',
  attributes: {
    title: 'Insert h1 block'

Returns Block Added block

# get

Return the block by id

# Parameters

# Examples

const block = blockManager.get('h1-block');
// {label: 'Heading', content: '<h1>Put your ...', ...}

Returns Block

# getAll

Return all blocks

# Examples

const blocks = blockManager.getAll();
// [{label: 'Heading', content: '<h1>Put your ...'}, ...]

Returns Collection

# getAllVisible

Return the visible collection, which containes blocks actually rendered

Returns Collection

# remove

Remove a block by id

# Parameters

# Examples

// Id of the block which need to be removed
const id = 'button';

Returns Block Removed block

# getCategories

Get all available categories. It's possible to add categories only within blocks via 'add()' method

Returns (Array (opens new window) | Collection)

# getContainer

Return the Blocks container element

Returns HTMLElement (opens new window)

# render

Render blocks

# Parameters

# Examples

// Render all blocks (inside the global collection)

// Render new set of blocks
const blocks = blockManager.getAll();
const filtered = blocks.filter(block => block.get('category') == 'sections')

// Or a new set from an array
 {label: 'Label text', content: '<div>Content</div>'}

// Back to blocks from the global collection

// You can also render your blocks outside of the main block container
const newBlocksEl = blockManager.render(filtered, { external: true });

Returns HTMLElement (opens new window) Rendered element