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

Uploading grapesjsuserblocks-2023-07-16_23.29.18.gif…

DEMO

HTML

<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>

JS

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

CSS

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

Summary

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.

Download

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

Usage

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 */ }),
  // ],
});

Development

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