{"owner":"GrapesJS","repo":"grapesjs","hasSkills":true,"totalSkillsCount":9,"totalTokensCount":6123,"categories":["plugin-manifest","anthropic-skill"],"hasMcp":false,"mcpConfig":null,"found":["packages/core/README.md","packages/cli/tsconfig.json","packages/cli/package.json","packages/cli/README.md","packages/core/tsconfig.json","packages/core/package.json","packages/cli/src/template/package.json","packages/cli/src/template/tsconfig.json","packages/cli/src/template/README.md"],"skills":{"packages/core/README.md":"# [GrapesJS](http://grapesjs.com)\n\n[](https://github.com/GrapesJS/grapesjs/actions)\n[](https://discord.gg/QAbgGXq)\n[](https://cdnjs.com/libraries/grapesjs)\n[](https://www.npmjs.com/package/grapesjs)\n\n> If you looking to embed the [Studio](https://app.grapesjs.com/studio) editor in your application, we now offer the [Studio SDK](https://app.grapesjs.com/dashboard/sdk/licenses?ref=repo-readme), a ready-to-use visual builder that's easy to embed in external applications, with GrapesJS team support included.\n\n
\n\nGrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a [CMS] to speed up the creation of dynamic templates. To better understand this concept check the image below\n\n \n
\n \n\nGenerally any 'template system', that you'd find in various applications like CMS, is composed by the **structure** (HTML), **style** (CSS) and **variables**, which are then replaced with other templates and contents on server-side and rendered on client.\n\nThis demos show examples of what is possible to achieve: \nWebpage Demo - http://grapesjs.com/demo.html \nNewsletter Demo - http://grapesjs.com/demo-newsletter-editor.html \n\n## Table of contents\n\n- [Features](#features)\n- [Download](#download)\n- [Usage](#usage)\n- [Development](#development)\n- [Documentation](#documentation)\n- [API](#api)\n- [Testing](#testing)\n- [Plugins](#plugins)\n- [Support](#support)\n- [Changelog](https://github.com/GrapesJS/grapesjs/releases)\n- [Contributing](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md)\n- [License](#license)\n\n## Features\n\n| Blocks | Style Manager | Layer Manager |\n| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| | | |\n\n| Code Viewer | Asset Manager |\n| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| | |\n\n- Local and remote storage\n\n- Default built-in commands (basically for creating and managing different components)\n\n## Download\n\n- CDNs\n - UNPKG (resolves to the latest version)\n - `https://unpkg.com/grapesjs`\n - `https://unpkg.com/grapesjs/dist/css/grapes.min.css`\n - CDNJS (replace `X.X.X` with the current version)\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js`\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css`\n- NPM\n - `npm i grapesjs`\n- GIT\n - `git clone https://github.com/GrapesJS/grapesjs.git`\n\nFor the development purpose you should follow instructions below.\n\n## Usage\n\n```html\n\n\n\n\n\n\n```\n\nFor a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html\n\n## Development\n\nFollow the [Contributing Guide](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md).\n\n## Documentation\n\nCheck the getting started guide here: [Documentation]\n\n## API\n\nAPI References could be found here: [API-Reference]\n\n## Testing\n\n```sh\n$ pnpm test\n```\n\n## Plugins\n\n[Official Plugins](https://github.com/orgs/GrapesJS/repositories?q=-repo%3Agrapesjs%2Fgrapesjs&type=source) | [Community Plugins](https://github.com/topics/grapesjs-plugin)\n\n### Wrappers\n\n- [@grapesjs/react](https://github.com/GrapesJS/react) - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.\n\n### Extensions\n\n- [@grapesjs/webmcp](https://github.com/GrapesJS/grapesjs/tree/dev/packages/webmcp) - Expose the editor API as WebMCP tools for browser AI agents\n- [grapesjs-plugin-export](https://github.com/GrapesJS/export) - Export GrapesJS templates in a zip archive\n- [grapesjs-plugin-filestack](https://github.com/GrapesJS/filestack) - Add Filestack uploader in Asset Manager\n- [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor) - Replaces the built-in RTE with CKEditor\n- [grapesjs-tui-image-editor](https://github.com/GrapesJS/tui-image-editor) - GrapesJS TOAST UI Image Editor\n- [grapesjs-blocks-basic](https://github.com/GrapesJS/blocks-basic) - Basic set of blocks\n- [grapesjs-plugin-forms](https://github.com/GrapesJS/components-forms) - Set of form components and blocks\n- [grapesjs-navbar](https://github.com/GrapesJS/components-navbar) - Simple navbar component\n- [grapesjs-component-countdown](https://github.com/GrapesJS/components-countdown) - Simple countdown component\n- [grapesjs-style-gradient](https://github.com/GrapesJS/style-gradient) - Add `gradient` type input to the Style Manager\n- [grapesjs-style-filter](https://github.com/GrapesJS/style-filter) - Add `filter` type input to the Style Manager\n- [grapesjs-style-bg](https://github.com/GrapesJS/style-bg) - Full-stack background style property type, with the possibility to add images, colors, and gradients\n- [grapesjs-blocks-flexbox](https://github.com/GrapesJS/blocks-flexbox) - Add the flexbox block\n- [grapesjs-lory-slider](https://github.com/GrapesJS/components-lory) - Slider component by using [lory](https://github.com/meandmax/lory)\n- [grapesjs-tabs](https://github.com/GrapesJS/components-tabs) - Simple tabs component\n- [grapesjs-tooltip](https://github.com/GrapesJS/components-tooltip) - Simple, CSS only, tooltip component for GrapesJS\n- [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) - Embed custom code\n- [grapesjs-touch](https://github.com/GrapesJS/touch) - Enable touch support\n- [grapesjs-indexeddb](https://github.com/GrapesJS/storage-indexeddb) - Storage wrapper for IndexedDB\n- [grapesjs-firestore](https://github.com/GrapesJS/storage-firestore) - Storage wrapper for [Cloud Firestore](https://firebase.google.com/docs/firestore)\n- [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Custom CSS parser for GrapesJS by using [PostCSS](https://github.com/postcss/postcss)\n- [grapesjs-typed](https://github.com/GrapesJS/components-typed) - Typed component made by wrapping Typed.js library\n- [grapesjs-ui-suggest-classes](https://github.com/silexlabs/grapesjs-ui-suggest-classes) - Enable auto-complete of classes in the SelectorManager UI\n- [grapesjs-fonts](https://github.com/silexlabs/grapesjs-fonts) - Custom Fonts plugin, adds a UI to manage fonts in websites\n- [grapesjs-symbols](https://github.com/silexlabs/grapesjs-symbols) - Symbols plugin to reuse elements in a website and accross pages\n- [grapesjs-click](https://github.com/bgrand-ch/grapesjs-click) - Grab and drop blocks and components with click (no more drag-and-drop)\n- [grapesjs-float](https://github.com/bgrand-ch/grapesjs-float) - Anchor a floating element next to another element (selected component, ...)\n\n### Presets\n\n- [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - Webpage Builder\n- [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - Newsletter Builder\n- [grapesjs-mjml](https://github.com/GrapesJS/mjml) - Newsletter Builder with MJML components\n\nFind out more about plugins here: [Creating plugins](https://grapesjs.com/docs/modules/Plugins.html)\n\n## Support\n\nIf you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via [Open Collective](https://opencollective.com/grapesjs)\n\n[](https://paypal.me/grapesjs)\n[](https://commerce.coinbase.com/checkout/fc90b940-558d-408b-a166-28a823c98173)\n\n\n\n\n \n\n[](https://www.browserstack.com) \nThanks to [BrowserStack](https://www.browserstack.com) for providing us browser testing services\n\n## License\n\nBSD 3-clause\n\n[Documentation]: https://grapesjs.com/docs/\n[API-Reference]: https://grapesjs.com/docs/api/\n[CMS]: https://en.wikipedia.org/wiki/Content_management_system\n","packages/cli/tsconfig.json":"{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"noImplicitThis\": true,\n \"moduleResolution\": \"node\",\n \"noUnusedLocals\": true,\n \"allowUnreachableCode\": false,\n \"module\": \"commonjs\",\n \"target\": \"es2016\",\n \"outDir\": \"dist\",\n \"esModuleInterop\": true,\n \"declaration\": true,\n \"noImplicitReturns\": false,\n \"noImplicitAny\": false,\n \"strictNullChecks\": false,\n \"resolveJsonModule\": true,\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true\n },\n \"include\": [\"src/cli.ts\"]\n}\n","packages/cli/package.json":"{\n \"name\": \"grapesjs-cli\",\n \"version\": \"4.1.3\",\n \"description\": \"GrapesJS CLI tool for the plugin development\",\n \"bin\": {\n \"grapesjs-cli\": \"dist/cli.js\"\n },\n \"files\": [\n \"dist\"\n ],\n \"scripts\": {\n \"build\": \"cross-env BUILD_MODE=production webpack --config ./webpack.cli.ts\",\n \"build:watch\": \"webpack --config ./webpack.cli.ts --watch\",\n \"lint\": \"eslint src\",\n \"patch\": \"npm version patch -m 'Bump v%s'\",\n \"test\": \"jest\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GrapesJS/grapesjs.git\"\n },\n \"keywords\": [\n \"grapesjs\",\n \"plugin\",\n \"dev\",\n \"cli\"\n ],\n \"author\": \"Artur Arseniev\",\n \"license\": \"BSD-3-Clause\",\n \"dependencies\": {\n \"@babel/core\": \"7.25.2\",\n \"@babel/plugin-transform-runtime\": \"7.26.10\",\n \"@babel/preset-env\": \"7.25.4\",\n \"@babel/runtime\": \"7.25.6\",\n \"babel-loader\": \"9.1.3\",\n \"chalk\": \"^4.1.2\",\n \"core-js\": \"3.38.1\",\n \"dts-bundle-generator\": \"^8.0.1\",\n \"html-webpack-plugin\": \"5.6.3\",\n \"inquirer\": \"^8.2.5\",\n \"listr\": \"^0.14.3\",\n \"lodash.template\": \"^4.18.1\",\n \"rimraf\": \"^4.1.2\",\n \"spdx-license-list\": \"^6.6.0\",\n \"terser-webpack-plugin\": \"^5.3.14\",\n \"webpack\": \"5.94.0\",\n \"webpack-cli\": \"5.1.4\",\n \"webpack-dev-server\": \"5.2.4\",\n \"yargs\": \"^17.6.2\"\n },\n \"devDependencies\": {\n \"@types/webpack-node-externals\": \"^3.0.0\",\n \"copy-webpack-plugin\": \"^11.0.0\",\n \"fork-ts-checker-webpack-plugin\": \"^8.0.0\",\n \"webpack-node-externals\": \"^3.0.0\"\n }\n}\n","packages/cli/README.md":"# GrapesJS CLI\n\n[](https://www.npmjs.com/package/grapesjs-cli)\n\n\n\nA simple CLI library for helping in GrapesJS plugin development.\n\nThe goal of this package is to avoid the hassle of setting up all the dependencies and configurations for the plugin development by centralizing and speeding up the necessary steps during the process.\n\n- Fast project scaffolding\n- No need to touch Babel and Webpack configurations\n\n## Plugin from 0 to 100\n\nCreate a production-ready plugin in a few simple steps.\n\n- Create a folder for your plugin and init some preliminary steps\n\n```sh\nmkdir grapesjs-my-plugin\ncd grapesjs-my-plugin\nnpm init -y\ngit init\n```\n\n- Install the package\n\n```sh\nnpm i -D grapesjs-cli\n```\n\n- Init your plugin project by following few steps\n\n```sh\nnpx grapesjs-cli init\n```\n\nYou can also skip all the questions with `-y` option or pass all the answers via options (to see all available options run `npx grapesjs-cli init --help`)\n\n```sh\nnpx grapesjs-cli init -y --user=YOUR-GITHUB-USERNAME\n```\n\n- The command will scaffold the `src` directory and a bunch of other files inside your project. The `src/index.js` will be the entry point of your plugin. Before starting developing your plugin run the development server and open the printed URL (eg. the default is http://localhost:8080)\n\n```sh\nnpx grapesjs-cli serve\n```\n\nIf you need a custom port use the `-p` option\n\n```sh\nnpx grapesjs-cli serve -p 8081\n```\n\nUnder the hood we use `webpack-dev-server` and you can pass its option via CLI in this way\n\n```sh\nnpx grapesjs-cli serve --devServer='{\"https\": true}'\n```\n\n- Once the development is finished you can build your plugin and generate the minified file ready for production\n\n```sh\nnpx grapesjs-cli build\n```\n\n- Before publishing your package remember to complete your README.md file with all the available options, components, blocks and so on.\n For a better user engagement create a simple live demo by using services like [JSFiddle](https://jsfiddle.net) [CodeSandbox](https://codesandbox.io) [CodePen](https://codepen.io) and link it in your README. To help you in this process we'll print all the necessary HTML/CSS/JS in your README, so it will be just a matter of copy-pasting on some of those services.\n\n## Customization\n\n### Customize webpack config\n\nIf you need to customize the webpack configuration, you can create `webpack.config.js` file in the root dir of your project and export a function, which should return the new configuration object. Check the example below.\n\n```js\n// YOUR-PROJECT-DIR/webpack.config.js\n\n// config is the default configuration\nexport default ({ config }) => {\n // This is how you can distinguish the `build` command from the `serve`\n const isBuild = config.mode === 'production';\n\n return {\n ...config,\n module: {\n rules: [\n {\n /* extra rule */\n },\n ...config.module.rules,\n ],\n },\n };\n};\n```\n\n## Generic CLI usage\n\nShow all available commands\n\n```sh\ngrapesjs-cli\n```\n\nShow available options for a command\n\n```sh\ngrapesjs-cli COMMAND --help\n```\n\nRun the command\n\n```sh\ngrapesjs-cli COMMAND --OPT1 --OPT2=VALUE\n```\n\n## License\n\nMIT\n","packages/core/tsconfig.json":"{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"types\": [\"jest\", \"node\"],\n \"allowJs\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": false,\n \"outDir\": \"./dist\"\n },\n \"include\": [\"src\", \"test\"]\n}\n","packages/core/package.json":"{\n \"name\": \"grapesjs\",\n \"description\": \"Free and Open Source Web Builder Framework\",\n \"version\": \"0.23.9\",\n \"author\": \"Artur Arseniev\",\n \"license\": \"BSD-3-Clause\",\n \"homepage\": \"http://grapesjs.com\",\n \"main\": \"dist/grapes.min.js\",\n \"types\": \"dist/index.d.ts\",\n \"module\": \"dist/grapes.mjs\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/grapes.mjs\",\n \"require\": \"./dist/grapes.min.js\",\n \"types\": \"./dist/index.d.ts\"\n },\n \"./*\": \"./*\"\n },\n \"files\": [\n \"dist\",\n \"locale\",\n \"src/styles\"\n ],\n \"sideEffects\": [\n \"*.css\",\n \"*.scss\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GrapesJS/grapesjs.git\"\n },\n \"dependencies\": {\n \"@types/backbone\": \"1.4.15\",\n \"backbone\": \"1.4.1\",\n \"codemirror\": \"5.63.0\",\n \"codemirror-formatting\": \"1.0.0\",\n \"underscore\": \"1.13.8\"\n },\n \"devDependencies\": {\n \"@types/markdown-it\": \"14.1.2\",\n \"@types/pretty\": \"^2.0.3\",\n \"grapesjs-cli\": \"workspace:^\",\n \"jest-environment-jsdom\": \"30.4.1\",\n \"jsdom\": \"27.4.0\",\n \"npm-run-all\": \"4.1.5\",\n \"postcss\": \"8\",\n \"pretty\": \"2.0.0\",\n \"sass\": \"1.80.3\"\n },\n \"keywords\": [\n \"grapes\",\n \"grapesjs\",\n \"wysiwyg\",\n \"web\",\n \"template\",\n \"editor\",\n \"newsletter\",\n \"site\",\n \"builder\"\n ],\n \"scripts\": {\n \"prepublishOnly\": \"ts-node ../../scripts/checkCorePackage.ts\",\n \"build\": \"npm run build-all\",\n \"build-all\": \"run-s build:*\",\n \"build:js\": \"node node_modules/grapesjs-cli/dist/cli.js build --patch=false --targets=\\\"defaults\\\" --statsOutput=\\\"stats.json\\\" --localePath=\\\"src/i18n/locale\\\"\",\n \"build:mjs\": \"cross-env BUILD_MODULE=true node node_modules/grapesjs-cli/dist/cli.js build --dts='skip' --patch=false --targets=\\\"defaults\\\"\",\n \"build:css\": \"sass src/styles/scss/main.scss dist/css/grapes.min.css --no-source-map --style=compressed --load-path=node_modules\",\n \"ts:build\": \"node node_modules/grapesjs-cli/dist/cli.js build --dts='only' --patch=false\",\n \"ts:check\": \"tsc --noEmit --esModuleInterop dist/index.d.ts\",\n \"start\": \"cross-env NODE_ENV=development run-p start:*\",\n \"start:js\": \"node node_modules/grapesjs-cli/dist/cli.js serve\",\n \"start:css\": \"npm run build:css -- --watch\",\n \"test\": \"jest --forceExit\",\n \"test:dev\": \"jest --watch\"\n }\n}\n","packages/cli/src/template/package.json":"{\n \"name\": \"<%= rName %>\",\n \"version\": \"1.0.0\",\n \"description\": \"<%= name %>\",\n \"main\": \"dist/index.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/<%= user %>/<%= rName %>.git\"\n },\n \"scripts\": {\n \"start\": \"grapesjs-cli serve\",\n \"build\": \"grapesjs-cli build\",\n \"bump\": \"npm version patch -m 'Bump v%s'\"\n },\n \"keywords\": [\n \"grapesjs\",\n \"plugin\"\n ],\n \"devDependencies\": {\n \"grapesjs-cli\": \"^<%= version %>\"\n },\n \"license\": \"<%= license %>\"\n}\n","packages/cli/src/template/tsconfig.json":"{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": false\n },\n \"include\": [\"src\"]\n}\n","packages/cli/src/template/README.md":"# <%= name %>\n\n## Live Demo\n\n> **Show a live example of your plugin**\n\nTo make your plugin more engaging, create a simple live demo using online tools like [JSFiddle](https://jsfiddle.net), [CodeSandbox](https://codesandbox.io), or [CodePen](https://codepen.io). Include the demo link in your README. Adding a screenshot or GIF of the demo is a bonus.\n\nBelow, you'll find the necessary HTML, CSS, and JavaScript. Copy and paste this code into one of the tools mentioned. Once you're done, delete this section and update the link at the top with your demo.\n\n### HTML\n\n```html\n\n\n\n\n\n```\n\n### JS\n\n```js\nconst editor = grapesjs.init({\n container: '#gjs',\n height: '100%',\n fromElement: true,\n storageManager: false,\n plugins: ['<%= rName %>'],\n});\n```\n\n### CSS\n\n```css\nbody,\nhtml {\n margin: 0;\n height: 100%;\n}\n```\n\n## Summary\n\n- Plugin name: `<%= rName %>`\n- Components\n - `component-id-1`\n - `component-id-2`\n - ...\n- Blocks\n - `block-id-1`\n - `block-id-2`\n - ...\n\n## Options\n\n| Option | Description | Default |\n| --------- | ------------------ | --------------- |\n| `option1` | Description option | `default value` |\n\n## Download\n\n- CDN\n - `https://unpkg.com/<%= rName %>`\n- NPM\n - `npm i <%= rName %>`\n- GIT\n - `git clone https://github.com/<%= user %>/<%= rName %>.git`\n\n## Usage\n\nDirectly in the browser\n\n```html\n\n\n\n\n\n\n\n```\n\nModern javascript\n\n```js\nimport grapesjs from 'grapesjs';\nimport plugin from '<%= rName %>';\nimport 'grapesjs/dist/css/grapes.min.css';\n\nconst editor = grapesjs.init({\n container : '#gjs',\n // ...\n plugins: [plugin],\n pluginsOpts: {\n [plugin]: { /* options */ }\n }\n // or\n plugins: [\n editor => plugin(editor, { /* options */ }),\n ],\n});\n```\n\n## Development\n\nClone the repository\n\n```sh\n$ git clone https://github.com/<%= user %>/<%= rName %>.git\n$ cd <%= rName %>\n```\n\nInstall dependencies\n\n```sh\nnpm i\n```\n\nStart the dev server\n\n```sh\nnpm start\n```\n\nBuild the source\n\n```sh\nnpm run build\n```\n\n## License\n\nMIT\n"},"files":{"packages/core/README.md":"# [GrapesJS](http://grapesjs.com)\n\n[](https://github.com/GrapesJS/grapesjs/actions)\n[](https://discord.gg/QAbgGXq)\n[](https://cdnjs.com/libraries/grapesjs)\n[](https://www.npmjs.com/package/grapesjs)\n\n> If you looking to embed the [Studio](https://app.grapesjs.com/studio) editor in your application, we now offer the [Studio SDK](https://app.grapesjs.com/dashboard/sdk/licenses?ref=repo-readme), a ready-to-use visual builder that's easy to embed in external applications, with GrapesJS team support included.\n\n
\n\nGrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a [CMS] to speed up the creation of dynamic templates. To better understand this concept check the image below\n\n \n
\n \n\nGenerally any 'template system', that you'd find in various applications like CMS, is composed by the **structure** (HTML), **style** (CSS) and **variables**, which are then replaced with other templates and contents on server-side and rendered on client.\n\nThis demos show examples of what is possible to achieve: \nWebpage Demo - http://grapesjs.com/demo.html \nNewsletter Demo - http://grapesjs.com/demo-newsletter-editor.html \n\n## Table of contents\n\n- [Features](#features)\n- [Download](#download)\n- [Usage](#usage)\n- [Development](#development)\n- [Documentation](#documentation)\n- [API](#api)\n- [Testing](#testing)\n- [Plugins](#plugins)\n- [Support](#support)\n- [Changelog](https://github.com/GrapesJS/grapesjs/releases)\n- [Contributing](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md)\n- [License](#license)\n\n## Features\n\n| Blocks | Style Manager | Layer Manager |\n| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| | | |\n\n| Code Viewer | Asset Manager |\n| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| | |\n\n- Local and remote storage\n\n- Default built-in commands (basically for creating and managing different components)\n\n## Download\n\n- CDNs\n - UNPKG (resolves to the latest version)\n - `https://unpkg.com/grapesjs`\n - `https://unpkg.com/grapesjs/dist/css/grapes.min.css`\n - CDNJS (replace `X.X.X` with the current version)\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js`\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css`\n- NPM\n - `npm i grapesjs`\n- GIT\n - `git clone https://github.com/GrapesJS/grapesjs.git`\n\nFor the development purpose you should follow instructions below.\n\n## Usage\n\n```html\n\n\n\n\n\n\n```\n\nFor a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html\n\n## Development\n\nFollow the [Contributing Guide](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md).\n\n## Documentation\n\nCheck the getting started guide here: [Documentation]\n\n## API\n\nAPI References could be found here: [API-Reference]\n\n## Testing\n\n```sh\n$ pnpm test\n```\n\n## Plugins\n\n[Official Plugins](https://github.com/orgs/GrapesJS/repositories?q=-repo%3Agrapesjs%2Fgrapesjs&type=source) | [Community Plugins](https://github.com/topics/grapesjs-plugin)\n\n### Wrappers\n\n- [@grapesjs/react](https://github.com/GrapesJS/react) - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.\n\n### Extensions\n\n- [@grapesjs/webmcp](https://github.com/GrapesJS/grapesjs/tree/dev/packages/webmcp) - Expose the editor API as WebMCP tools for browser AI agents\n- [grapesjs-plugin-export](https://github.com/GrapesJS/export) - Export GrapesJS templates in a zip archive\n- [grapesjs-plugin-filestack](https://github.com/GrapesJS/filestack) - Add Filestack uploader in Asset Manager\n- [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor) - Replaces the built-in RTE with CKEditor\n- [grapesjs-tui-image-editor](https://github.com/GrapesJS/tui-image-editor) - GrapesJS TOAST UI Image Editor\n- [grapesjs-blocks-basic](https://github.com/GrapesJS/blocks-basic) - Basic set of blocks\n- [grapesjs-plugin-forms](https://github.com/GrapesJS/components-forms) - Set of form components and blocks\n- [grapesjs-navbar](https://github.com/GrapesJS/components-navbar) - Simple navbar component\n- [grapesjs-component-countdown](https://github.com/GrapesJS/components-countdown) - Simple countdown component\n- [grapesjs-style-gradient](https://github.com/GrapesJS/style-gradient) - Add `gradient` type input to the Style Manager\n- [grapesjs-style-filter](https://github.com/GrapesJS/style-filter) - Add `filter` type input to the Style Manager\n- [grapesjs-style-bg](https://github.com/GrapesJS/style-bg) - Full-stack background style property type, with the possibility to add images, colors, and gradients\n- [grapesjs-blocks-flexbox](https://github.com/GrapesJS/blocks-flexbox) - Add the flexbox block\n- [grapesjs-lory-slider](https://github.com/GrapesJS/components-lory) - Slider component by using [lory](https://github.com/meandmax/lory)\n- [grapesjs-tabs](https://github.com/GrapesJS/components-tabs) - Simple tabs component\n- [grapesjs-tooltip](https://github.com/GrapesJS/components-tooltip) - Simple, CSS only, tooltip component for GrapesJS\n- [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) - Embed custom code\n- [grapesjs-touch](https://github.com/GrapesJS/touch) - Enable touch support\n- [grapesjs-indexeddb](https://github.com/GrapesJS/storage-indexeddb) - Storage wrapper for IndexedDB\n- [grapesjs-firestore](https://github.com/GrapesJS/storage-firestore) - Storage wrapper for [Cloud Firestore](https://firebase.google.com/docs/firestore)\n- [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Custom CSS parser for GrapesJS by using [PostCSS](https://github.com/postcss/postcss)\n- [grapesjs-typed](https://github.com/GrapesJS/components-typed) - Typed component made by wrapping Typed.js library\n- [grapesjs-ui-suggest-classes](https://github.com/silexlabs/grapesjs-ui-suggest-classes) - Enable auto-complete of classes in the SelectorManager UI\n- [grapesjs-fonts](https://github.com/silexlabs/grapesjs-fonts) - Custom Fonts plugin, adds a UI to manage fonts in websites\n- [grapesjs-symbols](https://github.com/silexlabs/grapesjs-symbols) - Symbols plugin to reuse elements in a website and accross pages\n- [grapesjs-click](https://github.com/bgrand-ch/grapesjs-click) - Grab and drop blocks and components with click (no more drag-and-drop)\n- [grapesjs-float](https://github.com/bgrand-ch/grapesjs-float) - Anchor a floating element next to another element (selected component, ...)\n\n### Presets\n\n- [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - Webpage Builder\n- [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - Newsletter Builder\n- [grapesjs-mjml](https://github.com/GrapesJS/mjml) - Newsletter Builder with MJML components\n\nFind out more about plugins here: [Creating plugins](https://grapesjs.com/docs/modules/Plugins.html)\n\n## Support\n\nIf you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via [Open Collective](https://opencollective.com/grapesjs)\n\n[](https://paypal.me/grapesjs)\n[](https://commerce.coinbase.com/checkout/fc90b940-558d-408b-a166-28a823c98173)\n\n\n\n\n \n\n[](https://www.browserstack.com) \nThanks to [BrowserStack](https://www.browserstack.com) for providing us browser testing services\n\n## License\n\nBSD 3-clause\n\n[Documentation]: https://grapesjs.com/docs/\n[API-Reference]: https://grapesjs.com/docs/api/\n[CMS]: https://en.wikipedia.org/wiki/Content_management_system\n","packages/cli/tsconfig.json":"{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"noImplicitThis\": true,\n \"moduleResolution\": \"node\",\n \"noUnusedLocals\": true,\n \"allowUnreachableCode\": false,\n \"module\": \"commonjs\",\n \"target\": \"es2016\",\n \"outDir\": \"dist\",\n \"esModuleInterop\": true,\n \"declaration\": true,\n \"noImplicitReturns\": false,\n \"noImplicitAny\": false,\n \"strictNullChecks\": false,\n \"resolveJsonModule\": true,\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true\n },\n \"include\": [\"src/cli.ts\"]\n}\n","packages/cli/package.json":"{\n \"name\": \"grapesjs-cli\",\n \"version\": \"4.1.3\",\n \"description\": \"GrapesJS CLI tool for the plugin development\",\n \"bin\": {\n \"grapesjs-cli\": \"dist/cli.js\"\n },\n \"files\": [\n \"dist\"\n ],\n \"scripts\": {\n \"build\": \"cross-env BUILD_MODE=production webpack --config ./webpack.cli.ts\",\n \"build:watch\": \"webpack --config ./webpack.cli.ts --watch\",\n \"lint\": \"eslint src\",\n \"patch\": \"npm version patch -m 'Bump v%s'\",\n \"test\": \"jest\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GrapesJS/grapesjs.git\"\n },\n \"keywords\": [\n \"grapesjs\",\n \"plugin\",\n \"dev\",\n \"cli\"\n ],\n \"author\": \"Artur Arseniev\",\n \"license\": \"BSD-3-Clause\",\n \"dependencies\": {\n \"@babel/core\": \"7.25.2\",\n \"@babel/plugin-transform-runtime\": \"7.26.10\",\n \"@babel/preset-env\": \"7.25.4\",\n \"@babel/runtime\": \"7.25.6\",\n \"babel-loader\": \"9.1.3\",\n \"chalk\": \"^4.1.2\",\n \"core-js\": \"3.38.1\",\n \"dts-bundle-generator\": \"^8.0.1\",\n \"html-webpack-plugin\": \"5.6.3\",\n \"inquirer\": \"^8.2.5\",\n \"listr\": \"^0.14.3\",\n \"lodash.template\": \"^4.18.1\",\n \"rimraf\": \"^4.1.2\",\n \"spdx-license-list\": \"^6.6.0\",\n \"terser-webpack-plugin\": \"^5.3.14\",\n \"webpack\": \"5.94.0\",\n \"webpack-cli\": \"5.1.4\",\n \"webpack-dev-server\": \"5.2.4\",\n \"yargs\": \"^17.6.2\"\n },\n \"devDependencies\": {\n \"@types/webpack-node-externals\": \"^3.0.0\",\n \"copy-webpack-plugin\": \"^11.0.0\",\n \"fork-ts-checker-webpack-plugin\": \"^8.0.0\",\n \"webpack-node-externals\": \"^3.0.0\"\n }\n}\n","packages/cli/README.md":"# GrapesJS CLI\n\n[](https://www.npmjs.com/package/grapesjs-cli)\n\n\n\nA simple CLI library for helping in GrapesJS plugin development.\n\nThe goal of this package is to avoid the hassle of setting up all the dependencies and configurations for the plugin development by centralizing and speeding up the necessary steps during the process.\n\n- Fast project scaffolding\n- No need to touch Babel and Webpack configurations\n\n## Plugin from 0 to 100\n\nCreate a production-ready plugin in a few simple steps.\n\n- Create a folder for your plugin and init some preliminary steps\n\n```sh\nmkdir grapesjs-my-plugin\ncd grapesjs-my-plugin\nnpm init -y\ngit init\n```\n\n- Install the package\n\n```sh\nnpm i -D grapesjs-cli\n```\n\n- Init your plugin project by following few steps\n\n```sh\nnpx grapesjs-cli init\n```\n\nYou can also skip all the questions with `-y` option or pass all the answers via options (to see all available options run `npx grapesjs-cli init --help`)\n\n```sh\nnpx grapesjs-cli init -y --user=YOUR-GITHUB-USERNAME\n```\n\n- The command will scaffold the `src` directory and a bunch of other files inside your project. The `src/index.js` will be the entry point of your plugin. Before starting developing your plugin run the development server and open the printed URL (eg. the default is http://localhost:8080)\n\n```sh\nnpx grapesjs-cli serve\n```\n\nIf you need a custom port use the `-p` option\n\n```sh\nnpx grapesjs-cli serve -p 8081\n```\n\nUnder the hood we use `webpack-dev-server` and you can pass its option via CLI in this way\n\n```sh\nnpx grapesjs-cli serve --devServer='{\"https\": true}'\n```\n\n- Once the development is finished you can build your plugin and generate the minified file ready for production\n\n```sh\nnpx grapesjs-cli build\n```\n\n- Before publishing your package remember to complete your README.md file with all the available options, components, blocks and so on.\n For a better user engagement create a simple live demo by using services like [JSFiddle](https://jsfiddle.net) [CodeSandbox](https://codesandbox.io) [CodePen](https://codepen.io) and link it in your README. To help you in this process we'll print all the necessary HTML/CSS/JS in your README, so it will be just a matter of copy-pasting on some of those services.\n\n## Customization\n\n### Customize webpack config\n\nIf you need to customize the webpack configuration, you can create `webpack.config.js` file in the root dir of your project and export a function, which should return the new configuration object. Check the example below.\n\n```js\n// YOUR-PROJECT-DIR/webpack.config.js\n\n// config is the default configuration\nexport default ({ config }) => {\n // This is how you can distinguish the `build` command from the `serve`\n const isBuild = config.mode === 'production';\n\n return {\n ...config,\n module: {\n rules: [\n {\n /* extra rule */\n },\n ...config.module.rules,\n ],\n },\n };\n};\n```\n\n## Generic CLI usage\n\nShow all available commands\n\n```sh\ngrapesjs-cli\n```\n\nShow available options for a command\n\n```sh\ngrapesjs-cli COMMAND --help\n```\n\nRun the command\n\n```sh\ngrapesjs-cli COMMAND --OPT1 --OPT2=VALUE\n```\n\n## License\n\nMIT\n","packages/core/tsconfig.json":"{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"types\": [\"jest\", \"node\"],\n \"allowJs\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": false,\n \"outDir\": \"./dist\"\n },\n \"include\": [\"src\", \"test\"]\n}\n","packages/core/package.json":"{\n \"name\": \"grapesjs\",\n \"description\": \"Free and Open Source Web Builder Framework\",\n \"version\": \"0.23.9\",\n \"author\": \"Artur Arseniev\",\n \"license\": \"BSD-3-Clause\",\n \"homepage\": \"http://grapesjs.com\",\n \"main\": \"dist/grapes.min.js\",\n \"types\": \"dist/index.d.ts\",\n \"module\": \"dist/grapes.mjs\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/grapes.mjs\",\n \"require\": \"./dist/grapes.min.js\",\n \"types\": \"./dist/index.d.ts\"\n },\n \"./*\": \"./*\"\n },\n \"files\": [\n \"dist\",\n \"locale\",\n \"src/styles\"\n ],\n \"sideEffects\": [\n \"*.css\",\n \"*.scss\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GrapesJS/grapesjs.git\"\n },\n \"dependencies\": {\n \"@types/backbone\": \"1.4.15\",\n \"backbone\": \"1.4.1\",\n \"codemirror\": \"5.63.0\",\n \"codemirror-formatting\": \"1.0.0\",\n \"underscore\": \"1.13.8\"\n },\n \"devDependencies\": {\n \"@types/markdown-it\": \"14.1.2\",\n \"@types/pretty\": \"^2.0.3\",\n \"grapesjs-cli\": \"workspace:^\",\n \"jest-environment-jsdom\": \"30.4.1\",\n \"jsdom\": \"27.4.0\",\n \"npm-run-all\": \"4.1.5\",\n \"postcss\": \"8\",\n \"pretty\": \"2.0.0\",\n \"sass\": \"1.80.3\"\n },\n \"keywords\": [\n \"grapes\",\n \"grapesjs\",\n \"wysiwyg\",\n \"web\",\n \"template\",\n \"editor\",\n \"newsletter\",\n \"site\",\n \"builder\"\n ],\n \"scripts\": {\n \"prepublishOnly\": \"ts-node ../../scripts/checkCorePackage.ts\",\n \"build\": \"npm run build-all\",\n \"build-all\": \"run-s build:*\",\n \"build:js\": \"node node_modules/grapesjs-cli/dist/cli.js build --patch=false --targets=\\\"defaults\\\" --statsOutput=\\\"stats.json\\\" --localePath=\\\"src/i18n/locale\\\"\",\n \"build:mjs\": \"cross-env BUILD_MODULE=true node node_modules/grapesjs-cli/dist/cli.js build --dts='skip' --patch=false --targets=\\\"defaults\\\"\",\n \"build:css\": \"sass src/styles/scss/main.scss dist/css/grapes.min.css --no-source-map --style=compressed --load-path=node_modules\",\n \"ts:build\": \"node node_modules/grapesjs-cli/dist/cli.js build --dts='only' --patch=false\",\n \"ts:check\": \"tsc --noEmit --esModuleInterop dist/index.d.ts\",\n \"start\": \"cross-env NODE_ENV=development run-p start:*\",\n \"start:js\": \"node node_modules/grapesjs-cli/dist/cli.js serve\",\n \"start:css\": \"npm run build:css -- --watch\",\n \"test\": \"jest --forceExit\",\n \"test:dev\": \"jest --watch\"\n }\n}\n","packages/cli/src/template/package.json":"{\n \"name\": \"<%= rName %>\",\n \"version\": \"1.0.0\",\n \"description\": \"<%= name %>\",\n \"main\": \"dist/index.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/<%= user %>/<%= rName %>.git\"\n },\n \"scripts\": {\n \"start\": \"grapesjs-cli serve\",\n \"build\": \"grapesjs-cli build\",\n \"bump\": \"npm version patch -m 'Bump v%s'\"\n },\n \"keywords\": [\n \"grapesjs\",\n \"plugin\"\n ],\n \"devDependencies\": {\n \"grapesjs-cli\": \"^<%= version %>\"\n },\n \"license\": \"<%= license %>\"\n}\n","packages/cli/src/template/tsconfig.json":"{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": false\n },\n \"include\": [\"src\"]\n}\n","packages/cli/src/template/README.md":"# <%= name %>\n\n## Live Demo\n\n> **Show a live example of your plugin**\n\nTo make your plugin more engaging, create a simple live demo using online tools like [JSFiddle](https://jsfiddle.net), [CodeSandbox](https://codesandbox.io), or [CodePen](https://codepen.io). Include the demo link in your README. Adding a screenshot or GIF of the demo is a bonus.\n\nBelow, you'll find the necessary HTML, CSS, and JavaScript. Copy and paste this code into one of the tools mentioned. Once you're done, delete this section and update the link at the top with your demo.\n\n### HTML\n\n```html\n\n\n\n\n\n```\n\n### JS\n\n```js\nconst editor = grapesjs.init({\n container: '#gjs',\n height: '100%',\n fromElement: true,\n storageManager: false,\n plugins: ['<%= rName %>'],\n});\n```\n\n### CSS\n\n```css\nbody,\nhtml {\n margin: 0;\n height: 100%;\n}\n```\n\n## Summary\n\n- Plugin name: `<%= rName %>`\n- Components\n - `component-id-1`\n - `component-id-2`\n - ...\n- Blocks\n - `block-id-1`\n - `block-id-2`\n - ...\n\n## Options\n\n| Option | Description | Default |\n| --------- | ------------------ | --------------- |\n| `option1` | Description option | `default value` |\n\n## Download\n\n- CDN\n - `https://unpkg.com/<%= rName %>`\n- NPM\n - `npm i <%= rName %>`\n- GIT\n - `git clone https://github.com/<%= user %>/<%= rName %>.git`\n\n## Usage\n\nDirectly in the browser\n\n```html\n\n\n\n\n\n\n\n```\n\nModern javascript\n\n```js\nimport grapesjs from 'grapesjs';\nimport plugin from '<%= rName %>';\nimport 'grapesjs/dist/css/grapes.min.css';\n\nconst editor = grapesjs.init({\n container : '#gjs',\n // ...\n plugins: [plugin],\n pluginsOpts: {\n [plugin]: { /* options */ }\n }\n // or\n plugins: [\n editor => plugin(editor, { /* options */ }),\n ],\n});\n```\n\n## Development\n\nClone the repository\n\n```sh\n$ git clone https://github.com/<%= user %>/<%= rName %>.git\n$ cd <%= rName %>\n```\n\nInstall dependencies\n\n```sh\nnpm i\n```\n\nStart the dev server\n\n```sh\nnpm start\n```\n\nBuild the source\n\n```sh\nnpm run build\n```\n\n## License\n\nMIT\n"},"items":[{"name":"package.json","path":"packages/cli/package.json","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/cli/package.json","title":"grapesjs-cli","category":"anthropic-skill","format":"json","content":"{\n \"name\": \"grapesjs-cli\",\n \"version\": \"4.1.3\",\n \"description\": \"GrapesJS CLI tool for the plugin development\",\n \"bin\": {\n \"grapesjs-cli\": \"dist/cli.js\"\n },\n \"files\": [\n \"dist\"\n ],\n \"scripts\": {\n \"build\": \"cross-env BUILD_MODE=production webpack --config ./webpack.cli.ts\",\n \"build:watch\": \"webpack --config ./webpack.cli.ts --watch\",\n \"lint\": \"eslint src\",\n \"patch\": \"npm version patch -m 'Bump v%s'\",\n \"test\": \"jest\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GrapesJS/grapesjs.git\"\n },\n \"keywords\": [\n \"grapesjs\",\n \"plugin\",\n \"dev\",\n \"cli\"\n ],\n \"author\": \"Artur Arseniev\",\n \"license\": \"BSD-3-Clause\",\n \"dependencies\": {\n \"@babel/core\": \"7.25.2\",\n \"@babel/plugin-transform-runtime\": \"7.26.10\",\n \"@babel/preset-env\": \"7.25.4\",\n \"@babel/runtime\": \"7.25.6\",\n \"babel-loader\": \"9.1.3\",\n \"chalk\": \"^4.1.2\",\n \"core-js\": \"3.38.1\",\n \"dts-bundle-generator\": \"^8.0.1\",\n \"html-webpack-plugin\": \"5.6.3\",\n \"inquirer\": \"^8.2.5\",\n \"listr\": \"^0.14.3\",\n \"lodash.template\": \"^4.18.1\",\n \"rimraf\": \"^4.1.2\",\n \"spdx-license-list\": \"^6.6.0\",\n \"terser-webpack-plugin\": \"^5.3.14\",\n \"webpack\": \"5.94.0\",\n \"webpack-cli\": \"5.1.4\",\n \"webpack-dev-server\": \"5.2.4\",\n \"yargs\": \"^17.6.2\"\n },\n \"devDependencies\": {\n \"@types/webpack-node-externals\": \"^3.0.0\",\n \"copy-webpack-plugin\": \"^11.0.0\",\n \"fork-ts-checker-webpack-plugin\": \"^8.0.0\",\n \"webpack-node-externals\": \"^3.0.0\"\n }\n}\n","frontmatter":{"name":"grapesjs-cli","version":"4.1.3","description":"GrapesJS CLI tool for the plugin development","bin":{"grapesjs-cli":"dist/cli.js"},"files":["dist"],"scripts":{"build":"cross-env BUILD_MODE=production webpack --config ./webpack.cli.ts","build:watch":"webpack --config ./webpack.cli.ts --watch","lint":"eslint src","patch":"npm version patch -m 'Bump v%s'","test":"jest"},"repository":{"type":"git","url":"https://github.com/GrapesJS/grapesjs.git"},"keywords":["grapesjs","plugin","dev","cli"],"author":"Artur Arseniev","license":"BSD-3-Clause","dependencies":{"@babel/core":"7.25.2","@babel/plugin-transform-runtime":"7.26.10","@babel/preset-env":"7.25.4","@babel/runtime":"7.25.6","babel-loader":"9.1.3","chalk":"^4.1.2","core-js":"3.38.1","dts-bundle-generator":"^8.0.1","html-webpack-plugin":"5.6.3","inquirer":"^8.2.5","listr":"^0.14.3","lodash.template":"^4.18.1","rimraf":"^4.1.2","spdx-license-list":"^6.6.0","terser-webpack-plugin":"^5.3.14","webpack":"5.94.0","webpack-cli":"5.1.4","webpack-dev-server":"5.2.4","yargs":"^17.6.2"},"devDependencies":{"@types/webpack-node-externals":"^3.0.0","copy-webpack-plugin":"^11.0.0","fork-ts-checker-webpack-plugin":"^8.0.0","webpack-node-externals":"^3.0.0"}},"isInternal":false,"tokens":536,"sizeBytes":1497},{"name":"package.json","path":"packages/cli/src/template/package.json","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/cli/src/template/package.json","title":"<%= rName %>","category":"anthropic-skill","format":"json","content":"{\n \"name\": \"<%= rName %>\",\n \"version\": \"1.0.0\",\n \"description\": \"<%= name %>\",\n \"main\": \"dist/index.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/<%= user %>/<%= rName %>.git\"\n },\n \"scripts\": {\n \"start\": \"grapesjs-cli serve\",\n \"build\": \"grapesjs-cli build\",\n \"bump\": \"npm version patch -m 'Bump v%s'\"\n },\n \"keywords\": [\n \"grapesjs\",\n \"plugin\"\n ],\n \"devDependencies\": {\n \"grapesjs-cli\": \"^<%= version %>\"\n },\n \"license\": \"<%= license %>\"\n}\n","frontmatter":{"name":"<%= rName %>","version":"1.0.0","description":"<%= name %>","main":"dist/index.js","repository":{"type":"git","url":"https://github.com/<%= user %>/<%= rName %>.git"},"scripts":{"start":"grapesjs-cli serve","build":"grapesjs-cli build","bump":"npm version patch -m 'Bump v%s'"},"keywords":["grapesjs","plugin"],"devDependencies":{"grapesjs-cli":"^<%= version %>"},"license":"<%= license %>"},"isInternal":false,"tokens":169,"sizeBytes":496},{"name":"tsconfig.json","path":"packages/cli/src/template/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/cli/src/template/tsconfig.json","title":"Template Skill","category":"anthropic-skill","format":"json","content":"{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": false\n },\n \"include\": [\"src\"]\n}\n","frontmatter":{"compilerOptions":{"target":"es5","lib":["dom","dom.iterable","esnext"],"allowJs":true,"sourceMap":true,"skipLibCheck":true,"esModuleInterop":true,"allowSyntheticDefaultImports":true,"strict":true,"forceConsistentCasingInFileNames":true,"noFallthroughCasesInSwitch":true,"module":"esnext","moduleResolution":"node","resolveJsonModule":true,"isolatedModules":true,"noEmit":false},"include":["src"]},"isInternal":false,"tokens":150,"sizeBytes":503},{"name":"tsconfig.json","path":"packages/cli/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/cli/tsconfig.json","title":"Cli Skill","category":"anthropic-skill","format":"json","content":"{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"noImplicitThis\": true,\n \"moduleResolution\": \"node\",\n \"noUnusedLocals\": true,\n \"allowUnreachableCode\": false,\n \"module\": \"commonjs\",\n \"target\": \"es2016\",\n \"outDir\": \"dist\",\n \"esModuleInterop\": true,\n \"declaration\": true,\n \"noImplicitReturns\": false,\n \"noImplicitAny\": false,\n \"strictNullChecks\": false,\n \"resolveJsonModule\": true,\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true\n },\n \"include\": [\"src/cli.ts\"]\n}\n","frontmatter":{"compilerOptions":{"allowJs":true,"noImplicitThis":true,"moduleResolution":"node","noUnusedLocals":true,"allowUnreachableCode":false,"module":"commonjs","target":"es2016","outDir":"dist","esModuleInterop":true,"declaration":true,"noImplicitReturns":false,"noImplicitAny":false,"strictNullChecks":false,"resolveJsonModule":true,"emitDecoratorMetadata":true,"experimentalDecorators":true},"include":["src/cli.ts"]},"isInternal":false,"tokens":146,"sizeBytes":522},{"name":"package.json","path":"packages/core/package.json","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/core/package.json","title":"grapesjs","category":"anthropic-skill","format":"json","content":"{\n \"name\": \"grapesjs\",\n \"description\": \"Free and Open Source Web Builder Framework\",\n \"version\": \"0.23.9\",\n \"author\": \"Artur Arseniev\",\n \"license\": \"BSD-3-Clause\",\n \"homepage\": \"http://grapesjs.com\",\n \"main\": \"dist/grapes.min.js\",\n \"types\": \"dist/index.d.ts\",\n \"module\": \"dist/grapes.mjs\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/grapes.mjs\",\n \"require\": \"./dist/grapes.min.js\",\n \"types\": \"./dist/index.d.ts\"\n },\n \"./*\": \"./*\"\n },\n \"files\": [\n \"dist\",\n \"locale\",\n \"src/styles\"\n ],\n \"sideEffects\": [\n \"*.css\",\n \"*.scss\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GrapesJS/grapesjs.git\"\n },\n \"dependencies\": {\n \"@types/backbone\": \"1.4.15\",\n \"backbone\": \"1.4.1\",\n \"codemirror\": \"5.63.0\",\n \"codemirror-formatting\": \"1.0.0\",\n \"underscore\": \"1.13.8\"\n },\n \"devDependencies\": {\n \"@types/markdown-it\": \"14.1.2\",\n \"@types/pretty\": \"^2.0.3\",\n \"grapesjs-cli\": \"workspace:^\",\n \"jest-environment-jsdom\": \"30.4.1\",\n \"jsdom\": \"27.4.0\",\n \"npm-run-all\": \"4.1.5\",\n \"postcss\": \"8\",\n \"pretty\": \"2.0.0\",\n \"sass\": \"1.80.3\"\n },\n \"keywords\": [\n \"grapes\",\n \"grapesjs\",\n \"wysiwyg\",\n \"web\",\n \"template\",\n \"editor\",\n \"newsletter\",\n \"site\",\n \"builder\"\n ],\n \"scripts\": {\n \"prepublishOnly\": \"ts-node ../../scripts/checkCorePackage.ts\",\n \"build\": \"npm run build-all\",\n \"build-all\": \"run-s build:*\",\n \"build:js\": \"node node_modules/grapesjs-cli/dist/cli.js build --patch=false --targets=\\\"defaults\\\" --statsOutput=\\\"stats.json\\\" --localePath=\\\"src/i18n/locale\\\"\",\n \"build:mjs\": \"cross-env BUILD_MODULE=true node node_modules/grapesjs-cli/dist/cli.js build --dts='skip' --patch=false --targets=\\\"defaults\\\"\",\n \"build:css\": \"sass src/styles/scss/main.scss dist/css/grapes.min.css --no-source-map --style=compressed --load-path=node_modules\",\n \"ts:build\": \"node node_modules/grapesjs-cli/dist/cli.js build --dts='only' --patch=false\",\n \"ts:check\": \"tsc --noEmit --esModuleInterop dist/index.d.ts\",\n \"start\": \"cross-env NODE_ENV=development run-p start:*\",\n \"start:js\": \"node node_modules/grapesjs-cli/dist/cli.js serve\",\n \"start:css\": \"npm run build:css -- --watch\",\n \"test\": \"jest --forceExit\",\n \"test:dev\": \"jest --watch\"\n }\n}\n","frontmatter":{"name":"grapesjs","description":"Free and Open Source Web Builder Framework","version":"0.23.9","author":"Artur Arseniev","license":"BSD-3-Clause","homepage":"http://grapesjs.com","main":"dist/grapes.min.js","types":"dist/index.d.ts","module":"dist/grapes.mjs","exports":{".":{"import":"./dist/grapes.mjs","require":"./dist/grapes.min.js","types":"./dist/index.d.ts"},"./*":"./*"},"files":["dist","locale","src/styles"],"sideEffects":["*.css","*.scss"],"repository":{"type":"git","url":"https://github.com/GrapesJS/grapesjs.git"},"dependencies":{"@types/backbone":"1.4.15","backbone":"1.4.1","codemirror":"5.63.0","codemirror-formatting":"1.0.0","underscore":"1.13.8"},"devDependencies":{"@types/markdown-it":"14.1.2","@types/pretty":"^2.0.3","grapesjs-cli":"workspace:^","jest-environment-jsdom":"30.4.1","jsdom":"27.4.0","npm-run-all":"4.1.5","postcss":"8","pretty":"2.0.0","sass":"1.80.3"},"keywords":["grapes","grapesjs","wysiwyg","web","template","editor","newsletter","site","builder"],"scripts":{"prepublishOnly":"ts-node ../../scripts/checkCorePackage.ts","build":"npm run build-all","build-all":"run-s build:*","build:js":"node node_modules/grapesjs-cli/dist/cli.js build --patch=false --targets=\"defaults\" --statsOutput=\"stats.json\" --localePath=\"src/i18n/locale\"","build:mjs":"cross-env BUILD_MODULE=true node node_modules/grapesjs-cli/dist/cli.js build --dts='skip' --patch=false --targets=\"defaults\"","build:css":"sass src/styles/scss/main.scss dist/css/grapes.min.css --no-source-map --style=compressed --load-path=node_modules","ts:build":"node node_modules/grapesjs-cli/dist/cli.js build --dts='only' --patch=false","ts:check":"tsc --noEmit --esModuleInterop dist/index.d.ts","start":"cross-env NODE_ENV=development run-p start:*","start:js":"node node_modules/grapesjs-cli/dist/cli.js serve","start:css":"npm run build:css -- --watch","test":"jest --forceExit","test:dev":"jest --watch"}},"isInternal":false,"tokens":735,"sizeBytes":2293},{"name":"tsconfig.json","path":"packages/core/tsconfig.json","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/core/tsconfig.json","title":"Core Skill","category":"anthropic-skill","format":"json","content":"{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"types\": [\"jest\", \"node\"],\n \"allowJs\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": false,\n \"outDir\": \"./dist\"\n },\n \"include\": [\"src\", \"test\"]\n}\n","frontmatter":{"compilerOptions":{"target":"es5","lib":["dom","dom.iterable","esnext"],"types":["jest","node"],"allowJs":true,"sourceMap":true,"skipLibCheck":true,"esModuleInterop":true,"allowSyntheticDefaultImports":true,"strict":true,"forceConsistentCasingInFileNames":true,"noFallthroughCasesInSwitch":true,"module":"esnext","moduleResolution":"node","resolveJsonModule":true,"isolatedModules":true,"noEmit":false,"outDir":"./dist"},"include":["src","test"]},"isInternal":false,"tokens":171,"sizeBytes":566},{"name":"README.md","path":"packages/cli/README.md","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/cli/README.md","title":"cli Documentation","category":"plugin-manifest","format":"markdown","content":"# GrapesJS CLI\n\n[](https://www.npmjs.com/package/grapesjs-cli)\n\n\n\nA simple CLI library for helping in GrapesJS plugin development.\n\nThe goal of this package is to avoid the hassle of setting up all the dependencies and configurations for the plugin development by centralizing and speeding up the necessary steps during the process.\n\n- Fast project scaffolding\n- No need to touch Babel and Webpack configurations\n\n## Plugin from 0 to 100\n\nCreate a production-ready plugin in a few simple steps.\n\n- Create a folder for your plugin and init some preliminary steps\n\n```sh\nmkdir grapesjs-my-plugin\ncd grapesjs-my-plugin\nnpm init -y\ngit init\n```\n\n- Install the package\n\n```sh\nnpm i -D grapesjs-cli\n```\n\n- Init your plugin project by following few steps\n\n```sh\nnpx grapesjs-cli init\n```\n\nYou can also skip all the questions with `-y` option or pass all the answers via options (to see all available options run `npx grapesjs-cli init --help`)\n\n```sh\nnpx grapesjs-cli init -y --user=YOUR-GITHUB-USERNAME\n```\n\n- The command will scaffold the `src` directory and a bunch of other files inside your project. The `src/index.js` will be the entry point of your plugin. Before starting developing your plugin run the development server and open the printed URL (eg. the default is http://localhost:8080)\n\n```sh\nnpx grapesjs-cli serve\n```\n\nIf you need a custom port use the `-p` option\n\n```sh\nnpx grapesjs-cli serve -p 8081\n```\n\nUnder the hood we use `webpack-dev-server` and you can pass its option via CLI in this way\n\n```sh\nnpx grapesjs-cli serve --devServer='{\"https\": true}'\n```\n\n- Once the development is finished you can build your plugin and generate the minified file ready for production\n\n```sh\nnpx grapesjs-cli build\n```\n\n- Before publishing your package remember to complete your README.md file with all the available options, components, blocks and so on.\n For a better user engagement create a simple live demo by using services like [JSFiddle](https://jsfiddle.net) [CodeSandbox](https://codesandbox.io) [CodePen](https://codepen.io) and link it in your README. To help you in this process we'll print all the necessary HTML/CSS/JS in your README, so it will be just a matter of copy-pasting on some of those services.\n\n## Customization\n\n### Customize webpack config\n\nIf you need to customize the webpack configuration, you can create `webpack.config.js` file in the root dir of your project and export a function, which should return the new configuration object. Check the example below.\n\n```js\n// YOUR-PROJECT-DIR/webpack.config.js\n\n// config is the default configuration\nexport default ({ config }) => {\n // This is how you can distinguish the `build` command from the `serve`\n const isBuild = config.mode === 'production';\n\n return {\n ...config,\n module: {\n rules: [\n {\n /* extra rule */\n },\n ...config.module.rules,\n ],\n },\n };\n};\n```\n\n## Generic CLI usage\n\nShow all available commands\n\n```sh\ngrapesjs-cli\n```\n\nShow available options for a command\n\n```sh\ngrapesjs-cli COMMAND --help\n```\n\nRun the command\n\n```sh\ngrapesjs-cli COMMAND --OPT1 --OPT2=VALUE\n```\n\n## License\n\nMIT\n","isInternal":false,"tokens":818,"sizeBytes":3304},{"name":"README.md","path":"packages/cli/src/template/README.md","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/cli/src/template/README.md","title":"template Documentation","category":"plugin-manifest","format":"markdown","content":"# <%= name %>\n\n## Live Demo\n\n> **Show a live example of your plugin**\n\nTo make your plugin more engaging, create a simple live demo using online tools like [JSFiddle](https://jsfiddle.net), [CodeSandbox](https://codesandbox.io), or [CodePen](https://codepen.io). Include the demo link in your README. Adding a screenshot or GIF of the demo is a bonus.\n\nBelow, you'll find the necessary HTML, CSS, and JavaScript. Copy and paste this code into one of the tools mentioned. Once you're done, delete this section and update the link at the top with your demo.\n\n### HTML\n\n```html\n\n\n\n\n\n```\n\n### JS\n\n```js\nconst editor = grapesjs.init({\n container: '#gjs',\n height: '100%',\n fromElement: true,\n storageManager: false,\n plugins: ['<%= rName %>'],\n});\n```\n\n### CSS\n\n```css\nbody,\nhtml {\n margin: 0;\n height: 100%;\n}\n```\n\n## Summary\n\n- Plugin name: `<%= rName %>`\n- Components\n - `component-id-1`\n - `component-id-2`\n - ...\n- Blocks\n - `block-id-1`\n - `block-id-2`\n - ...\n\n## Options\n\n| Option | Description | Default |\n| --------- | ------------------ | --------------- |\n| `option1` | Description option | `default value` |\n\n## Download\n\n- CDN\n - `https://unpkg.com/<%= rName %>`\n- NPM\n - `npm i <%= rName %>`\n- GIT\n - `git clone https://github.com/<%= user %>/<%= rName %>.git`\n\n## Usage\n\nDirectly in the browser\n\n```html\n\n\n\n\n\n\n\n```\n\nModern javascript\n\n```js\nimport grapesjs from 'grapesjs';\nimport plugin from '<%= rName %>';\nimport 'grapesjs/dist/css/grapes.min.css';\n\nconst editor = grapesjs.init({\n container : '#gjs',\n // ...\n plugins: [plugin],\n pluginsOpts: {\n [plugin]: { /* options */ }\n }\n // or\n plugins: [\n editor => plugin(editor, { /* options */ }),\n ],\n});\n```\n\n## Development\n\nClone the repository\n\n```sh\n$ git clone https://github.com/<%= user %>/<%= rName %>.git\n$ cd <%= rName %>\n```\n\nInstall dependencies\n\n```sh\nnpm i\n```\n\nStart the dev server\n\n```sh\nnpm start\n```\n\nBuild the source\n\n```sh\nnpm run build\n```\n\n## License\n\nMIT\n","isInternal":false,"tokens":742,"sizeBytes":2620},{"name":"README.md","path":"packages/core/README.md","rawUrl":"https://raw.githubusercontent.com/GrapesJS/grapesjs/HEAD/packages/core/README.md","title":"core Documentation","category":"plugin-manifest","format":"markdown","content":"# [GrapesJS](http://grapesjs.com)\n\n[](https://github.com/GrapesJS/grapesjs/actions)\n[](https://discord.gg/QAbgGXq)\n[](https://cdnjs.com/libraries/grapesjs)\n[](https://www.npmjs.com/package/grapesjs)\n\n> If you looking to embed the [Studio](https://app.grapesjs.com/studio) editor in your application, we now offer the [Studio SDK](https://app.grapesjs.com/dashboard/sdk/licenses?ref=repo-readme), a ready-to-use visual builder that's easy to embed in external applications, with GrapesJS team support included.\n\n
\n\nGrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a [CMS] to speed up the creation of dynamic templates. To better understand this concept check the image below\n\n \n
\n \n\nGenerally any 'template system', that you'd find in various applications like CMS, is composed by the **structure** (HTML), **style** (CSS) and **variables**, which are then replaced with other templates and contents on server-side and rendered on client.\n\nThis demos show examples of what is possible to achieve: \nWebpage Demo - http://grapesjs.com/demo.html \nNewsletter Demo - http://grapesjs.com/demo-newsletter-editor.html \n\n## Table of contents\n\n- [Features](#features)\n- [Download](#download)\n- [Usage](#usage)\n- [Development](#development)\n- [Documentation](#documentation)\n- [API](#api)\n- [Testing](#testing)\n- [Plugins](#plugins)\n- [Support](#support)\n- [Changelog](https://github.com/GrapesJS/grapesjs/releases)\n- [Contributing](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md)\n- [License](#license)\n\n## Features\n\n| Blocks | Style Manager | Layer Manager |\n| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| | | |\n\n| Code Viewer | Asset Manager |\n| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| | |\n\n- Local and remote storage\n\n- Default built-in commands (basically for creating and managing different components)\n\n## Download\n\n- CDNs\n - UNPKG (resolves to the latest version)\n - `https://unpkg.com/grapesjs`\n - `https://unpkg.com/grapesjs/dist/css/grapes.min.css`\n - CDNJS (replace `X.X.X` with the current version)\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js`\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css`\n- NPM\n - `npm i grapesjs`\n- GIT\n - `git clone https://github.com/GrapesJS/grapesjs.git`\n\nFor the development purpose you should follow instructions below.\n\n## Usage\n\n```html\n\n\n\n\n\n\n```\n\nFor a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html\n\n## Development\n\nFollow the [Contributing Guide](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md).\n\n## Documentation\n\nCheck the getting started guide here: [Documentation]\n\n## API\n\nAPI References could be found here: [API-Reference]\n\n## Testing\n\n```sh\n$ pnpm test\n```\n\n## Plugins\n\n[Official Plugins](https://github.com/orgs/GrapesJS/repositories?q=-repo%3Agrapesjs%2Fgrapesjs&type=source) | [Community Plugins](https://github.com/topics/grapesjs-plugin)\n\n### Wrappers\n\n- [@grapesjs/react](https://github.com/GrapesJS/react) - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.\n\n### Extensions\n\n- [@grapesjs/webmcp](https://github.com/GrapesJS/grapesjs/tree/dev/packages/webmcp) - Expose the editor API as WebMCP tools for browser AI agents\n- [grapesjs-plugin-export](https://github.com/GrapesJS/export) - Export GrapesJS templates in a zip archive\n- [grapesjs-plugin-filestack](https://github.com/GrapesJS/filestack) - Add Filestack uploader in Asset Manager\n- [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor) - Replaces the built-in RTE with CKEditor\n- [grapesjs-tui-image-editor](https://github.com/GrapesJS/tui-image-editor) - GrapesJS TOAST UI Image Editor\n- [grapesjs-blocks-basic](https://github.com/GrapesJS/blocks-basic) - Basic set of blocks\n- [grapesjs-plugin-forms](https://github.com/GrapesJS/components-forms) - Set of form components and blocks\n- [grapesjs-navbar](https://github.com/GrapesJS/components-navbar) - Simple navbar component\n- [grapesjs-component-countdown](https://github.com/GrapesJS/components-countdown) - Simple countdown component\n- [grapesjs-style-gradient](https://github.com/GrapesJS/style-gradient) - Add `gradient` type input to the Style Manager\n- [grapesjs-style-filter](https://github.com/GrapesJS/style-filter) - Add `filter` type input to the Style Manager\n- [grapesjs-style-bg](https://github.com/GrapesJS/style-bg) - Full-stack background style property type, with the possibility to add images, colors, and gradients\n- [grapesjs-blocks-flexbox](https://github.com/GrapesJS/blocks-flexbox) - Add the flexbox block\n- [grapesjs-lory-slider](https://github.com/GrapesJS/components-lory) - Slider component by using [lory](https://github.com/meandmax/lory)\n- [grapesjs-tabs](https://github.com/GrapesJS/components-tabs) - Simple tabs component\n- [grapesjs-tooltip](https://github.com/GrapesJS/components-tooltip) - Simple, CSS only, tooltip component for GrapesJS\n- [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) - Embed custom code\n- [grapesjs-touch](https://github.com/GrapesJS/touch) - Enable touch support\n- [grapesjs-indexeddb](https://github.com/GrapesJS/storage-indexeddb) - Storage wrapper for IndexedDB\n- [grapesjs-firestore](https://github.com/GrapesJS/storage-firestore) - Storage wrapper for [Cloud Firestore](https://firebase.google.com/docs/firestore)\n- [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Custom CSS parser for GrapesJS by using [PostCSS](https://github.com/postcss/postcss)\n- [grapesjs-typed](https://github.com/GrapesJS/components-typed) - Typed component made by wrapping Typed.js library\n- [grapesjs-ui-suggest-classes](https://github.com/silexlabs/grapesjs-ui-suggest-classes) - Enable auto-complete of classes in the SelectorManager UI\n- [grapesjs-fonts](https://github.com/silexlabs/grapesjs-fonts) - Custom Fonts plugin, adds a UI to manage fonts in websites\n- [grapesjs-symbols](https://github.com/silexlabs/grapesjs-symbols) - Symbols plugin to reuse elements in a website and accross pages\n- [grapesjs-click](https://github.com/bgrand-ch/grapesjs-click) - Grab and drop blocks and components with click (no more drag-and-drop)\n- [grapesjs-float](https://github.com/bgrand-ch/grapesjs-float) - Anchor a floating element next to another element (selected component, ...)\n\n### Presets\n\n- [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - Webpage Builder\n- [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - Newsletter Builder\n- [grapesjs-mjml](https://github.com/GrapesJS/mjml) - Newsletter Builder with MJML components\n\nFind out more about plugins here: [Creating plugins](https://grapesjs.com/docs/modules/Plugins.html)\n\n## Support\n\nIf you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via [Open Collective](https://opencollective.com/grapesjs)\n\n[](https://paypal.me/grapesjs)\n[](https://commerce.coinbase.com/checkout/fc90b940-558d-408b-a166-28a823c98173)\n\n\n\n\n \n\n[](https://www.browserstack.com) \nThanks to [BrowserStack](https://www.browserstack.com) for providing us browser testing services\n\n## License\n\nBSD 3-clause\n\n[Documentation]: https://grapesjs.com/docs/\n[API-Reference]: https://grapesjs.com/docs/api/\n[CMS]: https://en.wikipedia.org/wiki/Content_management_system\n","isInternal":false,"tokens":2656,"sizeBytes":10859}],"systemPromptSnippet":"\n\n{\n \"name\": \"grapesjs-cli\",\n \"version\": \"4.1.3\",\n \"description\": \"GrapesJS CLI tool for the plugin development\",\n \"bin\": {\n \"grapesjs-cli\": \"dist/cli.js\"\n },\n \"files\": [\n \"dist\"\n ],\n \"scripts\": {\n \"build\": \"cross-env BUILD_MODE=production webpack --config ./webpack.cli.ts\",\n \"build:watch\": \"webpack --config ./webpack.cli.ts --watch\",\n \"lint\": \"eslint src\",\n \"patch\": \"npm version patch -m 'Bump v%s'\",\n \"test\": \"jest\"\n },\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GrapesJS/grapesjs.git\"\n },\n \"keywords\": [\n \"grapesjs\",\n \"plugin\",\n \"dev\",\n \"cli\"\n ],\n \"author\": \"Artur Arseniev\",\n \"license\": \"BSD-3-Clause\",\n \"dependencies\": {\n \"@babel/core\": \"7.25.2\",\n \"@babel/plugin-transform-runtime\": \"7.26.10\",\n \"@babel/preset-env\": \"7.25.4\",\n \"@babel/runtime\": \"7.25.6\",\n \"babel-loader\": \"9.1.3\",\n \"chalk\": \"^4.1.2\",\n \"core-js\": \"3.38.1\",\n \"dts-bundle-generator\": \"^8.0.1\",\n \"html-webpack-plugin\": \"5.6.3\",\n \"inquirer\": \"^8.2.5\",\n \"listr\": \"^0.14.3\",\n \"lodash.template\": \"^4.18.1\",\n \"rimraf\": \"^4.1.2\",\n \"spdx-license-list\": \"^6.6.0\",\n \"terser-webpack-plugin\": \"^5.3.14\",\n \"webpack\": \"5.94.0\",\n \"webpack-cli\": \"5.1.4\",\n \"webpack-dev-server\": \"5.2.4\",\n \"yargs\": \"^17.6.2\"\n },\n \"devDependencies\": {\n \"@types/webpack-node-externals\": \"^3.0.0\",\n \"copy-webpack-plugin\": \"^11.0.0\",\n \"fork-ts-checker-webpack-plugin\": \"^8.0.0\",\n \"webpack-node-externals\": \"^3.0.0\"\n }\n}\n\n\n{\n \"name\": \"<%= rName %>\",\n \"version\": \"1.0.0\",\n \"description\": \"<%= name %>\",\n \"main\": \"dist/index.js\",\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/<%= user %>/<%= rName %>.git\"\n },\n \"scripts\": {\n \"start\": \"grapesjs-cli serve\",\n \"build\": \"grapesjs-cli build\",\n \"bump\": \"npm version patch -m 'Bump v%s'\"\n },\n \"keywords\": [\n \"grapesjs\",\n \"plugin\"\n ],\n \"devDependencies\": {\n \"grapesjs-cli\": \"^<%= version %>\"\n },\n \"license\": \"<%= license %>\"\n}\n\n\n{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"allowJs\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": false\n },\n \"include\": [\"src\"]\n}\n\n\n{\n \"compilerOptions\": {\n \"allowJs\": true,\n \"noImplicitThis\": true,\n \"moduleResolution\": \"node\",\n \"noUnusedLocals\": true,\n \"allowUnreachableCode\": false,\n \"module\": \"commonjs\",\n \"target\": \"es2016\",\n \"outDir\": \"dist\",\n \"esModuleInterop\": true,\n \"declaration\": true,\n \"noImplicitReturns\": false,\n \"noImplicitAny\": false,\n \"strictNullChecks\": false,\n \"resolveJsonModule\": true,\n \"emitDecoratorMetadata\": true,\n \"experimentalDecorators\": true\n },\n \"include\": [\"src/cli.ts\"]\n}\n\n\n{\n \"name\": \"grapesjs\",\n \"description\": \"Free and Open Source Web Builder Framework\",\n \"version\": \"0.23.9\",\n \"author\": \"Artur Arseniev\",\n \"license\": \"BSD-3-Clause\",\n \"homepage\": \"http://grapesjs.com\",\n \"main\": \"dist/grapes.min.js\",\n \"types\": \"dist/index.d.ts\",\n \"module\": \"dist/grapes.mjs\",\n \"exports\": {\n \".\": {\n \"import\": \"./dist/grapes.mjs\",\n \"require\": \"./dist/grapes.min.js\",\n \"types\": \"./dist/index.d.ts\"\n },\n \"./*\": \"./*\"\n },\n \"files\": [\n \"dist\",\n \"locale\",\n \"src/styles\"\n ],\n \"sideEffects\": [\n \"*.css\",\n \"*.scss\"\n ],\n \"repository\": {\n \"type\": \"git\",\n \"url\": \"https://github.com/GrapesJS/grapesjs.git\"\n },\n \"dependencies\": {\n \"@types/backbone\": \"1.4.15\",\n \"backbone\": \"1.4.1\",\n \"codemirror\": \"5.63.0\",\n \"codemirror-formatting\": \"1.0.0\",\n \"underscore\": \"1.13.8\"\n },\n \"devDependencies\": {\n \"@types/markdown-it\": \"14.1.2\",\n \"@types/pretty\": \"^2.0.3\",\n \"grapesjs-cli\": \"workspace:^\",\n \"jest-environment-jsdom\": \"30.4.1\",\n \"jsdom\": \"27.4.0\",\n \"npm-run-all\": \"4.1.5\",\n \"postcss\": \"8\",\n \"pretty\": \"2.0.0\",\n \"sass\": \"1.80.3\"\n },\n \"keywords\": [\n \"grapes\",\n \"grapesjs\",\n \"wysiwyg\",\n \"web\",\n \"template\",\n \"editor\",\n \"newsletter\",\n \"site\",\n \"builder\"\n ],\n \"scripts\": {\n \"prepublishOnly\": \"ts-node ../../scripts/checkCorePackage.ts\",\n \"build\": \"npm run build-all\",\n \"build-all\": \"run-s build:*\",\n \"build:js\": \"node node_modules/grapesjs-cli/dist/cli.js build --patch=false --targets=\\\"defaults\\\" --statsOutput=\\\"stats.json\\\" --localePath=\\\"src/i18n/locale\\\"\",\n \"build:mjs\": \"cross-env BUILD_MODULE=true node node_modules/grapesjs-cli/dist/cli.js build --dts='skip' --patch=false --targets=\\\"defaults\\\"\",\n \"build:css\": \"sass src/styles/scss/main.scss dist/css/grapes.min.css --no-source-map --style=compressed --load-path=node_modules\",\n \"ts:build\": \"node node_modules/grapesjs-cli/dist/cli.js build --dts='only' --patch=false\",\n \"ts:check\": \"tsc --noEmit --esModuleInterop dist/index.d.ts\",\n \"start\": \"cross-env NODE_ENV=development run-p start:*\",\n \"start:js\": \"node node_modules/grapesjs-cli/dist/cli.js serve\",\n \"start:css\": \"npm run build:css -- --watch\",\n \"test\": \"jest --forceExit\",\n \"test:dev\": \"jest --watch\"\n }\n}\n\n\n{\n \"compilerOptions\": {\n \"target\": \"es5\",\n \"lib\": [\"dom\", \"dom.iterable\", \"esnext\"],\n \"types\": [\"jest\", \"node\"],\n \"allowJs\": true,\n \"sourceMap\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowSyntheticDefaultImports\": true,\n \"strict\": true,\n \"forceConsistentCasingInFileNames\": true,\n \"noFallthroughCasesInSwitch\": true,\n \"module\": \"esnext\",\n \"moduleResolution\": \"node\",\n \"resolveJsonModule\": true,\n \"isolatedModules\": true,\n \"noEmit\": false,\n \"outDir\": \"./dist\"\n },\n \"include\": [\"src\", \"test\"]\n}\n\n\n# GrapesJS CLI\n\n[](https://www.npmjs.com/package/grapesjs-cli)\n\n\n\nA simple CLI library for helping in GrapesJS plugin development.\n\nThe goal of this package is to avoid the hassle of setting up all the dependencies and configurations for the plugin development by centralizing and speeding up the necessary steps during the process.\n\n- Fast project scaffolding\n- No need to touch Babel and Webpack configurations\n\n## Plugin from 0 to 100\n\nCreate a production-ready plugin in a few simple steps.\n\n- Create a folder for your plugin and init some preliminary steps\n\n```sh\nmkdir grapesjs-my-plugin\ncd grapesjs-my-plugin\nnpm init -y\ngit init\n```\n\n- Install the package\n\n```sh\nnpm i -D grapesjs-cli\n```\n\n- Init your plugin project by following few steps\n\n```sh\nnpx grapesjs-cli init\n```\n\nYou can also skip all the questions with `-y` option or pass all the answers via options (to see all available options run `npx grapesjs-cli init --help`)\n\n```sh\nnpx grapesjs-cli init -y --user=YOUR-GITHUB-USERNAME\n```\n\n- The command will scaffold the `src` directory and a bunch of other files inside your project. The `src/index.js` will be the entry point of your plugin. Before starting developing your plugin run the development server and open the printed URL (eg. the default is http://localhost:8080)\n\n```sh\nnpx grapesjs-cli serve\n```\n\nIf you need a custom port use the `-p` option\n\n```sh\nnpx grapesjs-cli serve -p 8081\n```\n\nUnder the hood we use `webpack-dev-server` and you can pass its option via CLI in this way\n\n```sh\nnpx grapesjs-cli serve --devServer='{\"https\": true}'\n```\n\n- Once the development is finished you can build your plugin and generate the minified file ready for production\n\n```sh\nnpx grapesjs-cli build\n```\n\n- Before publishing your package remember to complete your README.md file with all the available options, components, blocks and so on.\n For a better user engagement create a simple live demo by using services like [JSFiddle](https://jsfiddle.net) [CodeSandbox](https://codesandbox.io) [CodePen](https://codepen.io) and link it in your README. To help you in this process we'll print all the necessary HTML/CSS/JS in your README, so it will be just a matter of copy-pasting on some of those services.\n\n## Customization\n\n### Customize webpack config\n\nIf you need to customize the webpack configuration, you can create `webpack.config.js` file in the root dir of your project and export a function, which should return the new configuration object. Check the example below.\n\n```js\n// YOUR-PROJECT-DIR/webpack.config.js\n\n// config is the default configuration\nexport default ({ config }) => {\n // This is how you can distinguish the `build` command from the `serve`\n const isBuild = config.mode === 'production';\n\n return {\n ...config,\n module: {\n rules: [\n {\n /* extra rule */\n },\n ...config.module.rules,\n ],\n },\n };\n};\n```\n\n## Generic CLI usage\n\nShow all available commands\n\n```sh\ngrapesjs-cli\n```\n\nShow available options for a command\n\n```sh\ngrapesjs-cli COMMAND --help\n```\n\nRun the command\n\n```sh\ngrapesjs-cli COMMAND --OPT1 --OPT2=VALUE\n```\n\n## License\n\nMIT\n\n\n# <%= name %>\n\n## Live Demo\n\n> **Show a live example of your plugin**\n\nTo make your plugin more engaging, create a simple live demo using online tools like [JSFiddle](https://jsfiddle.net), [CodeSandbox](https://codesandbox.io), or [CodePen](https://codepen.io). Include the demo link in your README. Adding a screenshot or GIF of the demo is a bonus.\n\nBelow, you'll find the necessary HTML, CSS, and JavaScript. Copy and paste this code into one of the tools mentioned. Once you're done, delete this section and update the link at the top with your demo.\n\n### HTML\n\n```html\n\n\n\n\n\n```\n\n### JS\n\n```js\nconst editor = grapesjs.init({\n container: '#gjs',\n height: '100%',\n fromElement: true,\n storageManager: false,\n plugins: ['<%= rName %>'],\n});\n```\n\n### CSS\n\n```css\nbody,\nhtml {\n margin: 0;\n height: 100%;\n}\n```\n\n## Summary\n\n- Plugin name: `<%= rName %>`\n- Components\n - `component-id-1`\n - `component-id-2`\n - ...\n- Blocks\n - `block-id-1`\n - `block-id-2`\n - ...\n\n## Options\n\n| Option | Description | Default |\n| --------- | ------------------ | --------------- |\n| `option1` | Description option | `default value` |\n\n## Download\n\n- CDN\n - `https://unpkg.com/<%= rName %>`\n- NPM\n - `npm i <%= rName %>`\n- GIT\n - `git clone https://github.com/<%= user %>/<%= rName %>.git`\n\n## Usage\n\nDirectly in the browser\n\n```html\n\n\n\n\n\n\n\n```\n\nModern javascript\n\n```js\nimport grapesjs from 'grapesjs';\nimport plugin from '<%= rName %>';\nimport 'grapesjs/dist/css/grapes.min.css';\n\nconst editor = grapesjs.init({\n container : '#gjs',\n // ...\n plugins: [plugin],\n pluginsOpts: {\n [plugin]: { /* options */ }\n }\n // or\n plugins: [\n editor => plugin(editor, { /* options */ }),\n ],\n});\n```\n\n## Development\n\nClone the repository\n\n```sh\n$ git clone https://github.com/<%= user %>/<%= rName %>.git\n$ cd <%= rName %>\n```\n\nInstall dependencies\n\n```sh\nnpm i\n```\n\nStart the dev server\n\n```sh\nnpm start\n```\n\nBuild the source\n\n```sh\nnpm run build\n```\n\n## License\n\nMIT\n\n\n# [GrapesJS](http://grapesjs.com)\n\n[](https://github.com/GrapesJS/grapesjs/actions)\n[](https://discord.gg/QAbgGXq)\n[](https://cdnjs.com/libraries/grapesjs)\n[](https://www.npmjs.com/package/grapesjs)\n\n> If you looking to embed the [Studio](https://app.grapesjs.com/studio) editor in your application, we now offer the [Studio SDK](https://app.grapesjs.com/dashboard/sdk/licenses?ref=repo-readme), a ready-to-use visual builder that's easy to embed in external applications, with GrapesJS team support included.\n\n
\n\nGrapesJS is a free and open source Web Builder Framework which helps building HTML templates, faster and easily, to be delivered in sites, newsletters or mobile apps. Mainly, GrapesJS was designed to be used inside a [CMS] to speed up the creation of dynamic templates. To better understand this concept check the image below\n\n \n
\n \n\nGenerally any 'template system', that you'd find in various applications like CMS, is composed by the **structure** (HTML), **style** (CSS) and **variables**, which are then replaced with other templates and contents on server-side and rendered on client.\n\nThis demos show examples of what is possible to achieve: \nWebpage Demo - http://grapesjs.com/demo.html \nNewsletter Demo - http://grapesjs.com/demo-newsletter-editor.html \n\n## Table of contents\n\n- [Features](#features)\n- [Download](#download)\n- [Usage](#usage)\n- [Development](#development)\n- [Documentation](#documentation)\n- [API](#api)\n- [Testing](#testing)\n- [Plugins](#plugins)\n- [Support](#support)\n- [Changelog](https://github.com/GrapesJS/grapesjs/releases)\n- [Contributing](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md)\n- [License](#license)\n\n## Features\n\n| Blocks | Style Manager | Layer Manager |\n| ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| | | |\n\n| Code Viewer | Asset Manager |\n| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| | |\n\n- Local and remote storage\n\n- Default built-in commands (basically for creating and managing different components)\n\n## Download\n\n- CDNs\n - UNPKG (resolves to the latest version)\n - `https://unpkg.com/grapesjs`\n - `https://unpkg.com/grapesjs/dist/css/grapes.min.css`\n - CDNJS (replace `X.X.X` with the current version)\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js`\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css`\n- NPM\n - `npm i grapesjs`\n- GIT\n - `git clone https://github.com/GrapesJS/grapesjs.git`\n\nFor the development purpose you should follow instructions below.\n\n## Usage\n\n```html\n\n\n\n\n\n\n```\n\nFor a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html\n\n## Development\n\nFollow the [Contributing Guide](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md).\n\n## Documentation\n\nCheck the getting started guide here: [Documentation]\n\n## API\n\nAPI References could be found here: [API-Reference]\n\n## Testing\n\n```sh\n$ pnpm test\n```\n\n## Plugins\n\n[Official Plugins](https://github.com/orgs/GrapesJS/repositories?q=-repo%3Agrapesjs%2Fgrapesjs&type=source) | [Community Plugins](https://github.com/topics/grapesjs-plugin)\n\n### Wrappers\n\n- [@grapesjs/react](https://github.com/GrapesJS/react) - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.\n\n### Extensions\n\n- [@grapesjs/webmcp](https://github.com/GrapesJS/grapesjs/tree/dev/packages/webmcp) - Expose the editor API as WebMCP tools for browser AI agents\n- [grapesjs-plugin-export](https://github.com/GrapesJS/export) - Export GrapesJS templates in a zip archive\n- [grapesjs-plugin-filestack](https://github.com/GrapesJS/filestack) - Add Filestack uploader in Asset Manager\n- [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor) - Replaces the built-in RTE with CKEditor\n- [grapesjs-tui-image-editor](https://github.com/GrapesJS/tui-image-editor) - GrapesJS TOAST UI Image Editor\n- [grapesjs-blocks-basic](https://github.com/GrapesJS/blocks-basic) - Basic set of blocks\n- [grapesjs-plugin-forms](https://github.com/GrapesJS/components-forms) - Set of form components and blocks\n- [grapesjs-navbar](https://github.com/GrapesJS/components-navbar) - Simple navbar component\n- [grapesjs-component-countdown](https://github.com/GrapesJS/components-countdown) - Simple countdown component\n- [grapesjs-style-gradient](https://github.com/GrapesJS/style-gradient) - Add `gradient` type input to the Style Manager\n- [grapesjs-style-filter](https://github.com/GrapesJS/style-filter) - Add `filter` type input to the Style Manager\n- [grapesjs-style-bg](https://github.com/GrapesJS/style-bg) - Full-stack background style property type, with the possibility to add images, colors, and gradients\n- [grapesjs-blocks-flexbox](https://github.com/GrapesJS/blocks-flexbox) - Add the flexbox block\n- [grapesjs-lory-slider](https://github.com/GrapesJS/components-lory) - Slider component by using [lory](https://github.com/meandmax/lory)\n- [grapesjs-tabs](https://github.com/GrapesJS/components-tabs) - Simple tabs component\n- [grapesjs-tooltip](https://github.com/GrapesJS/components-tooltip) - Simple, CSS only, tooltip component for GrapesJS\n- [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) - Embed custom code\n- [grapesjs-touch](https://github.com/GrapesJS/touch) - Enable touch support\n- [grapesjs-indexeddb](https://github.com/GrapesJS/storage-indexeddb) - Storage wrapper for IndexedDB\n- [grapesjs-firestore](https://github.com/GrapesJS/storage-firestore) - Storage wrapper for [Cloud Firestore](https://firebase.google.com/docs/firestore)\n- [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Custom CSS parser for GrapesJS by using [PostCSS](https://github.com/postcss/postcss)\n- [grapesjs-typed](https://github.com/GrapesJS/components-typed) - Typed component made by wrapping Typed.js library\n- [grapesjs-ui-suggest-classes](https://github.com/silexlabs/grapesjs-ui-suggest-classes) - Enable auto-complete of classes in the SelectorManager UI\n- [grapesjs-fonts](https://github.com/silexlabs/grapesjs-fonts) - Custom Fonts plugin, adds a UI to manage fonts in websites\n- [grapesjs-symbols](https://github.com/silexlabs/grapesjs-symbols) - Symbols plugin to reuse elements in a website and accross pages\n- [grapesjs-click](https://github.com/bgrand-ch/grapesjs-click) - Grab and drop blocks and components with click (no more drag-and-drop)\n- [grapesjs-float](https://github.com/bgrand-ch/grapesjs-float) - Anchor a floating element next to another element (selected component, ...)\n\n### Presets\n\n- [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - Webpage Builder\n- [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - Newsletter Builder\n- [grapesjs-mjml](https://github.com/GrapesJS/mjml) - Newsletter Builder with MJML components\n\nFind out more about plugins here: [Creating plugins](https://grapesjs.com/docs/modules/Plugins.html)\n\n## Support\n\nIf you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via [Open Collective](https://opencollective.com/grapesjs)\n\n[](https://paypal.me/grapesjs)\n[](https://commerce.coinbase.com/checkout/fc90b940-558d-408b-a166-28a823c98173)\n\n\n\n\n \n\n[](https://www.browserstack.com) \nThanks to [BrowserStack](https://www.browserstack.com) for providing us browser testing services\n\n## License\n\nBSD 3-clause\n\n[Documentation]: https://grapesjs.com/docs/\n[API-Reference]: https://grapesjs.com/docs/api/\n[CMS]: https://en.wikipedia.org/wiki/Content_management_system\n"}
![\"GrapesJS\"](\"http://grapesjs.com/assets/images/grapesjs-front-page-m.jpg\")
![\"GrapesJS](\"http://grapesjs.com/assets/images/gjs-concept.png\")
![\"GrapesJS](\"http://grapesjs.com/assets/images/sc-grapesjs-blocks-prp.jpg\")
| ![\"GrapesJS](\"http://grapesjs.com/assets/images/sc-grapesjs-style-2.jpg\")
| ![\"GrapesJS](\"http://grapesjs.com/assets/images/sc-grapesjs-layers-2.jpg\")
|\n\n| Code Viewer | Asset Manager |\n| -------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |\n| ![\"GrapesJS](\"http://grapesjs.com/assets/images/sc-grapesjs-code.jpg\")
| ![\"GrapesJS](\"http://grapesjs.com/assets/images/sc-grapesjs-assets-1.jpg\")
|\n\n- Local and remote storage\n\n- Default built-in commands (basically for creating and managing different components)\n\n## Download\n\n- CDNs\n - UNPKG (resolves to the latest version)\n - `https://unpkg.com/grapesjs`\n - `https://unpkg.com/grapesjs/dist/css/grapes.min.css`\n - CDNJS (replace `X.X.X` with the current version)\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/grapes.min.js`\n - `https://cdnjs.cloudflare.com/ajax/libs/grapesjs/X.X.X/css/grapes.min.css`\n- NPM\n - `npm i grapesjs`\n- GIT\n - `git clone https://github.com/GrapesJS/grapesjs.git`\n\nFor the development purpose you should follow instructions below.\n\n## Usage\n\n```html\n\n\n\n\n\n\n```\n\nFor a more practical example I'd suggest looking up the code inside this demo: http://grapesjs.com/demo.html\n\n## Development\n\nFollow the [Contributing Guide](https://github.com/GrapesJS/grapesjs/blob/dev/CONTRIBUTING.md).\n\n## Documentation\n\nCheck the getting started guide here: [Documentation]\n\n## API\n\nAPI References could be found here: [API-Reference]\n\n## Testing\n\n```sh\n$ pnpm test\n```\n\n## Plugins\n\n[Official Plugins](https://github.com/orgs/GrapesJS/repositories?q=-repo%3Agrapesjs%2Fgrapesjs&type=source) | [Community Plugins](https://github.com/topics/grapesjs-plugin)\n\n### Wrappers\n\n- [@grapesjs/react](https://github.com/GrapesJS/react) - GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.\n\n### Extensions\n\n- [@grapesjs/webmcp](https://github.com/GrapesJS/grapesjs/tree/dev/packages/webmcp) - Expose the editor API as WebMCP tools for browser AI agents\n- [grapesjs-plugin-export](https://github.com/GrapesJS/export) - Export GrapesJS templates in a zip archive\n- [grapesjs-plugin-filestack](https://github.com/GrapesJS/filestack) - Add Filestack uploader in Asset Manager\n- [grapesjs-plugin-ckeditor](https://github.com/GrapesJS/ckeditor) - Replaces the built-in RTE with CKEditor\n- [grapesjs-tui-image-editor](https://github.com/GrapesJS/tui-image-editor) - GrapesJS TOAST UI Image Editor\n- [grapesjs-blocks-basic](https://github.com/GrapesJS/blocks-basic) - Basic set of blocks\n- [grapesjs-plugin-forms](https://github.com/GrapesJS/components-forms) - Set of form components and blocks\n- [grapesjs-navbar](https://github.com/GrapesJS/components-navbar) - Simple navbar component\n- [grapesjs-component-countdown](https://github.com/GrapesJS/components-countdown) - Simple countdown component\n- [grapesjs-style-gradient](https://github.com/GrapesJS/style-gradient) - Add `gradient` type input to the Style Manager\n- [grapesjs-style-filter](https://github.com/GrapesJS/style-filter) - Add `filter` type input to the Style Manager\n- [grapesjs-style-bg](https://github.com/GrapesJS/style-bg) - Full-stack background style property type, with the possibility to add images, colors, and gradients\n- [grapesjs-blocks-flexbox](https://github.com/GrapesJS/blocks-flexbox) - Add the flexbox block\n- [grapesjs-lory-slider](https://github.com/GrapesJS/components-lory) - Slider component by using [lory](https://github.com/meandmax/lory)\n- [grapesjs-tabs](https://github.com/GrapesJS/components-tabs) - Simple tabs component\n- [grapesjs-tooltip](https://github.com/GrapesJS/components-tooltip) - Simple, CSS only, tooltip component for GrapesJS\n- [grapesjs-custom-code](https://github.com/GrapesJS/components-custom-code) - Embed custom code\n- [grapesjs-touch](https://github.com/GrapesJS/touch) - Enable touch support\n- [grapesjs-indexeddb](https://github.com/GrapesJS/storage-indexeddb) - Storage wrapper for IndexedDB\n- [grapesjs-firestore](https://github.com/GrapesJS/storage-firestore) - Storage wrapper for [Cloud Firestore](https://firebase.google.com/docs/firestore)\n- [grapesjs-parser-postcss](https://github.com/GrapesJS/parser-postcss) - Custom CSS parser for GrapesJS by using [PostCSS](https://github.com/postcss/postcss)\n- [grapesjs-typed](https://github.com/GrapesJS/components-typed) - Typed component made by wrapping Typed.js library\n- [grapesjs-ui-suggest-classes](https://github.com/silexlabs/grapesjs-ui-suggest-classes) - Enable auto-complete of classes in the SelectorManager UI\n- [grapesjs-fonts](https://github.com/silexlabs/grapesjs-fonts) - Custom Fonts plugin, adds a UI to manage fonts in websites\n- [grapesjs-symbols](https://github.com/silexlabs/grapesjs-symbols) - Symbols plugin to reuse elements in a website and accross pages\n- [grapesjs-click](https://github.com/bgrand-ch/grapesjs-click) - Grab and drop blocks and components with click (no more drag-and-drop)\n- [grapesjs-float](https://github.com/bgrand-ch/grapesjs-float) - Anchor a floating element next to another element (selected component, ...)\n\n### Presets\n\n- [grapesjs-preset-webpage](https://github.com/GrapesJS/preset-webpage) - Webpage Builder\n- [grapesjs-preset-newsletter](https://github.com/GrapesJS/preset-newsletter) - Newsletter Builder\n- [grapesjs-mjml](https://github.com/GrapesJS/mjml) - Newsletter Builder with MJML components\n\nFind out more about plugins here: [Creating plugins](https://grapesjs.com/docs/modules/Plugins.html)\n\n## Support\n\nIf you like the project and you wish to see it grow, please consider supporting us with a donation of your choice or become a backer/sponsor via [Open Collective](https://opencollective.com/grapesjs)\n\n[](https://paypal.me/grapesjs)\n[](https://commerce.coinbase.com/checkout/fc90b940-558d-408b-a166-28a823c98173)\n\n![](\"https://opencollective.com/grapesjs/tiers/sponsors.svg?avatarHeight=64\")
\n![](\"https://opencollective.com/grapesjs/tiers/backers.svg?avatarHeight=64\")
\n\n