https://github.com/thanhtunguet/grapesjs-react
A React wrapper for GrapesJS library
https://github.com/thanhtunguet/grapesjs-react
grapesjs javascript library react
Last synced: 2 months ago
JSON representation
A React wrapper for GrapesJS library
- Host: GitHub
- URL: https://github.com/thanhtunguet/grapesjs-react
- Owner: thanhtunguet
- Created: 2019-02-23T05:12:58.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2025-02-07T04:13:46.000Z (5 months ago)
- Last Synced: 2025-05-10T12:48:38.935Z (2 months ago)
- Topics: grapesjs, javascript, library, react
- Language: JavaScript
- Homepage: https://thanhtunguet.github.io/grapesjs-react
- Size: 29.1 MB
- Stars: 197
- Watchers: 8
- Forks: 57
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
grapesjs-react
==============
_A React wrapper library for [GrapesJS](https://grapesjs.com)_
[Online Demo](https://thanhtunguet.github.io/grapesjs-react)
## 📢 Project Maintenance Notice
As of [May 2025], I am no longer working as a web developer and am unable to actively maintain this project.
While I may not have time to implement new features or fixes myself, I truly appreciate any pull requests from the community. I’ll do my best to review them when possible.
If you have questions or need help, feel free to reach out to me via email: [email protected].
Thanks to everyone who has used and contributed to this library!
## Installation
```shell
npm i -S grapesjs grapesjs-react grapesjs-blocks-basic
```
or
```shell
yarn add grapesjs grapesjs-react grapesjs-blocks-basic
```
## Usage
#### WebPage
You need to install the [grapesjs-preset-webpage](https://www.npmjs.com/package/grapesjs-preset-webpage) plugin
```tsx
import 'grapesjs/dist/css/grapes.min.css';
import gjspresetwebpage from 'grapesjs-preset-webpage';
import gjsblockbasic from 'grapesjs-blocks-basic'
export const Primary = () => {
return ;
};
```
#### Newsletter
You need to install the [grapesjs-preset-newsletter](https://www.npmjs.com/package/grapesjs-preset-newsletter) plugin
```tsx
import 'grapesjs/dist/css/grapes.min.css';
import gjsblockbasic from 'grapesjs-blocks-basic'
import gjspresetnewsletter from 'grapesjs-preset-newsletter';
export const Newsletter = () => {
return ;
};
```
#### MJML
You need to install the [grapesjs-mjml](https://www.npmjs.com/package/grapesjs-mjml) plugin
```tsx
import 'grapesjs/dist/css/grapes.min.css';
import gjsblockbasic from 'grapesjs-blocks-basic'
import gjsmjml from 'grapesjs-mjml';
export const MJML = () => {
return ;
};
```
## 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](https://thanhtunguet.github.io)