grapesjs-react

A React wrapper library for GrapesJS

Online Demo

📢 Project Maintenance Notice

I originally built this library in 2018 during my internship at Teko Vietnam, when GrapesJS was still new and didn’t yet have a React wrapper. To my surprise, it grew to over 200 stars on GitHub and helped developers around the world get their work done. Now that GrapesJS offers its own official React library, it feels like the right time to retire this project. Thank you all for your support!

You can visit Grapesjs's official library here: https://github.com/GrapesJS/react

Installation

npm i -S grapesjs grapesjs-react grapesjs-blocks-basic

or

yarn add grapesjs grapesjs-react grapesjs-blocks-basic

Usage

WebPage

You need to install the grapesjs-preset-webpage plugin

import 'grapesjs/dist/css/grapes.min.css';
import gjspresetwebpage from 'grapesjs-preset-webpage';
import gjsblockbasic from 'grapesjs-blocks-basic'

export const Primary = () => {
  return <GrapesjsReact
    id='grapesjs-react'
    plugins={[
      gjspresetwebpage,
      gjsblockbasic
    ]}
  />;
};

Newsletter

You need to install the grapesjs-preset-newsletter plugin

import 'grapesjs/dist/css/grapes.min.css';
import gjsblockbasic from 'grapesjs-blocks-basic'
import gjspresetnewsletter from 'grapesjs-preset-newsletter';

export const Newsletter = () => {
  return <GrapesjsReact
    id='grapesjs-react'
    plugins={[
      gjsblockbasic, 
      gjspresetnewsletter
    ]}
  />;
};

MJML

You need to install the grapesjs-mjml plugin

import 'grapesjs/dist/css/grapes.min.css';
import gjsblockbasic from 'grapesjs-blocks-basic'
import gjsmjml from 'grapesjs-mjml';

export const MJML = () => {
  return <GrapesjsReact
    id='grapesjs-react'
    plugins={[
      gjsblockbasic,
      gjsmjml
    ]}
  />;
};

Props detail

Editor's props extends the base GrapesJS editor options.

Name	Desc	Type
id	string	Editor container id
children	ReactNode[]	Children to init (using fromElement)
onInit	Function	Function will be called after editor was initialized
onDestroy	Function	Function will be called when editor unmounted

The rest props will be passed as options to initialize editor. You can use any options of grapesjs like plugins, blockManager, styleManager, storageManager, ...

Contribution

If you find a bug or need any help, please create an issue.

Pull requests are welcome.

©2021 thanhtunguet