{"id":22341414,"url":"https://github.com/thanhtunguet/grapesjs-react","last_synced_at":"2025-05-15T12:02:55.119Z","repository":{"id":53637471,"uuid":"172174151","full_name":"thanhtunguet/grapesjs-react","owner":"thanhtunguet","description":"A React wrapper for GrapesJS library","archived":false,"fork":false,"pushed_at":"2025-02-07T04:13:46.000Z","size":30528,"stargazers_count":197,"open_issues_count":7,"forks_count":57,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-05-10T12:48:38.935Z","etag":null,"topics":["grapesjs","javascript","library","react"],"latest_commit_sha":null,"homepage":"https://thanhtunguet.github.io/grapesjs-react","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thanhtunguet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":null,"patreon":"thanhtunguet","open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2019-02-23T05:12:58.000Z","updated_at":"2025-02-07T04:13:43.000Z","dependencies_parsed_at":"2023-11-19T06:29:36.303Z","dependency_job_id":"ba358752-889c-42ce-b5bb-13f583feab3f","html_url":"https://github.com/thanhtunguet/grapesjs-react","commit_stats":{"total_commits":76,"total_committers":9,"mean_commits":8.444444444444445,"dds":0.5,"last_synced_commit":"39d4f965afde64e77fc87c00181903663c66e635"},"previous_names":[],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhtunguet%2Fgrapesjs-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhtunguet%2Fgrapesjs-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhtunguet%2Fgrapesjs-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thanhtunguet%2Fgrapesjs-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thanhtunguet","download_url":"https://codeload.github.com/thanhtunguet/grapesjs-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254337612,"owners_count":22054253,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["grapesjs","javascript","library","react"],"created_at":"2024-12-04T08:06:50.203Z","updated_at":"2025-05-15T12:02:55.111Z","avatar_url":"https://github.com/thanhtunguet.png","language":"JavaScript","funding_links":["https://patreon.com/thanhtunguet"],"categories":[],"sub_categories":[],"readme":"grapesjs-react\n==============\n_A React wrapper library for [GrapesJS](https://grapesjs.com)_\n\n[Online Demo](https://thanhtunguet.github.io/grapesjs-react)\n\n## 📢 Project Maintenance Notice\n\nAs of [May 2025], I am no longer working as a web developer and am unable to actively maintain this project.\n\nWhile 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.\n\nIf you have questions or need help, feel free to reach out to me via email: sample@example.com.\n\nThanks to everyone who has used and contributed to this library!\n\n## Installation\n\n```shell\nnpm i -S grapesjs grapesjs-react grapesjs-blocks-basic\n```\n\nor\n\n```shell\nyarn add grapesjs grapesjs-react grapesjs-blocks-basic\n```\n\n## Usage\n\n#### WebPage\n\nYou need to install the [grapesjs-preset-webpage](https://www.npmjs.com/package/grapesjs-preset-webpage) plugin\n\n```tsx\nimport 'grapesjs/dist/css/grapes.min.css';\nimport gjspresetwebpage from 'grapesjs-preset-webpage';\nimport gjsblockbasic from 'grapesjs-blocks-basic'\n\nexport const Primary = () =\u003e {\n  return \u003cGrapesjsReact\n    id='grapesjs-react'\n    plugins={[\n      gjspresetwebpage,\n      gjsblockbasic\n    ]}\n  /\u003e;\n};\n```\n\n#### Newsletter\n\nYou need to install the [grapesjs-preset-newsletter](https://www.npmjs.com/package/grapesjs-preset-newsletter) plugin\n\n```tsx\nimport 'grapesjs/dist/css/grapes.min.css';\nimport gjsblockbasic from 'grapesjs-blocks-basic'\nimport gjspresetnewsletter from 'grapesjs-preset-newsletter';\n\nexport const Newsletter = () =\u003e {\n  return \u003cGrapesjsReact\n    id='grapesjs-react'\n    plugins={[\n      gjsblockbasic, \n      gjspresetnewsletter\n    ]}\n  /\u003e;\n};\n```\n\n#### MJML\n\nYou need to install the [grapesjs-mjml](https://www.npmjs.com/package/grapesjs-mjml) plugin\n\n```tsx\nimport 'grapesjs/dist/css/grapes.min.css';\nimport gjsblockbasic from 'grapesjs-blocks-basic'\nimport gjsmjml from 'grapesjs-mjml';\n\nexport const MJML = () =\u003e {\n  return \u003cGrapesjsReact\n    id='grapesjs-react'\n    plugins={[\n      gjsblockbasic,\n      gjsmjml\n    ]}\n  /\u003e;\n};\n```\n\n## Props detail\n\nEditor's props extends the base GrapesJS editor options.\n\n| Name | Desc | Type |\n| -- | -- | -- |\n| id | string | Editor container id |\n| children | ReactNode[] | Children to init (using fromElement) |\n| onInit | Function\u003cEditor\u003e | Function will be called after editor was initialized |\n| onDestroy | Function\u003cvoid\u003e | Function will be called when editor unmounted |\n\nThe rest props will be passed as options to initialize editor. You can use any options of grapesjs like *plugins*, *blockManager*, *styleManager*, *storageManager*, ...\n\n## Contribution\n\nIf you find a bug or need any help, please create an issue.\n\nPull requests are welcome.\n\n\u0026copy;2021 [thanhtunguet](https://thanhtunguet.github.io)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthanhtunguet%2Fgrapesjs-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthanhtunguet%2Fgrapesjs-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthanhtunguet%2Fgrapesjs-react/lists"}