<p data-start="295" data-end="675">GrapesJS-DevFuture is a modern, customizable preset built on top of the GrapesJS web builder framework, designed to accelerate template development while maintaining clean architecture, performance, and scalability. The preset extends the core editor with curated styles, UI improvements, and ready-to-use plugin integrations to help teams build production-ready templates faster.</p>
<p data-start="677" data-end="1126">Built by DevFuture, this preset focuses on delivering a consistent design system and optimized development workflow. It combines updated editor core compatibility, structured preset styling, and modular plugin support &mdash; allowing developers to easily extend functionality or adapt the editor to specific project requirements. The project is part of the DevFuture ecosystem of GrapesJS tools and customizations.</p>
<p data-start="1128" data-end="1174">The latest iterations of the preset emphasize:</p>
<ul data-start="1176" data-end="1589">
<li data-start="1176" data-end="1285">
<p data-start="1178" data-end="1285">Updated compatibility with newer GrapesJS core versions to ensure stability and long-term maintainability</p>
</li>
<li data-start="1286" data-end="1397">
<p data-start="1288" data-end="1397">Optimized plugin loading and updated dependency references for better performance and faster initialization</p>
</li>
<li data-start="1398" data-end="1493">
<p data-start="1400" data-end="1493">Refined preset styling for a more cohesive UI and consistent visual system across templates</p>
</li>
<li data-start="1494" data-end="1589">
<p data-start="1496" data-end="1589">Extended design control through DevFuture plugins such as border and UI customization tools</p>
</li>
</ul>
<p data-start="1591" data-end="1853">The preset builds on the extensibility philosophy of GrapesJS, where functionality is expanded through plugins executed during editor initialization, enabling clean separation between core editor logic and custom features.</p>
<p data-start="1591" data-end="1853">GrapesJS itself is an open-source web builder framework created to simplify building HTML templates for websites, newsletters, and applications, and is widely used inside CMS and template systems to accelerate visual content creation workflows.</p>
<p data-start="1591" data-end="1853">DevFuture tooling, including border-style customization plugins, further enhances editor UI control by allowing customization of visual editor elements such as toolbars, selection outlines, and component UI states.</p>
<p data-start="1591" data-end="1853">Whether you are building a visual builder product, CMS editor, document generator, or template platform, GrapesJS-DevFuture provides a strong foundation with production-ready presets, extensible architecture, and developer-friendly customization patterns.</p>

DevFuture Preset 2.0 — Next-Gen Visual Builder Preset

DevFuture Development

DevFuture

Free

<h3>Development</h3>
<p><strong>git clone </strong><a href="https://github.com/GoodPHP/grapesjs-plugin-ckeditor5.git"><strong>https://github.com/GoodPHP/grapesjs-plugin-ckeditor5.git </strong></a></p>
<p><strong>cd grapesjs-plugin-ckeditor5 </strong></p>
<h3>Install dependencies</h3>
<p><strong>npm i </strong></p>
<h3>Start the dev server</h3>
<p><strong>npm start</strong></p>

CKeditor 5 in Modal

CKeditor 4 integration in RTE

GrapesJS Official

GrapesJS

Webpage Preset

Newsletter Preset

<p>This plugin enables the usage of MJML components inside the GrapesJS environment. MJML components are rendered in real-time using the official v4 compiler (+ some mocks to make it run in the browser), therefore the result is, almost, the same as using the MJML Live Editor.</p>

MJML Preset

<p>Simple navbar component for GrapesJS editor</p>

Plugin Navbar

<p>Add the TOAST UI Image Editor on Image Components in GrapesJS</p>

TOAST UI Image Editor

<p>This plugin adds some of the basic form components and blocks which help in working with forms easier</p>
<p>Available components: <strong>form input textarea select option checkbox radio button label</strong></p>
<p>&nbsp;</p>

Plugin Forms

<p>This plugin contains some basic blocks for the GrapesJS editor</p>

Plugin Basic Blocks

<p>Simple countdown component for GrapesJS Editor</p>

Plugin Countdown

<p>Simple, CSS only, tooltip component for GrapesJS</p>

Plugin Tooltip

<p>This plugin adds the possibility to embed custom code</p>

Сustom Сode

<p>This plugin adds the possibility to export template in a zip archive.</p>

Export Zip

<p>This plugin enables custom CSS parser via PostCSS. If you import templates from HTML/CSS or embed custom codes (eg. by using grapesjs-custom-code plugin) you definitely need to use this one to avoid issues with styles, check here why.</p>

Parser PostCSS

<p>Full-stack background style property type for GrapesJS, with the possibility to add images, colors, and gradients.</p>

Style Bg

<p>This plugins adds a new filter built-in style property which can be used for CSS properties like filter and backdrop-filter.</p>

Style Filter

<p>GrapesJS Typed component made by wrapping Typed.js library</p>

Typed Text

<p>Simple tabs component plugin for GrapesJS</p>

Tabs Component

<p>GrapesJS storage wrapper for Cloud Firestore, flexible, scalable NoSQL cloud database to store and sync data for client/server-side development.</p>
<p>By default, Firebase allows everyone to read/write data inside your DB by knowing the API credentials, which is ok for the first setup and development but, obviously, not for production. To get more about the Firestore security checkout this guide.</p>

Cloud Firestore

<p>IndexedDB storage wrapper for GrapesJS</p>

IndexedDB Storage

<p>This plugin replaces the default file uploader with the one from Filestack</p>

Filestack

<p>A plugin to allow users to edit html and css code on GrapesJS.</p>

Code Editor

Lory Slider

<p>Introducing the Whitener Preset for GrapesJS! This preset is designed to give you a clean, white look for your webpages and newsletters. With this preset, you can easily create stunning designs with full functionality. You'll have access to new positions for components and styles, as well as new styles for CodeMirror. With this preset, you can create beautiful designs with ease.</p>
<p><strong>Updates:</strong></p>
<p>1. New position for Components / Styles</p>
<p>2. New styles</p>
<p>3. New styles for CodeMirror</p>

Whitener Preset GrapesJS

Froala Inline Text Editor

Paid

TinyMCE 8 Inline Text Editor

GrapesJS Inline Text Editor — Compatible with CKEditor 5

<p>Stop fighting GrapesJS's default drag-and-drop. <strong>Placeholder 2.0</strong> replaces the standard grey rectangle with a <strong>live, full-size preview</strong> of the block being dragged — complete with smooth animations, drop-zone highlighting, and full control over the visual feel.</p><p>Your users see exactly what they're placing, exactly where it lands. No more guesswork.</p><hr><h2>What's new in v1.5.0</h2><p>A full rebuild from the ground up — same behavior you loved, modern toolchain underneath:</p><ul><li><strong>TypeScript-first</strong> — full source rewrite with bundled <code>.d.ts</code> declarations for instant autocomplete</li><li><strong>GrapesJS 0.21 + 0.22 support</strong> — works with current releases out of the box</li><li><strong>~8 KB gzipped</strong> — Vite-powered build, half the size of the old Webpack bundle</li><li><strong>10 animation presets</strong> + custom CSS animations</li><li><strong>Custom placeholder mode</strong> — replace the live preview with your own HTML/CSS</li><li><strong>Configurable drop-zone color</strong> (<code>dropZoneColor</code>) — match your brand</li><li><strong>Fine-tuned timings</strong> — <code>flipDurationMs</code>, <code>flipThresholdPx</code>, <code>escapeDispatchDelayMs</code> are now exposed</li><li><strong>Clean teardown</strong> — idempotent <code>destroy()</code> method; no leaked event listeners on <code>editor.destroy()</code></li><li><strong>Option validation</strong> — invalid values fall back to defaults with a clear <code>console.warn</code> instead of silently breaking</li><li><strong>76 unit + integration tests</strong> (Vitest) — battle-tested before every release</li><li><strong>Firefox compatibility fixes</strong> — drag-outside-canvas behavior is now reliable across all major browsers</li><li><strong>GrapesJS Studio SDK compatible</strong> — works inside the Studio editor</li></ul><hr><h2>Features</h2><h3>Live content preview while dragging</h3><p>Forget the default placeholder. Your block is rendered at full size with all its styles applied as you move it — the user sees the actual result, in real time.</p><h3>10 built-in animation presets</h3><p>Pick the feel that matches your editor:</p><table><thead><tr><th>Preset</th><th>Effect</th></tr></thead><tbody><tr><td><code>animation1</code></td><td>Slidein — scale + fade + max-height</td></tr><tr><td><code>animation2</code></td><td>Drop-in — rotate + translate</td></tr><tr><td><code>animation3</code></td><td>Horizontal slide</td></tr><tr><td><code>animation4</code></td><td>Wipe enter — scale wipe</td></tr><tr><td><code>animation5</code></td><td>Pulse — scale pulse</td></tr><tr><td><code>animation6</code></td><td>Fade in up</td></tr><tr><td><code>animation7</code></td><td>Zoom-in soft (cubic-bezier overshoot)</td></tr><tr><td><code>animation8</code></td><td>Flip-in — 3D X-axis flip</td></tr><tr><td><code>animation9</code></td><td>Rotate-in</td></tr><tr><td><code>animation10</code></td><td>Elastic drop — bouncing landing</td></tr></tbody></table><h3>Custom animations</h3><p>Drop in your own <code>@keyframes</code> + <code>.animation</code> CSS — total creative control:</p><pre><code class="language-js">{ customAnimation: ` @keyframes my-anim { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: translateY(0); } } .animation { animation: my-anim 300ms ease-out both; } ` } </code></pre><h3>Custom placeholder block</h3><p>Want a thin drop indicator instead of a live preview? Swap it out:</p><pre><code class="language-js">{ dragPlace: { default: 0, html: { block: 'div', content: '' }, css: 'background: #5C6AC4; height: 4px; width: 100%;', } } </code></pre><h3>Drop-zone highlighting</h3><p>A configurable color outline marks the active drop target — no more "where is this going to land?"</p><h3>Per-component opt-out</h3><p>Some component types (e.g. <code>text</code>) work better with the default placeholder. List them in <code>dragDefault</code> and the plugin steps aside automatically.</p><hr><h2>Quick start</h2><pre><code class="language-sh">npm install grapesjs-plugin-placeholder2 </code></pre><pre><code class="language-ts">import grapesjs from 'grapesjs'; import placeholder from 'grapesjs-plugin-placeholder2'; grapesjs.init({ container: '#gjs', plugins: [placeholder], pluginsOpts: { [placeholder]: { animation: 'animation1', dropZoneColor: '#5C6AC4', dragDefault: ['text'], } } }); </code></pre><p>Also ships as a UMD bundle for plain <code>&lt;script&gt;</code> tag usage.</p><hr><h2>Use cases</h2><ul><li><strong>SaaS page builders</strong> — give your users a premium drag-and-drop feel</li><li><strong>CMS editors</strong> — make content blocks feel tangible</li><li><strong>Email builders</strong> — visualize block placement before drop</li><li><strong>Landing-page tools</strong> — polish the editing UX</li><li><strong>GrapesJS Studio projects</strong> — fully Studio SDK compatible</li></ul><hr><h2>Technical details</h2><ul><li><strong>GrapesJS:</strong><code>^0.21.0 || ^0.22.0</code></li><li><strong>Bundles:</strong> ESM + UMD with rolled-up TypeScript declarations</li><li><strong>Size:</strong> ~8 KB gzipped</li><li><strong>Node:</strong> ≥18 (for development)</li><li><strong>Tested:</strong> 72 Vitest tests + Playwright E2E suite</li></ul><hr><h2>Why upgrade from the old version?</h2><p>If you're using the original Placeholder plugin:</p><ul><li>The old plugin was Webpack 3 + Babel 6 — <strong>no longer compatible with modern toolchains</strong></li><li>No TypeScript, no types, no Studio SDK support</li><li>Hardcoded colors, hardcoded timings, no <code>destroy()</code> method</li><li>Event listeners leaked across editor instances</li></ul><p>v1.5.0 fixes all of this without changing the API surface you know.</p>

