>GrapesJS User Blocks: Create and Save Your Own Components
Home logo
GrapesJS User Blocks: Create and Save Your Own Components

GrapesJS User Blocks: Create and Save Your Own Components

by Gx Anshu | Jul 16, 2023

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
Download Source Code