grapesjs/packages/cli/src/template

<%= name %>

Live Demo

Show a live example of your plugin

To make your plugin more engaging, create a simple live demo using online tools like JSFiddle, CodeSandbox, or CodePen. Include the demo link in your README. Adding a screenshot or GIF of the demo is a bonus.

Below, you'll find the necessary HTML, CSS, and JavaScript. Copy and paste this code into one of the tools mentioned. Once you're done, delete this section and update the link at the top with your demo.

HTML

<link href="https://unpkg.com/grapesjs/dist/css/grapes.min.css" rel="stylesheet" />
<script src="https://unpkg.com/grapesjs"></script>
<script src="https://unpkg.com/<%= rName %>"></script>

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

JS

const editor = grapesjs.init({
  container: '#gjs',
  height: '100%',
  fromElement: true,
  storageManager: false,
  plugins: ['<%= rName %>'],
});

CSS

body,
html {
  margin: 0;
  height: 100%;
}

Summary

• Plugin name: <%= rName %>
• Components
  • component-id-1
  • component-id-2
  • ...
• Blocks
  • block-id-1
  • block-id-2
  • ...

Options

Option	Description	Default
option1	Description option	default value

Download

• CDN
  • https://unpkg.com/<%= rName %>
• NPM
  • npm i <%= rName %>
• GIT
  • git clone https://github.com/<%= user %>/<%= rName %>.git

Usage

Directly in the browser

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

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

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

Modern javascript

import grapesjs from 'grapesjs';
import plugin from '<%= rName %>';
import 'grapesjs/dist/css/grapes.min.css';

const editor = grapesjs.init({
  container : '#gjs',
  // ...
  plugins: [plugin],
  pluginsOpts: {
    [plugin]: { /* options */ }
  }
  // or
  plugins: [
    editor => plugin(editor, { /* options */ }),
  ],
});

Development

Clone the repository

$ git clone https://github.com/<%= user %>/<%= rName %>.git
$ cd <%= rName %>

Install dependencies

npm i

Start the dev server

npm start

Build the source

npm run build

License

MIT