Placeholder 2.0 - Premium Drag Experience

<p>Introducing the Borders Color plugin for GrapesJS! This plugin is the perfect solution for anyone looking to customize their GrapesJS projects. With this plugin, you can easily replace the colors for badge, resize, toolbar, selected components, and more. This plugin is easy to install and use, and it will give your projects a unique and professional look. With the Borders Color plugin for GrapesJS, you can take your projects to the next level!</p>

Borders Color

<p>Pages Manager GrapesJS is a powerful plugin for displaying pages. It allows you to easily manage your pages, including adding, removing, copying, renaming, and exporting them to ZIP files (single or all). With Pages Manager GrapesJS, you can quickly and easily create and manage your pages with ease. It also provides a wide range of features, such as page preview, page sorting, page search, and more. With Pages Manager GrapesJS, you can easily create and manage your pages with ease.</p>
<pre><strong>Options:</strong></pre>
<p><strong>appendTo</strong> position for PagesManager able to set to any block in interface appendTo: '.class-div' or '#id-div'</p>
<p><strong>main_name</strong> Name of default page default: main_name: 'Page 1'</p>
<p><strong>default_content</strong> Default HTML to new pages default_content: '&lt;div&gt;New page&lt;/div&gt;'</p>
<p><strong>default_style</strong> Default CSS to new pages default_style: '.class{ color: red; }'</p>
<p><strong>pages_prefix</strong> Default prefix for new pages name, like Page 1, Page 2, Page 3 pages_prefix: 'Page'</p>
<p><strong>exportSingle</strong> Show/hide export for page exportSingle: 1</p>
<p><strong>exportMulti</strong> Show/hide export for all pages exportMulti: 1</p>
<p><strong>nameArchive</strong> Prefix name of archive of all pages nameArchive: 'export-all'</p>
<p><strong>stylesPages</strong> Add css to pages manager, possible to replace exist styles stylesPages: '.text{ color:red; }'</p>

Pages Manager

<p>Users blocks are components that can be added to a web page builder to make it easier for users to create complex layouts. In GrapesJS, custom blocks are essentially templates that users can add to their page with a single click. These templates can contain anything from simple text blocks to complex interactive elements like forms or sliders.</p>
<p>The advantage of using users blocks is that they can save time for both web developers and end-users. Developers can create a library of custom blocks that can be reused across multiple projects, while end-users can easily add pre-designed components to their pages without having to create them from scratch.</p>
<p>Options:</p>
<p>1. Save <strong>remote</strong> or <strong>localstorage</strong>. Remote store hasthe functionality for save/remove/fetch data.</p>
<p>2. Rename button in Blocks Manager.</p>
<p>3. Hide/show the inputs in modal window.</p>

Users Blocks

<p>The Templates Manager is a plugin for GrapesJS that allows users to quickly and easily add pre-designed templates to their web pages. With this plugin, users can choose from a variety of templates and customize them to fit their needs, saving time and effort in the design process. The Templates Manager supports both local and remote data loading, and includes options for customizing the position and appearance of the templates in the interface.</p>
<ul>
<li>Options:
<ul>
<li><strong>appendTo</strong>: The position where the templates will be added in the interface. This can be set to any block using a class or ID selector, e.g., appendTo: '.class-div' or appendTo: '#id-div'.</li>
<li><strong>templatesType</strong>: The type of data loading. It can be set to either "local" or "remote".</li>
<li><strong>templatesUrl</strong>: The URL where the templates data is located. This can be either a local or remote URL. The default value is /templates/templates.json.</li>
<li><strong>useSearch</strong>: This option allows users to show or hide the search box for the templates. If set to true, a search box will be displayed. If set to false, it will be hidden.</li>
</ul>
</li>
</ul>
<p>&nbsp;</p>
<p>For creating pages inside require to use plugin: <strong><a href="https://gjs.market/products/pages-manager" target="_blank" rel="noopener">Pages manager</a></strong> then you will able to create sctructure with designs:</p>
<ul>
<li>index</li>
<li>blog</li>
<li>contact us</li>
<li>etc...</li>
</ul>

Templates Manager

<p>This plugin implements a custom but similar&nbsp;<span style="color: rgb(0, 0, 0);">grapesjs-plugin-export so</span> there is no need to install it.</p>
<p>Netlify dashboard for deploying abd managing sites directly in the grapesjs editor</p>

Grapesjs Netlify

A collection of open source and paid plugins used in blocomposer.app

Blocomposer

Brendon Ngirazi

<p>Project, template and page manager for grapesjs. This version makes use of the <code>PageManager</code> API only available in later versions of grapesjs and comes with built in storage managers</p>
<div class="notranslate" style="all: initial;">&nbsp;</div>

Grapesjs Project Manager

<p>Add more actions to the built in grapesjs rich text editor</p>

Grapesjs RTE Extensions

<p>Separate border property to&nbsp;<code>border</code>,&nbsp;<code>border-left</code>,&nbsp;<code>border-top</code>,&nbsp;<code>border-bottom</code>,&nbsp;<code>border-right</code></p>

Grapesjs Style Border

<p>Search and add undraw illustrations in the grapesjs editor through a modal</p>

Grapesjs Undraw

<p>Tailwind intergration which includes the complete set of blocks from Tailblocks.cc, bases on Destack. Use this plugin with grapesjs-plugin-forms</p>

Grapesjs Tailwind

<p>Intergrates the&nbsp;<code>method draw</code> SVG editor into <code>grapesjs</code> for importing, editing and exporting SVGs.</p>

Grapesjs SVG Editor

<p dir="auto">This plugin adds calendly embed widgets to grapesjs.</p>

Grapesjs Calendly

<p dir="auto">Attach code generated from&nbsp;<code>google blockly</code> to a component mounted on the canvas</p>

Grapesjs Blockly

<p>Edit or attach script to selected component.</p>

Grapesjs Script Editor

<p>Rulers and guides for grapesjs designer mode</p>

Grapesjs Rulers

<p>Intergrates uppy file uploader to grapesjs asset manager</p>

Grapesjs Uppy

<p>Link google analytics or google tag manager from grapesjs settings</p>

Grapesjs GA

<p>Wrapper for firebase storage. Files uploaded through asset manager will be added to your firebase app storage bucket.</p>

Grapesjs Firebase Storage

<p>Robodog file uploader for intergrating&nbsp;transloadit into grapesjs. Similar to grapesjs-uppy but uses transloadit for processing images</p>

Grapesjs Robodog

<p>Quill bubble RTE intergration for <code>grapesjs</code>.</p>

Grapesjs Quill

<p>A plugin that allows you to edit the HTML and CSS of a component that is selected on the canvas</p>

Grapesjs Component Code Editor

<p>Some tools for the grapesjs editor</p>
<ul dir="auto">
<li>
<p dir="auto">Tool in this plugin are</p>
<ul dir="auto">
<li>Css grid layout tool</li>
<li>Canvas resizer</li>
<li>Palette from image generator</li>
<li>Breadcrumbs</li>
<li>Layer icon mapper</li>
</ul>
</li>
</ul>

Grapesjs Plugin Toolbox

