{"_id":"@grapesjs/react","_rev":"6-e67fa32ef9098194c04808cbd7e1c029","name":"@grapesjs/react","dist-tags":{"rc":"2.0.0-rc.4","latest":"2.0.0"},"versions":{"0.1.0":{"name":"@grapesjs/react","version":"0.1.0","_id":"@grapesjs/react@0.1.0","maintainers":[{"name":"artf","email":"artur.catch@hotmail.it"}],"dist":{"shasum":"2d58b7b074c35858f6aa57298bce847483fa4b93","tarball":"https://registry.npmjs.org/@grapesjs/react/-/react-0.1.0.tgz","fileCount":25,"integrity":"sha512-djY+ntxVM06y+D6ZRL0zgMSadVOUElyExPuwsW85JoOgK21Ux+Ysk7F1x4PwrnYIxTqBfTiU1cI+KpnzjYF8+A==","signatures":[{"sig":"MEQCIDl0GKm3nxI2REjlpXJ3OCW/b68DEpEjgs2dcNUuMRGQAiB5qxwW0RTR7B4XD0TS5w5OeUQr3mALKrvFkxWA3x104w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":73780},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.js"}},"gitHead":"e0a6660eeb0ded9f2a4290aaf534d1b23cb66f21","scripts":{"dev":"tsc && vite build --watch","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc && vite build","preview":"vite preview","build-watch":"tsc && vite build --watch"},"_npmUser":{"name":"artf","email":"artur.catch@hotmail.it"},"_npmVersion":"9.3.1","directories":{},"_nodeVersion":"18.14.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^4.3.9","react":"^18.2.0","eslint":"^8.38.0","react-dom":"^18.2.0","typescript":"^5.0.2","@types/react":"^18.0.37","vite-plugin-dts":"^2.3.0","@types/react-dom":"^18.0.11","@vitejs/plugin-react":"^4.0.0","@typescript-eslint/parser":"^5.59.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.3.4","@typescript-eslint/eslint-plugin":"^5.59.0"},"_npmOperationalInternal":{"tmp":"tmp/react_0.1.0_1688478219558_0.8736617379644824","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@grapesjs/react","version":"1.0.0","license":"MIT","_id":"@grapesjs/react@1.0.0","maintainers":[{"name":"artf","email":"artur.catch@hotmail.it"}],"homepage":"https://github.com/GrapesJS/react#readme","bugs":{"url":"https://github.com/GrapesJS/react/issues"},"dist":{"shasum":"bfa938128db7b69ca1c23439b66decf4eaa0ca9a","tarball":"https://registry.npmjs.org/@grapesjs/react/-/react-1.0.0.tgz","fileCount":27,"integrity":"sha512-HHttzxwgvhbxQqqsiiQzb+OJtKFl8yWI9Yp3IgPgiKXqwY19lEJWSkCukvfqxugbYRxi0M1uERLAt209AmY5vQ==","signatures":[{"sig":"MEYCIQDl4edTiRfhmGeumlxzqrMvrNNUFBzwuni5XT+Lj10lFAIhALbocx4x90k+B7I3GWWg7VhXzzkl7oG5pG7cql+0SvGR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":79844},"main":"./dist/index.umd.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.umd.js"}},"gitHead":"d1746424a6b8126f3f6968dd3f05330c04e6a763","scripts":{"dev":"tsc && vite build --watch","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc && vite build","preview":"vite preview","build-watch":"tsc && vite build --watch"},"_npmUser":{"name":"artf","email":"artur.catch@hotmail.it"},"repository":{"url":"git+https://github.com/GrapesJS/react.git","type":"git"},"_npmVersion":"9.3.1","description":"","directories":{},"_nodeVersion":"18.14.0","_hasShrinkwrap":false,"devDependencies":{"vite":"^4.3.9","react":"^18.2.0","eslint":"^8.38.0","react-dom":"^18.2.0","typescript":"^5.0.2","@types/react":"^18.0.37","vite-plugin-dts":"^2.3.0","@types/react-dom":"^18.0.11","@vitejs/plugin-react":"^4.0.0","@typescript-eslint/parser":"^5.59.0","eslint-plugin-react-hooks":"^4.6.0","eslint-plugin-react-refresh":"^0.3.4","@typescript-eslint/eslint-plugin":"^5.59.0"},"_npmOperationalInternal":{"tmp":"tmp/react_1.0.0_1688552834635_0.7850666987833672","host":"s3://npm-registry-packages"}},"2.0.0-rc.4":{"name":"@grapesjs/react","version":"2.0.0-rc.4","license":"MIT","_id":"@grapesjs/react@2.0.0-rc.4","maintainers":[{"name":"artf","email":"artur.catch@hotmail.it"},{"name":"davidgrapes","email":"david@grapesjs.com"}],"homepage":"https://github.com/GrapesJS/react#readme","bugs":{"url":"https://github.com/GrapesJS/react/issues"},"dist":{"shasum":"d4952fbc4de3eefd4c6fdd0270adb81614f0f19a","tarball":"https://registry.npmjs.org/@grapesjs/react/-/react-2.0.0-rc.4.tgz","fileCount":27,"integrity":"sha512-qv4E9ucDxPBtBa4n5/S4Ced8vrXYxgizlJbhvnQgg4R3qeeiG3dCuCar8PH4SRFKM3Ul9ZZAySFGEYVCLwxQxg==","signatures":[{"sig":"MEUCIQCQTpzoO7BY+eTCVPd+IbhEApNu+BSMITcwVUu+ZFa/yQIgArRlPjCnv9cba9REyroo5H/mvTkmKiTTuPG9003S8FU=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":45951},"main":"./dist/index.cjs.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs.js"}},"gitHead":"c5ea71ceab785062bc6d66d4e26b821089728383","scripts":{"dev":"tsc && vite build --watch","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc && vite build","preview":"vite preview","build-watch":"tsc && vite build --watch"},"_npmUser":{"name":"artf","email":"artur.catch@hotmail.it"},"repository":{"url":"git+https://github.com/GrapesJS/react.git","type":"git"},"_npmVersion":"10.8.1","description":"","directories":{},"_nodeVersion":"22.4.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"publishConfig":{"registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","grapesjs":"^0.22.5","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_2.0.0-rc.4_1739525325495_0.9611480308638429","host":"s3://npm-registry-packages-npm-production"}},"2.0.0":{"name":"@grapesjs/react","version":"2.0.0","license":"MIT","_id":"@grapesjs/react@2.0.0","maintainers":[{"name":"artf","email":"artur.catch@hotmail.it"},{"name":"davidgrapes","email":"david@grapesjs.com"}],"homepage":"https://github.com/GrapesJS/react#readme","bugs":{"url":"https://github.com/GrapesJS/react/issues"},"dist":{"shasum":"d62963241d3db03abc5af0cc2ba523f6b9079cfa","tarball":"https://registry.npmjs.org/@grapesjs/react/-/react-2.0.0.tgz","fileCount":27,"integrity":"sha512-RpQhLqqr+6PjPB6bonQ4GgANfc9eoKyqa3SplLKPBoWX8OrzYUg62q5taTbyL7MTT+OzrmAHPOLyPGdqux9+Pg==","signatures":[{"sig":"MEUCIDLmhcesfYbwzyz8tcfV9tUwCA+Nm675kjj0Ujx0g821AiEAzIAapcRoHhG3Pa01KoYNLA6VNOoniRMSuKQkU2sMeSo=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":46135},"main":"./dist/index.cjs.js","types":"./dist/index.d.ts","module":"./dist/index.js","exports":{".":{"import":"./dist/index.js","require":"./dist/index.cjs.js"}},"gitHead":"a26371c41ed00af92e99d08a7205ff560b391c1d","scripts":{"dev":"tsc && vite build --watch","lint":"eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0","build":"tsc && vite build","preview":"vite preview","build-watch":"tsc && vite build --watch"},"_npmUser":{"name":"artf","email":"artur.catch@hotmail.it"},"repository":{"url":"git+https://github.com/GrapesJS/react.git","type":"git"},"_npmVersion":"10.8.1","description":"","directories":{},"_nodeVersion":"22.4.1","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0","@types/react":"^19.0.0","@types/react-dom":"^19.0.0"},"publishConfig":{"registry":"https://registry.npmjs.org"},"_hasShrinkwrap":false,"devDependencies":{},"peerDependencies":{"react":"^18.0.0 || ^19.0.0","grapesjs":"^0.22.5","react-dom":"^18.0.0 || ^19.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react_2.0.0_1740055749948_0.17804613314751983","host":"s3://npm-registry-packages-npm-production"}}},"time":{"created":"2023-07-04T13:43:39.455Z","modified":"2026-03-06T15:14:03.871Z","0.1.0":"2023-07-04T13:43:39.741Z","1.0.0":"2023-07-05T10:27:14.826Z","2.0.0-rc.4":"2025-02-14T09:28:45.666Z","2.0.0":"2025-02-20T12:49:10.168Z"},"bugs":{"url":"https://github.com/GrapesJS/react/issues"},"license":"MIT","homepage":"https://github.com/GrapesJS/react#readme","repository":{"url":"git+https://github.com/GrapesJS/react.git","type":"git"},"description":"","maintainers":[{"email":"artur.catch@hotmail.it","name":"artf"}],"readme":"# GrapesJS React\n\n\n\n> Requires GrapesJS v0.21.3 or higher\n\nThe official [GrapesJS](https://grapesjs.com) wrapper for React that allows you to build custom and declarative UI for your editor.\n\nThe goal of this library is not to provide UI components but simple wrappers around the core GrapesJS modules and let you define your own UI components and access easily the GrapesJS API.\n\n> **Warning**: This library is NOT intended to render your React components inside the GrapesJS canvas, here it's all about the custom UI around the canvas itself.\n\n## Installation\n\nThe core `grapesjs` library is not bundled with the wrapper itself so you have to install it separately.\n\n```sh\nnpm i grapesjs @grapesjs/react\n```\n\n## Compatibility\n\n#### @grapesjs/react v1.X\n\n- React v18.X\n- GrapesJS v0.21.3 or higher\n- NextJS v14.X\n\n#### @grapesjs/react v2.X\n\n- React v18.X or v19.X\n- GrapesJS v0.22.5 or higher\n- NextJS v15.X\n\n### Default UI\n\nThis is the simplest and more traditional way to use the wrapper with GrapesJS as it relies on the default UI provided by GrapesJS. This approach is less customizable from React perspective and all the UI customization has to be done via GrapesJS (basically how you would do without the wrapper).\n\n```ts\nimport grapesjs, { Editor } from 'grapesjs';\nimport GjsEditor from '@grapesjs/react';\n\nexport default function DefaultEditor() {\n const onEditor = (editor: Editor) => {\n console.log('Editor loaded', { editor });\n };\n\n return (\n \n );\n}\n```\n\n[Live Example](https://stackblitz.com/edit/grapesjs-react-default-ui)\n\n### Custom UI\n\nThis is the more powerful and declarative way to use the wrapper as it gives you full control over the UI of your editor. Using the `` component inside the main wrapper will disable the core default UI.\n\n```ts\nimport grapesjs, { Editor } from 'grapesjs';\nimport GjsEditor, { Canvas } from '@grapesjs/react';\n\nexport default function CustomEditor() {\n const onEditor = (editor: Editor) => {\n console.log('Editor loaded', { editor });\n };\n\n return (\n \n
\n // ... use your UI components\n // place the GrapesJS canvas where you wish\n // ...\n
\n \n );\n}\n```\n\nHere below you can find a good example (with the usage of all available providers) of how you would build a full custom editor around GrapesJS by using your own React components.\n\n> **Note**: The app doesn't cover all the [GrapesJS API](https://grapesjs.com/docs/api/) but simply provides a good starting point to understand how to create your own custom editor.\n\n[Live Example](https://stackblitz.com/edit/grapesjs-react-custom-ui)\n\n### Get the editor in your components\n\nYou can easily access the editor instance in your custom components by using the `useEditor` hook. One only caveat is to use it once the editor is actually created and for this use case, you can rely on the `` component as a wrapper. Alternatively, you can use `useEditorMaybe` hook and check by yourself if the editor exists.\n\n```ts\nimport GjsEditor, { WithEditor, useEditor, useEditorMaybe } from '@grapesjs/react';\n\nfunction MyComponentWithUseEditor() {\n // The `editor` is always defined.\n const editor = useEditor();\n return (...);\n}\n\nfunction MyComponentWithUseEditorMaybe() {\n // The `editor` is not immediately available\n const editor = useEditorMaybe();\n return (\n
\n );\n}\n\nexport default function CustomEditor() {\n return (\n \n // ...\n \n // This component won't be rendered until the editor is created\n \n \n \n \n );\n}\n```\n\n> By using components inside the built-in providers, the `editor` is always defined.\n\n## Development\n\nClone the repository\n\n```sh\n$ git clone https://github.com/GrapesJS/react.git\n$ cd react\n```\n\nInstall it\n\n```sh\n$ yarn i\n```\n\nStart the dev server\n\n```sh\n$ yarn start\n```\n\n## License\n\nMIT\n","readmeFilename":"README.md"}