GrapesJS Plugin Boilerplate

This boilerplate helps you quickly start a production ready plugin for GrapesJS. If you don't know from where to start, check this guide Creating plugins. Sections below are also used as boilerplate for your README, follow steps

Usage

1. Clone this repository git clone https://github.com/artf/grapesjs-plugin-boilerplate.git
2. Replace in all files YOUR-PLUGIN-NAME with your plugin name
3. Update package.json
4. Install dependencies npm i and run the local server npm start
5. Start creating your plugin from src/index.js
6. Show some gif/demo if possible
7. Update README
8. When you're ready update the production file npm run build
9. Publish

Summary

• Plugin name: YOUR-PLUGIN-NAME
• Components
  • new-component1
  • new-component2
• Blocks
  • new-block1
  • new-block1 ...

Options

| Option | Description | Default | | --------- | ------------------ | --------------- | | option1 | Description option | default value |

Download

• CDN
  • https://unpkg.com/YOUR-PLUGIN-NAME
• NPM
  • npm i YOUR-PLUGIN-NAME
• GIT
  • git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git

Usage

<link
  href="https://unpkg.com/grapesjs/dist/css/grapes.min.css"
  rel="stylesheet"
/>
<script src="https://unpkg.com/grapesjs"></script>
<script src="path/to/YOUR-PLUGIN-NAME.min.js"></script>

<div id="gjs"></div>

<script type="text/javascript">
  var editor = grapesjs.init({
      container : '#gjs',
      ...
      plugins: ['YOUR-PLUGIN-NAME'],
      pluginsOpts: {
        'YOUR-PLUGIN-NAME': {
          // options
        }
      }
  });
</script>

Development

Clone the repository

$ git clone https://github.com/YOUR-NAME/YOUR-PLUGIN-NAME.git
$ cd YOUR-PLUGIN-NAME

Install dependencies

$ npm i

The plugin relies on GrapesJS via peerDependencies so you have to install it manually (without adding it to package.json)

$ npm i grapesjs --no-save

Start the dev server

$ npm start