<p>Tailwind intergration which includes the complete set of dark mode blocks from Tailblocks.cc, bases on Destack. The plugin contains over 50 unique dark mode tailwind blocks and also provides the ability to switch themes and also configure new themes. Use this plugin with grapesjs-plugin-forms to ensure that the forms function correctly. More instructions on how to setup are provided in the README.md.</p>
<div>
<div><strong>Commands</strong></div>
<div>1.&nbsp; <span style="color: rgb(126, 140, 141);">get-tailwindCss</span> - Get purged Tailwind CSS of your page.</div>
<div>2.&nbsp; <span style="color: rgb(126, 140, 141);">open-update-theme</span> - Open theme modal and switch between 20 different themes</div>
<div>
<div>
<div>&nbsp;</div>
<div><strong>Options</strong></div>
<div>1.&nbsp; <span style="color: rgb(126, 140, 141);">tailwindCssUrl</span> - URL for fetching tailwind stylesheet - <span style="color: rgb(126, 140, 141);">https://unpkg.com/tailwindcss/dist/tailwind.min.css</span>`</div>
<div>2.&nbsp; <span style="color: rgb(126, 140, 141);">changeThemeText</span>` - Change theme modal title - <span style="color: rgb(126, 140, 141);">Change Theme</span></div>
</div>
</div>
</div>

Grapesjs Tailwind Dark

<p>Adds a gradient picker to background property</p>

Grapesjs Style Gpickr

Grapesjs Twitch

<div>
<div>Adds a cubic bezier editor for editing timing functions in the style manager.</div>
</div>

Grapesjs Style Easing

<p>Sample plugin setup for implementing the cloudinary file uploader</p>

Grapesjs Cloudinary

<p>Grapesjs UI preset based on wix with other common plugins and configurations to get your website builder up and running quickly. As a preset this works correctly with the provided versions but can also work with previous version if the plugins are also matched correctly. This plugins also provides a framework which can be extended by adding functionality to some of the UI provided. For more information on setup you can check the README.md provided and the sample setup provided in index.html.</p>
<h2 dir="auto" tabindex="-1">Options</h2>
<ol>
<li><span style="color: rgb(126, 140, 141);">txtConfirmClear</span> - Message when clearing the canvas - Clear Canvas?<br>2. <span style="color: rgb(126, 140, 141);">filters</span> - dropdown filters list - Check Source<br>3. <span style="color: rgb(126, 140, 141);">onSave</span> - callback when save button is clicked - editor =&gt; editor.store()<br>4. <span style="color: rgb(126, 140, 141);">onPublish</span> - callback when publish button is clicked - editor =&gt; {}<br>5&nbsp; <span style="color: rgb(126, 140, 141);">customStyleManager</span> - reconfigure style manager - []<br>6. <span style="color: rgb(126, 140, 141);">leftPanel</span> - Object definition for the left panel - Check Source<br>7. <span style="color: rgb(126, 140, 141);">upgradeContent</span> - Content for the upgrade modal, HTMLElement or string - ``&nbsp;<br>8. <span style="color: rgb(126, 140, 141);">logo</span> - Logo url -&nbsp; ``</li>
</ol>
<p>The plugin also has options to configure block filters, custom panels and provides a callback system to populate some of the panels if needed.</p>

Grapesjs Wix Like

<p>Grapesjs UI preset used in blocomposer.app with other common plugins and configurations to grapesjs to get your website builder up and running quickly. As a preset this works correctly with the provided versions but can also work with previous version if the plugins are also matched correctly. This plugins also provides a framework which can be extended by adding functionality to some of the UI provided. For more information on setup you can check the README.md provided and the sample setup provided in index.html. Provides widgets for adding blocks without having to use drag and drop. This plugin comes with grapesjs-component-icon plugin built in so no need to purchase that separately.</p>
<p><strong>Components</strong></p>
<ul>
<li>icon</li>
<li>shape-divider</li>
<li>header</li>
<li>animate</li>
<li>&nbsp;block-builder</li>
<li>button-basic</li>
</ul>
<p><strong>Blocks</strong></p>
<ul>
<li>link-block</li>
<li>quote</li>
<li>text-basic</li>
<li>section-block</li>
<li>span-block</li>
<li>button-basic</li>
<li>block-builder</li>
<li>line-divider</li>
<li>hero-block</li>
<li>team</li>
<li>team-card</li>
<li>footer</li>
<li>shape-divider</li>
<li>header</li>
<li>icon</li>
<li>animate</li>
</ul>
<p><strong>Commands</strong></p>
<ul>
<li>left-assets</li>
<li>left-settings</li>
<li>page-seo</li>
<li>adder</li>
<li>gjs-open-import-webpage</li>
<li>settings-customHead</li>
<li>settings-globalCss</li>
<li>get-current-name</li>
<li>open-fonts</li>
<li>clone-page</li>
<li>add-block</li>
<li>help</li>
<li>publish</li>
<li>set-device-desktop</li>
<li>set-device-tablet</li>
<li>set-device-mobile</li>
<li>canvas-clear</li>
</ul>
<p><br><strong>Options</strong></p>
<p>1. `<span style="color: rgb(126, 140, 141);">useCloudinary</span>` - Use cloudinary file picker - `true`&nbsp;<br>2. `<span style="color: rgb(126, 140, 141);">showPanels</span>` - Use editor with fixed panels - `false`<br>3. `<span style="color: rgb(126, 140, 141);">staticSettings</span>` - Reposition settings popup when a component is selected - `false`<br>4. `<span style="color: rgb(126, 140, 141);">settingsAnimation</span>` - Animate settings popup when - `true`<br>5. `<span style="color: rgb(126, 140, 141);">hideSettings</span>` - Hide settings by default - `true`<br>6. `<span style="color: rgb(126, 140, 141);">linkBlock</span>` - Extend link block - `{}`<br>7. `<span style="color: rgb(126, 140, 141);">quoteBlock</span>` - Extend quote block - `{}`<br>8. `<span style="color: rgb(126, 140, 141);">textBlock</span>` - Extend text block - `{}`<br>9. `<span style="color: rgb(126, 140, 141);">btnBlock</span>` - Extend button block - `{}`<br>10. `<span style="color: rgb(126, 140, 141);">bldBlock</span>` - Extend block builder block - `{}`<br>11. `<span style="color: rgb(126, 140, 141);">hrBlock</span>` - Extend line divider block - `{}`<br>12. `<span style="color: rgb(126, 140, 141);">heroBlock</span>` - Extend hero block - `{}`<br>13. `<span style="color: rgb(126, 140, 141);">teamBlock</span>` - Extend team block - `{}`<br>14. `<span style="color: rgb(126, 140, 141);">shapedividerBlock</span>` - Extend shape divider block - `{}`<br>15. `<span style="color: rgb(126, 140, 141);">sectionBlock</span>` - Extend section block - `{}`<br>16. `<span style="color: rgb(126, 140, 141);">spanBlock</span>` - Extend span block - `{}`<br>17. `<span style="color: rgb(126, 140, 141);">footerBlock</span>` - Extend footer block - `{}`<br>18. `<span style="color: rgb(126, 140, 141);">headerBlock</span>` - Extend header block - `{}`<br>19. `<span style="color: rgb(126, 140, 141);">animateBlock</span>` - Extend animate block - `{}`<br>20. `<span style="color: rgb(126, 140, 141);">iconBlock</span>` - Extend icon block - `{}`<br>21. `<span style="color: rgb(126, 140, 141);">modalHelpLabel</span>` - Modal help title - `Help`<br>22. `<span style="color: rgb(126, 140, 141);">modalImportTitle</span>` - Modal import title - `Import`<br>23. `<span style="color: rgb(126, 140, 141);">modalImportButton</span>` - Modal import button text - `Import`<br>24. `<span style="color: rgb(126, 140, 141);">modalImportLabel</span>` - Import description inside import modal - `HTML`<br>25. `<span style="color: rgb(126, 140, 141);">importViewerOptions</span>` - Code viewer (eg. CodeMirror) options - `{}`<br>26. `<span style="color: rgb(126, 140, 141);">textCleanCanvas</span>` - Confirm text before cleaning the canvas - `Are you sure to clean the canvas?`<br>27. `<span style="color: rgb(126, 140, 141);">onSave</span>` - Callback when save button is clicked - `editor.store()`<br>28, `<span style="color: rgb(126, 140, 141);">hoverDelay</span>` - Hover delay for block adding widgets, lower value makes hover update faster - `250`</p>
<p>&nbsp;</p>

Grapesjs Paneless

<p>This plugin add an icon component and block which can be added to a website as desired. You can double click the component to open a modal with iconify finder which you can use to search for icons from multiple libraries such as material design, font-awesome etc, and also edit the icon properties such as color and size. Please check the sample provided in index.html for a more complete setup and more information is also provided in the README.md</p>
<p><strong>Components</strong></p>
<ul>
<li style="color: rgb(126, 140, 141);"><span style="color: rgb(126, 140, 141);">icon</span></li>
</ul>
<p><strong>Blocks</strong></p>
<ul>
<li style="color: rgb(126, 140, 141);"><span style="color: rgb(126, 140, 141);">icon</span></li>
</ul>
<p><strong>Options</strong></p>
<p>1. <span style="color: rgb(126, 140, 141);">iconBlock</span> - Options for extending the icon block - {}<br>2. <span style="color: rgb(126, 140, 141);">config</span> - IconifyFinder's configurations - {}<br>3. <span style="color: rgb(126, 140, 141);">constructor</span> - Pass the editor constructor. By default, the `IconFinder` will be called - ``&nbsp;<br>4. <span style="color: rgb(126, 140, 141);">labelIconPicker</span> - Label for the image editor (used in the modal) - Icon Picker&nbsp;<br>5. <span style="color: rgb(126, 140, 141);">commandId</span> - Id to use to create the icon finder command - icon-finder<br>6. <span style="color: rgb(126, 140, 141);">onEvent</span> - Handle iconfinder events `onEvent: (event) =&gt; {}` - false<br>7. <span style="color: rgb(126, 140, 141);">maxWidth</span> - Container max-height - 100%<br>8. <span style="color: rgb(126, 140, 141);">script</span> - Scripts to load dynamically in case no Iconifiy instance was found - ["https://unpkg.com/@ju99ernaut/iconsearch/dist/icon-finder.min.js"]<br>9. <span style="color: rgb(126, 140, 141);">style</span> - In case the script is loaded this style will be loaded too - ["https://unpkg.com/@ju99ernaut/iconsearch/dist/style.css"]</p>

Grapesjs Component Icon

<p dir="auto">A plugin for GrapesJS that provides rate-limited storage, allowing you to save changes immediately and then cool down for a specified period before saving again.</p>
<p dir="auto">This plugin will intercept when user saves a website and make sure it doesn't occure more than once every second or any duration you setup</p>
<p dir="auto">Features</p>
<ul dir="auto">
<li><strong>Works with any storage:</strong> This plugin place itself between the storage and your app.</li>
<li><strong>Immediate Save:</strong> The first save is performed immediately.</li>
<li><strong>Cooldown Period:</strong> After saving, the plugin enters a cooldown period during which subsequent saves are ignored.</li>
<li><strong>Post-Cooldown Save:</strong> If there are more calls to the <code>store</code> function during the cooldown, one final save occurs after the cooldown expires, and the cooldown period restarts.</li>
</ul>

Storage Rate Limit

Born free and open-source in 2009, Silex challenges conventional website builders. We empower a global community of makers to liberate web creation using no-code.

This shop is where Silex team release GrapesJs plugins we deveop for Silex

Silex website builder

Alex Hoyau

<p dir="auto">Custom Fonts plugin for grapesjs</p>
<blockquote>
<p dir="auto">This code is part of a bigger project: <a href="https://www.silexlabs.org/silex-v3-kickoff/" rel="nofollow">about Silex v3</a><a id="user-content-about-this-plugin" class="anchor" href="https://github.com/silexlabs/grapesjs-fonts#about-this-plugin" aria-hidden="true"></a></p>
</blockquote>
<h2 dir="auto" tabindex="-1">About this plugin</h2>
<p dir="auto">Links</p>
<ul dir="auto">
<li><a href="https://codepen.io/lexoyo/pen/zYLWdxY" rel="nofollow">DEMO on Codepen</a></li>
<li><a href="https://www.npmjs.com/package/@silexlabs/grapesjs-fonts" rel="nofollow">Npm package</a></li>
<li><a href="https://github.com/artf/grapesjs/discussions/4858#discussioncomment-4756119" data-hovercard-type="discussion" data-hovercard-url="/GrapesJS/grapesjs/discussions/4858/hovercard?comment_id=4756119">Discussion about ongoing developments</a></li>
</ul>
<p dir="auto">&nbsp;</p>
<p dir="auto">The plugin currently has these features</p>
<ul dir="auto">
<li>API to add / remove fonts from the site (from goole font name)</li>
<li>Updates the DOM and the "font family" dropdown</li>
<li>Save the fonts with the site data</li>
<li>Load the fonts when site data is loaded (add to the DOM on load)</li>
<li>UI to manage fonts</li>
<li>Integration with google API</li>
<li>Store google fonts list in local storage for performance and API quotas</li>
</ul>
<p dir="auto">Limitations:</p>
<p dir="auto">For now this plugin supports only Goolge fonts and use the V2 API. It should be upgraded to V3 and take advantage of variable fonts.</p>
<p dir="auto">See the "Development" section bellow to contribute<a id="user-content-motivations" class="anchor" href="https://github.com/silexlabs/grapesjs-fonts#motivations" aria-hidden="true"></a></p>
<h3 dir="auto" tabindex="-1">Motivations</h3>
<p dir="auto">I saw discussions and issues like "How can i add custom fonts in grapesjs editor? #4563"</p>
<p dir="auto">What seems to work for me is</p>
<ol dir="auto">
<li>update the "font family" dropdown
<div class="snippet-clipboard-content notranslate position-relative overflow-auto">
<pre class="notranslate"><code>const styleManager = editor.StyleManager
const fontProperty = styleManager.getProperty('typography', 'font-family')
fontProperty.setOptions(fonts)
styleManager.render()
</code></pre>
<div class="zeroclipboard-container position-absolute right-0 top-0">&nbsp;</div>
</div>
</li>
</ol>
<ol dir="auto">
<li value="2">update the DOM to display the font correctly: add style elements to the editor.Canvas.getDocument()</li>
</ol>
<p dir="auto">This is quite easy but here are the things which took me time as I implemented google fonts</p>
<ul dir="auto">
<li>use google fonts api to select fonts and get their name, variants, weights</li>
<li>build the URL of the fonts to load</li>
<li>the UI to manage and install fonts</li>
</ul>

Custom Fonts

<p>/!\ WARNING: This plugin needs work: I never finished to port it from Silex code base to an independent plugin. Here is <a href="https://github.com/silexlabs/Silex/blob/dev/src/ts/client/grapesjs/internal-links.ts">the code in Silex</a> and <a href="https://github.com/silexlabs/Silex/blob/dev/src/ts/client/grapesjs/internal-links.test.ts">the unit test</a></p>
<p>This GrapesJS plugin manages links within a GrapesJS project. It allows users to set links to different types such as URL, Email, and Page. The plugin also updates links when a page link changes and marks links as issues if a page is removed.</p>

WIP: Links for Multipage websites

<p dir="auto">Shows a loading bar while the site is loaded or saved. By default it looks like the classic loading bar on top of the page, e.g. on github.com.</p>
<p dir="auto">&gt; The demo is not useful as it uses localstorage as storage and this is instant so the loading bar is not visible =&gt; todo: make it better</p>
<p dir="auto">This code is part of a bigger project: <a href="https://www.silexlabs.org/silex-v3-kickoff/" rel="nofollow">about Silex v3</a></p>

Loading Bar

<p dir="auto">Directus as a backend for GrapesJS</p>
<blockquote>
<p dir="auto">/!\ This code uses an outdated SDK from directus project</p>
<p dir="auto">This code is part of a bigger project: <a href="https://www.silexlabs.org/silex-v3-kickoff/" rel="nofollow">about Silex v3</a></p>
</blockquote>
<p dir="auto">&nbsp;</p>
<p dir="auto">The plugin currently has these features</p>
<ul dir="auto">
<li>Authentication commands using Directus API to login/logout the user</li>
<li>Custom StorageManager to store the website data in a Directus collection</li>
<li>Custom AssetManager which integrates with Directus assets</li>
<li>This plugin provides easy versioning of the website data and assets</li>
<li>The JSON data of the website and the assets are readable and editable in Directus</li>
<li>Directus provides no-code flow automations</li>
</ul>

Directus Storage

<p>This code is part of a bigger project: <a href="https://www.silex.me/" rel="nofollow">Silex v3</a> which aims to be a free/libre alternative to webflow</p>
<p>When the user is adding a CSS class in the Selector Manager UI, this plugin displays a list of classes already in use. This makes the UX better and closer to mainstream website builders.</p>
<p>Summary</p>
<ul dir="auto">
<li>Plugin name: <code>grapesjs-ui-suggest-classes</code></li>
<li>UI: a tag list will appear when you click "+" in the class list of an element</li>
<li>Feature: suggest css classes as you type</li>
</ul>

Ui Suggest Classes

<p dir="auto">This plugin adds feature to GrapesJS editor, for users to be able to reuse elements in a website and accross pages</p>
<blockquote>
<p dir="auto">This code is very early stage, it is not working as expected yet. It is part of a bigger project: <a href="https://www.silexlabs.org/silex-v3-kickoff/" rel="nofollow">Silex v3</a></p>
</blockquote>
<p dir="auto">Links</p>
<ul dir="auto">
<li><a href="https://codepen.io/lexoyo/full/xxJGEwo" rel="nofollow">DEMO on Codepen</a></li>
<li><a href="https://www.npmjs.com/package/@silexlabs/grapesjs-symbols" rel="nofollow">Npm package</a></li>
<li><a href="https://github.com/artf/grapesjs/discussions/4317" data-hovercard-type="discussion" data-hovercard-url="/GrapesJS/grapesjs/discussions/4317/hovercard">Discussion about this plugins and Symbols, bug report etc</a></li>
<li><a href="https://github.com/silexlabs/grapesjs-symbols/issues/1" data-hovercard-type="issue" data-hovercard-url="/silexlabs/grapesjs-symbols/issues/1/hovercard">Discussion about ongoing developments</a></li>
</ul>
<p dir="auto">Features</p>
<ul dir="auto">
<li>Create a symbol from an element</li>
<li>Create symbol instances</li>
<li>Sync instances: when one instance is modified, update all other instances</li>
<li>Unlink an instance so that is stops syncing</li>
<li>Symbol have a name and an icon</li>
<li>View symbol icon for all instances in the layer manager</li>
<li>Optional list of symbols which support draging symbols to the stage</li>
<li>Support for symbols in symbols</li>
<li>Support sync accross grapesjs pages</li>
</ul>

Symbols

<p>This plugin adds a search bar in the Style manager so that users can search for a CSS style</p>
<p>&gt; This code is part of a bigger project: <a href="https://www.silexlabs.org/silex-v3-kickoff/">about Silex v3</a></p>

Filter Styles UI

GrapesJS Google Material Icons Plugin

Hey GrapeJS lovers! 🍇 

Check out my grape-tastic open-source extension on GitHub 🚀👉. Need help or just want to chat about grapes? Email me at ergindenizkosecioglu@gmail.com 📧 or create an issue on GitHub! 
Let's make grapes awesome together! 🌟 #GrapeLove 🍇💖

Generated by AI 😁

Ergin Deniz Kosecioglu

<div>Take full control of your page layouts with a powerful CSS Grid and Bootstrap-compatible grid system built directly into GrapesJS. Stop wrestling with manual markup — drag, drop, and configure rows and columns visually, exactly the way you need them.</div><div><br></div><div>GRID System adds a complete layout engine to your GrapesJS editor. Whether you're building landing pages, email templates, or complex web applications, it gives you the structural building blocks to create any layout — fast.</div><div><br></div><div><b>Features&nbsp;</b></div><div><b><br></b></div><div><b>Grid components</b></div><ul><li>Ready-to-use Row and Column blocks, drag-and-drop straight onto the canvas&nbsp;</li><li>CSS Grid and Bootstrap-compatible structure out of the box&nbsp;</li><li>Configurable column counts: 1, 2, 3, 4, 6, and 12-column layouts</li></ul><div><br></div><div><b>Visual layout control</b></div><ul><li>Adjust column spans, gaps, and alignment directly from the style panel&nbsp;</li><li>Responsive breakpoints — define how your grid behaves on desktop, tablet, and mobile&nbsp;</li><li>Nesting support — place grids inside grids for complex multi-level layouts<b><br></b></li></ul><div><b><br></b></div><div><b>Developer-friendly</b></div><ul><li>Clean, semantic HTML output — no bloated wrappers or inline style overrides&nbsp;</li><li>Compatible with GrapesJS versions 0.19.x, 0.20.x, 0.21.x, and 0.22.x&nbsp;</li><li>Ships with both source code and a production-ready dist build<b><br></b></li></ul>

GRID System GrapesJS

<p>The official GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.</p>
<p>The goal of this library is not to provide UI components but simple wrappers around the core GrapesJS modules and let you define your own UI components and access easily the GrapesJS API.</p>
<p><span style="color: rgb(149, 165, 166);"><em>Warning: This library is NOT intended to render your React components inside the GrapesJS canvas, here it's all about the custom UI around the canvas itself.</em></span></p>
<p>&nbsp;</p>

React UI for GrapesJS

<p>The Reactor Preset for GrapesJS is a powerful extension designed to enhance the capabilities of the GrapesJS web design tool. With Reactor, users can seamlessly integrate React components into their GrapesJS projects, unlocking a world of possibilities for dynamic and interactive web design.</p>
<p>This preset empowers developers and designers to leverage the flexibility and efficiency of React within the familiar and intuitive interface of GrapesJS. Whether you're building a simple landing page or a complex web application, Reactor streamlines the process by allowing you to effortlessly incorporate React components into your designs.</p>
<p>Design was developed from <a href="https://stackblitz.com/edit/grapesjs-react-custom-ui?file=package.json">example</a>.</p>
<p>With Reactor, you can unleash the full potential of GrapesJS and React, empowering you to create stunning, highly functional websites and web applications with ease. Whether you're a seasoned developer or a design enthusiast, Reactor offers a seamless and efficient solution for building modern web editors.</p>

Reactor Preset for GrapesJS

New Software

JonySoftware

<p>The grapesjs-hero-react-component repository on GitHub is a notable project designed to enhance the capabilities of GrapesJS, a free and open-source Web Builder Framework, by enabling the integration of React components. This particular repository focuses on demonstrating how to incorporate a &laquo;Hero&raquo;.</p>
<p>The codebase of this repository includes all necessary configurations and examples to get started with integrating React components into GrapesJS. Specifically, it showcases the implementation of a Hero component, which serves as a practical example of how React components can be seamlessly integrated into the GrapesJS ecosystem. This example illustrates not just the inclusion of React components into the GrapesJS editor but also how these components can be interactively customized and rendered within the editor interface.</p>
<p>In summary, the grapesjs-hero-react-component GitHub repository presents a valuable resource for web developers seeking to leverage the combined strengths of GrapesJS and React. Through its detailed example of adding a Hero component, it offers a clear and practical guide for integrating React components into the GrapesJS framework, thereby opening up new possibilities for creating rich and interactive web designs.</p>

Hero React Component GrapesJS

<p data-start="289" data-end="350"><strong data-start="289" data-end="348">Stop guessing. Start designing with absolute precision.</strong></p>
<p data-start="352" data-end="756">The <strong data-start="356" data-end="381">LayoutEnhancer Plugin</strong> takes GrapesJS layout control to the next level. With an intuitive spacing interface, you can fine-tune margins and paddings visually&mdash;achieving perfect balance and alignment without trial and error. Whether you&rsquo;re polishing client websites, building complex templates, or simply tired of &ldquo;eyeballing&rdquo; distances, LayoutEnhancer ensures <strong data-start="717" data-end="753">pixel-perfect results every time</strong>.</p>
<h3 data-start="758" data-end="782">Why You&rsquo;ll Love It</h3>
<ul data-start="784" data-end="1410">
<li data-start="784" data-end="897">
<p data-start="786" data-end="897">🎯 <strong data-start="789" data-end="825">Visual margin &amp; padding controls</strong><br data-start="825" data-end="828">Adjust spacing directly on the canvas with live, visual feedback.</p>
</li>
<li data-start="899" data-end="1021">
<p data-start="901" data-end="1021">🧩 <strong data-start="904" data-end="933">Precision without clutter</strong><br data-start="933" data-end="936">Enhance only the components you choose&mdash;keep your workspace focused and efficient.</p>
</li>
<li data-start="1023" data-end="1131">
<p data-start="1025" data-end="1131">⚡ <strong data-start="1027" data-end="1060">Seamless GrapesJS integration</strong><br data-start="1060" data-end="1063">No extra setup. Works with the editor you already know and love.</p>
</li>
<li data-start="1133" data-end="1273">
<p data-start="1135" data-end="1273">🎨 <strong data-start="1138" data-end="1166">Cleaner, sharper layouts</strong><br data-start="1166" data-end="1169">Say goodbye to uneven gaps and misaligned sections&mdash;your designs will look polished and professional.</p>
</li>
<li data-start="1275" data-end="1410">
<p data-start="1277" data-end="1410">🚀 <strong data-start="1280" data-end="1306">Save hours of tweaking</strong><br data-start="1306" data-end="1309">No more guessing numbers or constant previewing&mdash;just drag, drop, and get it right the first time.</p>
</li>
</ul>
<h3 data-start="1412" data-end="1429">Perfect For</h3>
<ul data-start="1430" data-end="1636">
<li data-start="1430" data-end="1489">
<p data-start="1432" data-end="1489">Designers who care about visual harmony and consistency</p>
</li>
<li data-start="1490" data-end="1564">
<p data-start="1492" data-end="1564">Developers who want precise, professional results without wasting time</p>
</li>
<li data-start="1565" data-end="1636">
<p data-start="1567" data-end="1636">Agencies and freelancers delivering polished, client-ready websites</p>
</li>
</ul>

GrapesJS LayoutEnhancer: Precision Spacing Tool

<p>The GrapesJS Plugin Saver is an essential tool for developers and designers using the GrapesJS framework to build and manage web content. Currently under development, this plugin introduces a versatile saving functionality, allowing users to export their projects in various formats including DOCX, PDF, images, and ZIP archives.</p>
<p>&nbsp;</p>
<p><strong>Development Status:</strong><br>This plugin is currently under development. We are committed to refining its features and ensuring its compatibility and performance across various environments.</p>
<p>Stay tuned for updates on the release and availability of the GrapesJS Plugin Saver!</p>

Plugin Saver ( DOCX, PDF, IMAGE, ZIP ) - Under developing

BitTurbo Software

BitTurbo

<p>The GrapesJS NodeJS JSON Converter is a powerful feature designed to enhance the functionality of the GrapesJS editor by allowing seamless conversion between NodeJS and JSON data structures. This tool is ideal for developers looking to streamline their workflow in web development environments.</p>
<p>&nbsp;</p>
<p>Development Status:<br>This feature is currently under development. We are committed to refining its features and ensuring its compatibility and performance across various environments.</p>

GrapesJS NodeJS JSON Converter to HTML/CSS

<p>The GrapesJS Link Component is an essential tool designed to enhance web development by simplifying the creation and management of hyperlinks within the GrapesJS editor. This component is integral for users aiming to incorporate interactive and navigational elements effortlessly into their web projects.</p>
<p>Key Features:</p>
<p>Easy Link Management: Provides a user-friendly interface to create, edit, and delete hyperlinks, streamlining the workflow in web design.</p>
<p>Customizable Attributes: Allows for the customization of link attributes such as URL, target, title, and rel attributes, offering flexibility to meet specific SEO and usability standards.</p>
<p>Dynamic Link Options: Supports the addition of dynamic link behaviors, including pop-ups, tooltips, and modal windows, enhancing the interactive experience on web pages.</p>
<p>Real-Time Preview: Integrates a real-time preview feature that lets users see how the links behave within the editor before going live, ensuring accuracy and functionality.</p>
<p>Compatibility and Integration: Seamlessly integrates with other GrapesJS components and plugins, maintaining consistent performance and compatibility across the platform.</p>

GrapesJS Link Component

<p>The <strong>GrapesJS GPT Plugin</strong> integrates OpenAI's GPT technology into GrapesJS, allowing users to generate or modify content with ease. By clicking the magic icon, users can access AI-powered content creation and editing features directly within the GrapesJS editor. This plugin is perfect for enhancing productivity and creativity, making content creation faster and more intuitive.</p>
<h2>Features</h2>
<ul>
<li><strong>Magic Icon</strong>: Easily accessible icon to invoke GPT-based content generation.</li>
<li><strong>Content Generation</strong>: Generate new content with the help of OpenAI's GPT.</li>
<li><strong>Content Modification</strong>: Modify existing content seamlessly.</li>
<li><strong>Customizable Options</strong>: Fine-tune GPT responses to suit your needs.</li>
</ul>

Grapesjs GPT Plugin

As a software engineer with 3 years of experience, I have a strong foundation in web development and experience working with modern technologies such as React.js, Node.js, Laravel,Grapesjs MySQL and MongoDB.

Sathursan Krishnadeva

Sathursan Krishndeva

<p><strong>Design once. Apply everywhere. Manage your site&rsquo;s header with zero hassle.</strong></p>
<p>The <strong data-start="324" data-end="347">Super Header Plugin</strong> brings effortless header management to GrapesJS. Instead of rebuilding or updating headers page by page, this plugin lets you design a <strong data-start="483" data-end="507">single global header</strong> (or multiple variations) and apply them consistently across your entire project. Perfect for teams, freelancers, and agencies who value <strong data-start="644" data-end="687">speed, consistency, and brand alignment</strong>.</p>
<p>Working only with Pages Manger by GrapesJS. In demo uses this <a href="../pages-manager">Pages Manager</a> plugin.</p>
<h3 data-start="692" data-end="716">Why You&rsquo;ll Love It</h3>
<ul data-start="718" data-end="1244">
<li data-start="718" data-end="824">
<p data-start="720" data-end="824">🚀 <strong data-start="723" data-end="751">One-click global headers</strong><br data-start="751" data-end="754">Create once, update once &mdash; changes instantly appear on every page.</p>
</li>
<li data-start="826" data-end="938">
<p data-start="828" data-end="938">🗂 <strong data-start="831" data-end="864">Multiple headers &amp; categories</strong><br data-start="864" data-end="867">Organize different headers for site sections, projects, or clients.</p>
</li>
<li data-start="940" data-end="1042">
<p data-start="942" data-end="1042">🎨 <strong data-start="945" data-end="967">Fully customizable</strong><br data-start="967" data-end="970">Works seamlessly with GrapesJS &mdash; edit using the same familiar tools.</p>
</li>
<li data-start="1044" data-end="1148">
<p data-start="1046" data-end="1148">⚡ <strong data-start="1048" data-end="1071">Fast &amp; intuitive UI</strong><br data-start="1071" data-end="1074">Designed for productivity with no extra setup or steep learning curve.</p>
</li>
<li data-start="1150" data-end="1244">
<p data-start="1152" data-end="1244">💼 <strong data-start="1155" data-end="1179">Professional results</strong><br data-start="1179" data-end="1182">Keep your projects consistent, polished, and client-ready.</p>
</li>
</ul>
<h3 data-start="1246" data-end="1263">Perfect For</h3>
<ul data-start="1264" data-end="1422">
<li data-start="1264" data-end="1305">
<p data-start="1266" data-end="1305">Agencies building multi-page websites</p>
</li>
<li data-start="1306" data-end="1364">
<p data-start="1308" data-end="1364">Freelancers who need reusable, client-specific headers</p>
</li>
<li data-start="1365" data-end="1422">
<p data-start="1367" data-end="1422">Anyone tired of editing the same header over and over</p>
</li>
</ul>

Super Header for GrapesJS

<p data-start="270" data-end="349"><strong data-start="270" data-end="347">Build once. Apply everywhere. Manage your site&rsquo;s footer with zero hassle.</strong></p>
<p data-start="351" data-end="721">The <strong data-start="355" data-end="378">Super Footer Plugin</strong> brings effortless footer management to GrapesJS. Instead of recreating or updating footers page by page, this plugin lets you design a <strong data-start="514" data-end="538">single global footer</strong> (or multiple variations) and apply them consistently across your entire project. Perfect for teams, freelancers, and agencies who value <strong data-start="675" data-end="718">speed, consistency, and brand alignment</strong>.</p>
<p>Working only with Pages Manger by GrapesJS. In demo uses this <a href="../pages-manager">Pages Manager</a> plugin.</p>
<h3 data-start="723" data-end="747">Why You&rsquo;ll Love It</h3>
<ul data-start="749" data-end="1300">
<li data-start="749" data-end="856">
<p data-start="751" data-end="856">🚀 <strong data-start="754" data-end="782">One-click global footers</strong><br data-start="782" data-end="785">Create once, update once &mdash; changes instantly reflect on every page.</p>
</li>
<li data-start="858" data-end="980">
<p data-start="860" data-end="980">🗂 <strong data-start="863" data-end="896">Multiple footers &amp; categories</strong><br data-start="896" data-end="899">Organize different footers for different site sections, clients, or projects.</p>
</li>
<li data-start="982" data-end="1092">
<p data-start="984" data-end="1092">🎨 <strong data-start="987" data-end="1009">Fully customizable</strong><br data-start="1009" data-end="1012">Works seamlessly inside GrapesJS &mdash; edit with the same tools you already use.</p>
</li>
<li data-start="1094" data-end="1204">
<p data-start="1096" data-end="1204">⚡ <strong data-start="1098" data-end="1121">Fast &amp; intuitive UI</strong><br data-start="1121" data-end="1124">Designed with productivity in mind. No extra setup, no steep learning curve.</p>
</li>
<li data-start="1206" data-end="1300">
<p data-start="1208" data-end="1300">💼 <strong data-start="1211" data-end="1235">Professional results</strong><br data-start="1235" data-end="1238">Keep your projects consistent, polished, and client-ready.</p>
</li>
</ul>
<h3 data-start="1302" data-end="1319">Perfect For</h3>
<ul data-start="1320" data-end="1488">
<li data-start="1320" data-end="1361">
<p data-start="1322" data-end="1361">Agencies managing multi-page websites</p>
</li>
<li data-start="1362" data-end="1420">
<p data-start="1364" data-end="1420">Freelancers who need reusable, client-specific footers</p>
</li>
<li data-start="1421" data-end="1488">
<p data-start="1423" data-end="1488">Anyone tired of updating the same footer manually on every page</p>
</li>
</ul>
<p>&nbsp;</p>

Super Footer for GrapesJS

<p>Enhance component interactions with smart, floating UI tooltips and contextual menus.</p>
<p>Super Tooltip is a UX-focused plugin for GrapesJS that adds floating icons and contextual menus near selected components. It simplifies common actions with clean keyboard shortcuts and provides a polished in-canvas editing experience.</p>
<h4 class="" data-start="466" data-end="481">✨ Features</h4>
<ul data-start="482" data-end="1322">
<li class="" data-start="482" data-end="621">
<p class="" data-start="484" data-end="621"><strong data-start="484" data-end="539">Floating &ldquo;Add Component&rdquo; and &ldquo;More Options&rdquo; Buttons</strong><br data-start="539" data-end="542">Intuitively placed icons appear next to selected components for quick access.</p>
</li>
<li class="" data-start="623" data-end="876">
<p class="" data-start="625" data-end="673"><strong data-start="625" data-end="647">Keyboard Shortcuts</strong><br data-start="647" data-end="650">Perform actions like:</p>
<ul data-start="676" data-end="876">
<li class="" data-start="676" data-end="709">
<p class="" data-start="678" data-end="709"><code data-start="678" data-end="692">Cmd/Ctrl + D</code>: Add component</p>
</li>
<li class="" data-start="712" data-end="749">
<p class="" data-start="714" data-end="749"><code data-start="714" data-end="728">Cmd/Ctrl + F</code>: Open more options</p>
</li>
<li class="" data-start="752" data-end="785">
<p class="" data-start="754" data-end="785"><code data-start="754" data-end="768">Cmd/Ctrl + E</code>: Select parent</p>
</li>
<li class="" data-start="788" data-end="826">
<p class="" data-start="790" data-end="826"><code data-start="790" data-end="808">Cmd/Ctrl + &uarr; / &darr;</code>: Move component</p>
</li>
<li class="" data-start="829" data-end="858">
<p class="" data-start="831" data-end="858"><code data-start="831" data-end="845">Cmd/Ctrl + S</code>: Duplicate</p>
</li>
<li class="" data-start="861" data-end="876">
<p class="" data-start="863" data-end="876"><code data-start="863" data-end="868">Del</code>: Delete</p>
</li>
</ul>
</li>
<li class="" data-start="878" data-end="987">
<p class="" data-start="880" data-end="987"><strong data-start="880" data-end="898">Tooltip System</strong><br data-start="898" data-end="901">Smooth tooltips with shortcuts appear on hover, enhancing usability without clutter.</p>
</li>
<li class="" data-start="989" data-end="1200">
<p class="" data-start="991" data-end="1019"><strong data-start="991" data-end="1017">Animated Context Menus</strong></p>
<ul data-start="1022" data-end="1200">
<li class="" data-start="1022" data-end="1062">
<p class="" data-start="1024" data-end="1062">Block insertion with filterable search</p>
</li>
<li class="" data-start="1065" data-end="1118">
<p class="" data-start="1067" data-end="1118">&ldquo;Convert To&rdquo; submenu for live component replacement</p>
</li>
<li class="" data-start="1121" data-end="1200">
<p class="" data-start="1123" data-end="1200">Actions like move, delete, duplicate, select parent &mdash; all keyboard accessible</p>
</li>
</ul>
</li>
<li class="" data-start="1202" data-end="1322">
<p class="" data-start="1204" data-end="1322"><strong data-start="1204" data-end="1238">Integrated with <code data-start="1222" data-end="1236">BlockManager</code></strong><br data-start="1238" data-end="1241">Dynamically pulls available blocks with SVG/icon preview and content injection.</p>
</li>
</ul>
<p>Logs:</p>
<p>Version 0.1.5 - Updated the position for buttons and updated to GrapesJS 0.22.x</p>
<p>Version 0.1.3 - Adding Moving Icon and Fixing issue with menu positions</p>
<p>Version 0.1.1 - "Add component" &amp; "More options" &amp; Short keys</p>

Super Tooltip for GrapesJS

<p data-start="472" data-end="548"><strong data-start="472" data-end="548">Build stunning Tailwind CSS websites inside GrapesJS &mdash; faster than ever.</strong></p>
<p data-start="550" data-end="852"><strong data-start="550" data-end="577">Blocky for Tailwind CSS</strong> is a premium plugin that adds a large collection of <strong data-start="630" data-end="670">pre-made, responsive Tailwind blocks</strong> directly to your GrapesJS editor.<br data-start="704" data-end="707">Each block is handcrafted with clean markup, modern design, and instant Tailwind utility classes &mdash; so you can focus on creativity, not CSS setup.</p>
<p data-start="854" data-end="869">🚀 <strong data-start="857" data-end="869">Features</strong></p>
<ul data-start="870" data-end="1268">
<li data-start="870" data-end="960">
<p data-start="872" data-end="960">40+ ready-to-use Tailwind CSS blocks (Hero, Features, Blog, Gallery, Footer, and more)</p>
</li>
<li data-start="961" data-end="1015">
<p data-start="963" data-end="1015">Fully responsive layouts optimized for all devices</p>
</li>
<li data-start="1016" data-end="1080">
<p data-start="1018" data-end="1080">Clean, minimal Tailwind-only structure &mdash; no extra frameworks</p>
</li>
<li data-start="1081" data-end="1130">
<p data-start="1083" data-end="1130">Compatible with any GrapesJS version (v0.16+)</p>
</li>
<li data-start="1131" data-end="1165">
<p data-start="1133" data-end="1165">Easy drag-and-drop integration</p>
</li>
<li data-start="1166" data-end="1210">
<p data-start="1168" data-end="1210">Fast loading and lightweight performance</p>
</li>
<li data-start="1211" data-end="1268">
<p data-start="1213" data-end="1268">Extendable: add your own blocks or modify existing ones</p>
</li>
</ul>
<p data-start="1270" data-end="1288">🧩 <strong data-start="1273" data-end="1288">Perfect for</strong></p>
<ul data-start="1289" data-end="1426">
<li data-start="1289" data-end="1306">
<p data-start="1291" data-end="1306">SaaS builders</p>
</li>
<li data-start="1307" data-end="1332">
<p data-start="1309" data-end="1332">Landing page creators</p>
</li>
<li data-start="1333" data-end="1380">
<p data-start="1335" data-end="1380">Agencies using GrapesJS + Tailwind workflow</p>
</li>
<li data-start="1381" data-end="1426">
<p data-start="1383" data-end="1426">No-code platforms and visual site editors</p>
</li>
</ul>

Plugin Blocky for Tailwind CSS

Blocksmith is a creative software studio specializing in premium GrapesJS plugins and custom UI blocks for modern SaaS builders. We craft pixel-perfect components, intuitive editors, and performance-focused extensions that empower developers and designers to build faster.

Blocksmith

<p data-start="232" data-end="521"><strong data-start="232" data-end="254">Bootstrap 4 Blocks</strong> is a GrapesJS plugin that adds a collection of ready-made layout and content blocks built with Bootstrap v4.<br data-start="363" data-end="366">Quickly create responsive designs using familiar grid structures &mdash; rows, columns, containers, and components like cards, jumbotrons, and navigation bars.</p>
<p data-start="523" data-end="536"><strong data-start="523" data-end="536">Features:</strong></p>
<ul data-start="537" data-end="781">
<li data-start="537" data-end="575">
<p data-start="539" data-end="575">20+ pre-styled Bootstrap v4 blocks</p>
</li>
<li data-start="576" data-end="615">
<p data-start="578" data-end="615">Fully responsive grid layout system</p>
</li>
<li data-start="616" data-end="664">
<p data-start="618" data-end="664">Compatible with all GrapesJS core components</p>
</li>
<li data-start="665" data-end="699">
<p data-start="667" data-end="699">Easy drag-and-drop integration</p>
</li>
<li data-start="700" data-end="731">
<p data-start="702" data-end="731">Clean, semantic HTML output</p>
</li>
<li data-start="732" data-end="781">
<p data-start="734" data-end="781">Ideal for rapid prototyping and landing pages</p>
</li>
</ul>
<p data-start="783" data-end="906"><strong data-start="783" data-end="799">Perfect for:</strong><br data-start="799" data-end="802">Developers and designers who want to speed up page creation inside GrapesJS using Bootstrap 4 standards.</p>

Bootstrap 4 Blocks for GrapesJS

kaoz70

admin

<p data-start="883" data-end="1092">GrapesJS Swiper Slider is a plugin for GrapesJS that adds a fully touch-enabled, responsive slider/carousel block built on Swiper.<br data-start="1070" data-end="1073"><strong data-start="1073" data-end="1090">Key features:</strong></p>
<ul data-start="1093" data-end="1784">
<li data-start="1093" data-end="1186">
<p data-start="1095" data-end="1186">A new block: <code data-start="1108" data-end="1123">swiper-slider</code> ready for drag-&amp;-drop.</p>
</li>
<li data-start="1187" data-end="1385">
<p data-start="1189" data-end="1385">Underlying components added: <code data-start="1218" data-end="1236">swiper-container</code>, <code data-start="1238" data-end="1254">swiper-wrapper</code>, <code data-start="1256" data-end="1270">swiper-slide</code>, and optional elements such as pagination, navigation arrows or scrollbar.</p>
</li>
<li data-start="1386" data-end="1479">
<p data-start="1388" data-end="1479">Compatible with GrapesJS version 0.12.60 or higher.</p>
</li>
<li data-start="1480" data-end="1784">
<p data-start="1482" data-end="1784">Lightweight and easy to integrate: install via npm or clone from GitHub<br data-start="1592" data-end="1595"><strong data-start="1595" data-end="1611">Perfect for:</strong><br data-start="1611" data-end="1614">Designers and developers using GrapesJS who want to easily add sliders/carousels to their page templates &mdash; mobile‐friendly, touch support included, styled for modern web.</p>
</li>
</ul>

GrapesJS Swiper Slider

<p data-start="255" data-end="532">Create beautiful, responsive web layouts in seconds with <strong data-start="312" data-end="347">Bootstrap 5 Blocks for GrapesJS</strong>.<br data-start="348" data-end="351">This plugin brings the full power of <strong data-start="388" data-end="403">Bootstrap 5</strong> &mdash; including its modern grid system, responsive utilities, and pre-built components &mdash; directly into the GrapesJS visual editor.</p>
<p data-start="534" data-end="757">Easily drag-and-drop Bootstrap-based sections, containers, rows, and columns to build adaptive layouts without touching code. Each block follows the Bootstrap 5 structure, ensuring your designs look great on every device.</p>
<p data-start="759" data-end="937"><strong data-start="759" data-end="775">Perfect for:</strong><br data-start="775" data-end="778">🧩 Developers and designers building responsive templates<br data-start="835" data-end="838">🎨 No-code creators who want clean Bootstrap markup<br data-start="889" data-end="892">🚀 Rapid prototyping and UI layout assembly</p>
<hr data-start="939" data-end="942">
<h3 data-start="944" data-end="960"><strong data-start="948" data-end="960">Features</strong></h3>
<ul data-start="961" data-end="1421">
<li data-start="961" data-end="1047">
<p data-start="963" data-end="1047">🧱 <strong data-start="966" data-end="992">Responsive Grid System</strong> &mdash; Includes Bootstrap 5 containers, rows, and columns</p>
</li>
<li data-start="1048" data-end="1142">
<p data-start="1050" data-end="1142">🎛 <strong data-start="1053" data-end="1078">Utility-based Styling</strong> &mdash; Supports Bootstrap&rsquo;s built-in spacing and alignment classes</p>
</li>
<li data-start="1143" data-end="1239">
<p data-start="1145" data-end="1239">💎 <strong data-start="1148" data-end="1171">Pre-made Components</strong> &mdash; Ready-to-use sections like headers, footers, cards, and buttons</p>
</li>
<li data-start="1240" data-end="1325">
<p data-start="1242" data-end="1325">⚡ <strong data-start="1244" data-end="1271">Lightweight Integration</strong> &mdash; Seamlessly plugs into GrapesJS with minimal setup</p>
</li>
<li data-start="1326" data-end="1421">
<p data-start="1328" data-end="1421">🔄 <strong data-start="1331" data-end="1347">Customizable</strong> &mdash; Extend or restyle blocks easily to match your project&rsquo;s design system</p>
</li>
</ul>

GrapesJS Bootstrap v5 Blocks

Moonrise

<p style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">The <strong>Components Farmer</strong> plugin gives you complete control over your GrapesJS component library. Stop writing boilerplate code and easily register, manage, and retrieve all your custom, complex, or third-party components right where you need them.</p>
<p style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">Organize your growing component collection into reusable libraries, ensuring consistency and accelerating your template development workflow. If you build components, this plugin is a necessity.</p>
<h3 style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">Key Features / Benefits (For Bullet Points)</h3>
<ul style="caret-color: rgb(0, 0, 0); color: rgb(0, 0, 0); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none;">
<li>
<p><strong>⚡ Component Registration:</strong> Effortlessly register new component types and blocks.</p>
</li>
<li>
<p><strong>📂 Library Management:</strong> Group and categorize components for easy retrieval and use.</p>
</li>
<li>
<p><strong>🔄 Dynamic Injection:</strong> Inject components into the editor on-demand based on project needs.</p>
</li>
<li>
<p><strong>🛠️ Developer Focused:</strong> Simplifies the process of working with complex custom component structures.</p>
</li>
<li>
<p><strong>📈 Accelerate Development:</strong> Reuse components across multiple GrapesJS projects instantly.</p>
</li>
</ul>

GrapesJS Components Farmer

niiknow

<p data-start="236" data-end="491">Build responsive web and mobile pages in minutes with this lightweight no-code editor. Based on GrapesJS and styled with Tailwind CSS + DaisyUI, it comes in just ~40 kB yet packs a full drag-and-drop builder, HTML/CSS export, live preview and auto-save.</p>
<p data-start="498" data-end="622">Ideal for designers, freelancers and content editors who need to quickly prototype or build pages without deep dev-skills.</p>
<p data-start="629" data-end="988">Features include:<br data-start="646" data-end="649">&bull; Drag-and-drop block/ component placement<br data-start="693" data-end="696">&bull; Instant HTML/CSS export (via &ldquo;&lt;/&gt;&rdquo; button)<br data-start="742" data-end="745">&bull; Works out-of-the-box with your Tailwind+DaisyUI project<br data-start="804" data-end="807">&bull; Lightweight footprint, easy to customise (just edit <code data-start="863" data-end="874">blocks.js</code> &amp; <code data-start="877" data-end="892">components.js</code>)<br data-start="893" data-end="896">&bull; CDN/NPM ready: <code data-start="915" data-end="950">unpkg.com/web-mobile-html-builder</code>, or <code data-start="955" data-end="986">npm i web-mobile-html-builder</code></p>
<p data-start="995" data-end="1094">Perfect for building landing pages, microsites, mobile-friendly HTML apps &mdash; and fully extendable.</p>

Web & Mobile HTML Builder for GrapesJS (Tailwind & DaisyUI)

vocamen

An GrapesJS free accessibility plugin provides an effective way for businesses to improve the accessibility of GrapesJS powered websites. It is designed for organizations that want to offer a more inclusive digital experience, it adds an accessibility widget that supports users with diverse needs through features aligned WCAG 2.1, 2.2, ADA, EAA, Section 508, France RGAA, California Unruh, European EAA EN 301 549, UK Equality Act, Spain UNE 139803:2012, Australian DDA, Israeli Standard 5568, Ontario AODA, Canada ACA, German BITV, Brazilian Inclusion Law (LBI 13.146/2015), JIS X 8341 (Japan), Italian Stanca Act, Indian RPwD Act, Switzerland DDA and other <a href="https://www.skynettechnologies.com/accessibility-standards">accessibility standards</a>.<p><strong><br></strong></p><p>With this <a href="https://www.skynettechnologies.com/free-website-accessibility-widget">free accessibility widget</a>, improve usability for visitors with visual, motor, cognitive, and other accessibility. GrapesJS accessibility widget is great suitable for business websites (Corporate sites), landing page builders, email template builders, ecommerce stores, B2B portals, SAAS website editing tools, educational &amp; training platforms, event &amp; conference websites, marketing microsites, no-code or low-code website builders’ websites, and more. It demonstrates a commitment to inclusivity and enhances brand reputation.<br></p><p><br></p><p>This free accessibility GrapesJS plugin follows several data and application security practices, including ISO 9001:2015 &amp; ISO 27001:2022, GDPR, CCPA, COPPA, HIPAA, and SOC 2 Type II. Skynet Technologies USA LLC is a proud member of W3C and the International Association of Accessibility Professionals (IAAP).<br></p><p><br></p><p><b>Features:&nbsp;</b></p><p></p><ul><li>Auto-detect language&nbsp;<br></li><li>Supports 190+ multi-languages.&nbsp;<br></li><li>Skip to Navigation / Content / Footer&nbsp;<br></li><li>Content adjustment options&nbsp;<br></li><li>Visual and Color Adjustments&nbsp;<br></li><li>Customization available, including colors, size, icon, and position.&nbsp;<br></li><li>Reading mask&nbsp;<br></li><li>Accessibility statement<br></li></ul><div>Explore <a href="https://www.skynettechnologies.com/sites/default/files/Free-Accessibility-Widget-Features-Guide.pdf">the free accessibility widget features guide</a>.

<br></div><div><br></div><div><b>Why one should use the GrapesJS accessibility plugin - All in One Accessibility?</b></div><div><ul><li>It is a valuable tool for any business running a website on GrapesJS because it helps to make web content usable for people with disabilities while supporting all the standards.&nbsp;<br></li><li>As digital accessibility become a legal and ethical requirement globally, it provides an easy, cost-effective solution to upgrade your website without complex coding or redesign.&nbsp;<br></li><li>It helps organizations align with global accessibility guidelines - such as those established by W3C.&nbsp;<br></li><li>It is fast to install, supports 190+ languages, and instantly improves inclusivity for visitors with visual, motor, cognitive, or auditory disabilities.&nbsp;<br></li><li>For businesses that want to reduce legal risk, improve user experience, and demonstrate commitment to equal access, using All in One Accessibility on a GrapesJS website is a smart and responsible choice.</li></ul></div><div><b>Visit the GrapesJS accessibility extension demo to see how does it performs&nbsp;with improved accessibility features:

<br></b></div><div>https://www.youtube.com/watch?v=VMHx30aUnR4<br></div><div><br></div><div></div><div><b>Documentation&nbsp;</b></div><div>https://www.skynettechnologies.com/sites/default/files/accessibility-widget-features-list.pdf&nbsp;<br></div><div><br></div><div><b>Submit a Support Request&nbsp;</b></div><div>Please visit our https://www.skynettechnologies.com/report-accessibility-problem and fill out the form. Our team will get back to you as soon as possible.&nbsp;</div><div><br></div><div><b>Send Us an Email</b></div><div>Alternatively, you can send an email to our support team:&nbsp;</div><div>mailto:hello@skynettechnologies.com<br></div><div><br></div><div>Accessibility Paid Add-on Services

<br></div><div><br></div><div><b>GrapesJS manual accessibility audit</b></div><div><ul><li>Enhance inclusivity and user experience by evaluating GrapesJS website’s accessibility by <a href="https://www.skynettechnologies.com/web-accessibility-consultan">web accessibility consultant</a>.&nbsp;<br></li><li>WCAG 2.0 / WCAG 2.1 / WCAG 2.2 Level AA conformance testing&nbsp;<br></li><li>Automated, semi-automated testing&nbsp;<br></li><li>Manual testing&nbsp;<br></li><li>Simple before-after UI/UX recommendations on how to fix the issues&nbsp;<br></li><li>Comprehensive audit report<br></li></ul></div><div><br></div><div><a href="https://www.skynettechnologies.com/full-website-accessibility-remediation">GrapesJS site manual accessibility remediation</a></div><div><br></div><div>Enhance GrapesJS site accessibility and inclusivity with our manual accessibility remediation add-on. This service includes fixing accessibility issues and thorough remediation of website manually. Our experts ensure accessibility with WCAG standards, improve user experience for those with disabilities, and provide a detailed report on the improvements made.<br></div><div><br></div><div><a href="https://www.skynettechnologies.com/pdf-accessibility-remediation">PDF/Document Accessibility Remediation</a></div><div>The PDF / Document Remediation provides a list of inaccessible PDFs and remediated PDFs from where you can request PDF remediation service.<br></div><div><br></div><div><a href="https://www.skynettechnologies.com/vpat-accessibility-conformance-report">VPAT Report/Accessibility Conformance Report (ACR)</a>&nbsp;</div><div>The Voluntary Product Accessibility Template (VPAT), also known as an ACR (Accessibility Conformance Report) starts with an audit and provides current details for an accessible website, application, or any other digital assets.<br></div><div><br></div><div><b>Accessibility GrapesJS Widget Paid Add-ons

</b><br></div><div><b><br></b></div><div><a href="https://www.skynettechnologies.com/all-in-one-accessibility/addons#accessibility-widget-add-ons">White Label Accessibility&nbsp;</a></div><div>Remove the Skynet Technologies logo as well as all of the footer links, popups, report a problem link and more for full white label control.

<br></div><div><br></div><div><a href="https://www.skynettechnologies.com/all-in-one-accessibility/addons#accessibility-widget-add-ons">Instant live site translations for GrapesJS websites and apps</a></div><div>Translate GrapesJS website or web app into over 190 languages instantly to enhance accessibility for non-native speakers, individuals with language acquisition difficulties, and those with learning disabilities.<br></div><div><br></div><div><a href="https://www.skynettechnologies.com/all-in-one-accessibility/addons#accessibility-widget-add-ons">Modify Accessibility Menu for GrapesJS websites and apps</a></div><div>Build and fine-tune widget with the Modify Menu option. Reorder, remove, and restructure the widget buttons to fit users’ specific accessibility needs.

<br></div><div><br></div><div><b>GrapesJS Accessibility Partnership Opportunities<br></b></div><div><br></div><div><a href="https://www.skynettechnologies.com/agency-partners">GrapesJS accessibility agencies partnership</a>&nbsp;</div><div>Partner with us as an agency to provide comprehensive GrapesJS ADA, EAA, and WCAG accessibility solutions to clients. Get access to exclusive resources, training, and support to implement and manage accessibility features effectively.<br></div><div><b><br></b></div><div><a href="https://www.skynettechnologies.com/affiliate-partner">GrapesJS accessibility affiliate partnership</a>&nbsp;</div><div>Sign up for our affiliate program and earn commissions by promoting accessibility GrapesJS plugin. Share our widget with your network and help businesses improve their website accessibility while generating revenue.<br></div><div><b><br></b></div><div>For more details, explore <a href="https://www.skynettechnologies.com/partner-program">GrapesJS accessibility partnership opportunities</a><br></div><div><br></div><div>Credits&nbsp;</div><div>This addon is developed and maintained by a <a href="https://www.skynettechnologies.com/">website accessibility company</a> - Skynet Technologies USA LLC

<br></div><div><b><br></b></div><div>Current Maintainers&nbsp;</div><div><a href="https://github.com/skynettechnologies">Skynet Technologies USA LLC</a><br></div><div><br></div>

All in One Accessibility

Full Service WCAG 2.1 and WCAG 2.2 AA Website Remediation Agency.

Skynet Technologies USA LLC

<p data-start="433" data-end="785"><strong data-start="433" data-end="456">GrapesJS React Demo</strong> is a lightweight starter project that shows you exactly how to integrate the GrapesJS editor inside a modern React environment.<br data-start="584" data-end="587">This demo includes a simple setup with component mounting, editor initialization, and basic editor configuration &mdash; ideal for beginners and professionals who want a quick and reliable starting point.</p>
<p data-start="787" data-end="974">Whether you&rsquo;re building a page builder, email builder, template editor, or custom React-based admin panel, this demo gives you the foundation to plug GrapesJS into your own workflow fast.</p>
<h3 data-start="976" data-end="992"><strong data-start="980" data-end="992">Features</strong></h3>
<ul data-start="993" data-end="1296">
<li data-start="993" data-end="1032">
<p data-start="995" data-end="1032">✔️ Minimal, clean React integration</p>
</li>
<li data-start="1033" data-end="1093">
<p data-start="1035" data-end="1093">✔️ Example of mounting GrapesJS inside a React component</p>
</li>
<li data-start="1094" data-end="1126">
<p data-start="1096" data-end="1126">✔️ Configurable init options</p>
</li>
<li data-start="1127" data-end="1180">
<p data-start="1129" data-end="1180">✔️ Supports React hooks and functional components</p>
</li>
<li data-start="1181" data-end="1238">
<p data-start="1183" data-end="1238">✔️ Ideal for plugins, builders, SaaS tools, and demos</p>
</li>
<li data-start="1239" data-end="1296">
<p data-start="1241" data-end="1296">✔️ Works with any modern React + Vite/Webpack project</p>
</li>
</ul>
<h3 data-start="1298" data-end="1318"><strong data-start="1302" data-end="1318">Who it&rsquo;s for</strong></h3>
<ul data-start="1319" data-end="1528">
<li data-start="1319" data-end="1360">
<p data-start="1321" data-end="1360">React developers integrating GrapesJS</p>
</li>
<li data-start="1361" data-end="1414">
<p data-start="1363" data-end="1414">SaaS builders creating custom page/email builders</p>
</li>
<li data-start="1415" data-end="1468">
<p data-start="1417" data-end="1468">Plugin creators who need a quick test environment</p>
</li>
<li data-start="1469" data-end="1528">
<p data-start="1471" data-end="1528">Anyone who wants a working React + GrapesJS boilerplate</p>
</li>
</ul>

GrapesJS React Demo — Starter Integration for React Developers

sebastiangrochocki

<p>Thumbai brings fast, configurable AI thumbnail generation directly inside your GrapesJS editor. Create high-quality thumbnails from text prompts or reference images, then replace any image on the canvas with a single click. Ideal for product pages, portfolios, ecommerce listings, marketing sites, and dynamic content creation workflows.</p>
<p>Please create an account at <a href="https://thumb.onl/">https://thumb.onl/</a> and copy your API key to use with the plugin.</p>
<h3 data-start="608" data-end="626"><strong data-start="612" data-end="626">✨ Features</strong></h3>
<ul data-start="628" data-end="1498">
<li data-start="628" data-end="746">
<p data-start="630" data-end="746"><strong data-start="630" data-end="657">AI Thumbnail Generation</strong><br data-start="657" data-end="660">Generate clean, optimized thumbnails from text prompts or uploaded reference images.</p>
</li>
<li data-start="748" data-end="868">
<p data-start="750" data-end="868"><strong data-start="750" data-end="783">Instant On-Canvas Replacement</strong><br data-start="783" data-end="786">Select any image component and swap it with an AI-generated thumbnail instantly.</p>
</li>
<li data-start="870" data-end="998">
<p data-start="872" data-end="998"><strong data-start="872" data-end="904">Resolution &amp; Aspect Controls</strong><br data-start="904" data-end="907">Output precise sizes (e.g., 512&times;512, 1024&times;1024) and aspect ratios (1:1, 16:9, 4:5, etc.).</p>
</li>
<li data-start="1000" data-end="1110">
<p data-start="1002" data-end="1110"><strong data-start="1002" data-end="1024">Editor Integration</strong><br data-start="1024" data-end="1027">Includes a dedicated Thumbai block plus an image toolbar button for quick access.</p>
</li>
<li data-start="1112" data-end="1237">
<p data-start="1114" data-end="1237"><strong data-start="1114" data-end="1134">Programmatic API</strong><br data-start="1134" data-end="1137">Run generation, replacement, batch processing, or custom automations through commands and methods.</p>
</li>
<li data-start="1239" data-end="1370">
<p data-start="1241" data-end="1370"><strong data-start="1241" data-end="1268">Events &amp; Progress Hooks</strong><br data-start="1268" data-end="1271">Listen to lifecycle events &mdash; start, progress, success, fail &mdash; for UI reactions, loaders, or logs.</p>
</li>
<li data-start="1372" data-end="1498">
<p data-start="1374" data-end="1498"><strong data-start="1374" data-end="1398">Secure Backend Setup</strong><br data-start="1398" data-end="1401">Use your own AI provider endpoint and keep keys server-side via proxies or custom integrations.</p>
</li>
</ul>
<h3 data-start="1505" data-end="1528"><strong data-start="1509" data-end="1528">🚀 How It Works</strong></h3>
<p data-start="1530" data-end="1885">Thumbai sends a prompt (and optional source image) to your configured AI image-generation endpoint. When the generated thumbnail is ready, the plugin automatically updates the selected component&rsquo;s <code data-start="1727" data-end="1732">src</code> attribute. Use the built-in UI for quick edits, or integrate programmatically for workflows like bulk thumbnail creation or automated page generation.</p>

您的插件能否登顶？

🚀 快速崛起

Top 10 付费插件

Top 10 免费插件

🏆 顶级作者

免费起步，付费进阶，称霸榜单。

免费上传

积累下载量

变现获利