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 these steps
- Clone this repository
git clone https://github.com/artf/grapesjs-plugin-boilerplate.git YOUR-PLUGIN-NAME
- Replace in all files
YOUR-PLUGIN-NAME
with your plugin name - Update
package.json
- Install dependencies
npm i
and run the local servernpm start
- Start creating your plugin from
src/index.js
- Show some gif/demo if possible
- Update README
- When you're ready update the production file
npm run build
- Publish
- Plugin name:
YOUR-PLUGIN-NAME
- Components
new-component1
new-component2
- Blocks
new-block1
new-block1
...
Option | Description | Default |
---|---|---|
option1 |
Description option | default value |
- 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
<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>
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
BSD 3-Clause