GrapesJS User Blocks: Create and Save Your Own Components

GrapesJS User Blocks is a plugin that allows users to create and save their own custom components. This makes it easy to reuse frequently used code snippets, and to create reusable components that can be shared with others

DEMO

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

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

const editor = grapesjs.init({
  container: "#gjs",
  height: "100%",
  fromElement: true,
  storageManager: false,
  plugins: ["grapesjs-user-blocks"],
});

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

• Plugin name: grapesjs-user-blocks super simple user block generator for grapesjs. it allow developers to store there components in localStorage and also in blockManager to use letter.

• CDN
  • https://unpkg.com/grapesjs-user-blocks
• NPM
  • npm i grapesjs-user-blocks
• GIT
  • git clone https://github.com/gxnanshu/grapesjs-user-blocks.git

Directly in the browser

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

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

<script type="text/javascript">
  var editor = grapesjs.init({
    container: "#gjs",
    // ...
    plugins: ["grapesjs-user-blocks"],
  });
</script>

Modern javascript

import grapesjs from "grapesjs";
import plugin from "grapesjs-user-blocks";
import "grapesjs/dist/css/grapes.min.css";

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

Clone the repository

$ git clone https://github.com/gxnanshu/grapesjs-user-blocks.git
$ cd grapesjs-user-blocks

Install dependencies

$ npm i

Start the dev server

$ npm start

Build the source

$ npm run build