Plugins | GrapesJS (original) (raw)

Creating plugins in GrapesJS is pretty straightforward and here you'll get how to achieve it.

WARNING

This guide is referring to GrapesJS v0.21.2 or higher

• Basic plugin
• Plugins with options
• Usage with TS
• Boilerplate

# Basic plugin

Plugins are simple functions that are run when the editor is initialized.

This means plugins can be moved to separate folders to keep thing cleaner or imported from NPM.

# Plugins with options

It's also possible to pass custom parameters to plugins in to make them more flexible.

# Usage with TS

If you're using TypeScript, for a better type safety, we recommend using the usePlugin helper.

# Boilerplate

For fast plugin development, we highly recommend using grapesjs-cli (opens new window) which helps to avoid the hassle of setting up all the dependencies and configurations for development and building (no need to touch Webpack or Babel configurations). For more information check the repository.

Last Updated: 3/31/2025, 1:01:23 PM