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.
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.
The latest iterations of the preset emphasize:
<ul data-start="1176" data-end="1589">
<li data-start="1176" data-end="1285">
Updated compatibility with newer GrapesJS core versions to ensure stability and long-term maintainability
</li>
<li data-start="1286" data-end="1397">
Optimized plugin loading and updated dependency references for better performance and faster initialization
</li>
<li data-start="1398" data-end="1493">
Refined preset styling for a more cohesive UI and consistent visual system across templates
</li>
<li data-start="1494" data-end="1589">
Extended design control through DevFuture plugins such as border and UI customization tools
</li>
</ul>
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.
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.
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.
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.

DevFuture Preset 2.0 — Next-Gen Visual Builder Preset

DevFuture Development

DevFuture

Free

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

CKeditor 5 in Modal

CKeditor 4 integration in RTE

GrapesJS Official

GrapesJS

Webpage Preset

Newsletter Preset

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.

MJML Preset

Simple navbar component for GrapesJS editor

Plugin Navbar

Add the TOAST UI Image Editor on Image Components in GrapesJS

TOAST UI Image Editor

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

Plugin Forms

This plugin contains some basic blocks for the GrapesJS editor

Plugin Basic Blocks

Simple countdown component for GrapesJS Editor

Plugin Countdown

Simple, CSS only, tooltip component for GrapesJS

Plugin Tooltip

This plugin adds the possibility to embed custom code

Сustom Сode

This plugin adds the possibility to export template in a zip archive.

Export Zip

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.

Parser PostCSS

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

Style Bg

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

Style Filter

GrapesJS Typed component made by wrapping Typed.js library

Typed Text

Simple tabs component plugin for GrapesJS

Tabs Component

GrapesJS storage wrapper for Cloud Firestore, flexible, scalable NoSQL cloud database to store and sync data for client/server-side development.
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.

Cloud Firestore

IndexedDB storage wrapper for GrapesJS

IndexedDB Storage

This plugin replaces the default file uploader with the one from Filestack

Filestack

A plugin to allow users to edit html and css code on GrapesJS.

Code Editor

Lory Slider

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.
Updates:
1. New position for Components / Styles
2. New styles
3. New styles for CodeMirror

Whitener Preset GrapesJS

Introducing the Froala Inline Text Editor for GrapesJS! This plugin is the perfect solution for web developers who need a powerful and intuitive text editor for their projects. With the Froala Inline Text Editor, you can easily create and edit content with a simple and intuitive interface. The editor is designed to be lightweight and fast, so you can quickly make changes to your content without having to wait for the page to reload. The editor also supports a wide range of features, including text formatting, image and video embedding, and more. With the Froala Inline Text Editor, you can create beautiful and engaging content with ease.
Support Actions:
<ol>
<li>Bold</li>
<li>Italic</li>
<li>Underline</li>
<li>Strike</li>
<li>Color Text</li>
<li>Backgrund Text</li>
<li>Font-size</li>
<li>Font-family</li>
<li>HR line</li>
<li>Insert variebles like {{name}} / {{email}}</li>
<li>etc</li>
</ol>

Froala Inline Text Editor

Paid

<div class="pb-5 leading-[1.9em] dark:text-light-600">
TinyMCE 6 Inline Text Editor for GrapesJS is the perfect plugin for web developers who need a powerful and easy-to-use text editor. This plugin replaces the default Rich Text Editor with the one from TinyMCE 6, giving you access to a wide range of features and tools. With TinyMCE 6, you can easily create and edit text and customize the look and feel of your content. Plus, you can use the inline text editor to quickly and easily make changes to your content without having to switch between different windows. With TinyMCE 6, you can create beautiful and engaging content that looks great on any device.
Support Actions:
<ol>
<li>Bold</li>
<li>Italic</li>
<li>Underline</li>
<li>Strike</li>
<li>Color Text</li>
<li>Backgrund Text</li>
<li>Font-size</li>
<li>Font-family</li>
</ol>
&nbsp;
&nbsp;
UPDATES: #0.1.3 - Fixed issue with container for GrapesJS 0.22.x and updated tinymce to version 7.7.0 / 04.03.2025
</div>

TinyMCE 6 Inline Text Editor

A lightweight plugin that integrates CKEditor 5 (inline mode) with GrapesJS. ⚠️ This plugin does not include CKEditor 5 itself &mdash; you must install and buy it separately.
&nbsp;
CKEditor 5 Inline Text Editor for GrapesJS is the perfect plugin for web developers who want to add a powerful and intuitive text editor to their GrapesJS projects. This plugin replaces the default Rich Text Editor with the one from CKEditor5, giving users a more robust and feature-rich experience. With CKEditor 5, users can easily format text and more. Plus, the plugin is fully customizable, allowing developers to tailor the editor to their specific needs. With CKEditor 5, developers can create a more engaging and interactive user experience for their GrapesJS projects.
Support Actions:
&nbsp; &nbsp; Bold &nbsp; &nbsp; Italic &nbsp; &nbsp; Underline &nbsp; &nbsp; Strike &nbsp; &nbsp; Color Text &nbsp; &nbsp; Backgrund Text &nbsp; &nbsp; Font-size &nbsp; &nbsp; Font-family
&nbsp;
This plugin is not an official CKSource product and is not affiliated with CKSource in any way. &ldquo;CKEditor&rdquo; is a trademark of CKSource Holding sp. z o.o. All other trademarks belong to their respective owners.

GrapesJS Inline Text Editor — Compatible with CKEditor 5

Placeholder 2.0 is the perfect plugin for anyone looking to add a new dragging effect to their components. This plugin replaces the default Drag&amp;Drop PlaceHolder with an actual size and content block render. With Placeholder 2.0, you can always see your block in real time, eliminating the need for a green line from the editor. This plugin is perfect for anyone looking to add a more realistic and efficient dragging effect to their components. Placeholder 2.0 - New dragging effect for components
Updated 23.11.2025 - Version 0.1.17 - Updated for Core GrapesJS 0.22.x and added some new animations Updated 28.10.2023 - Version 0.1.3 New options:
dragDefault: This option allows you to define a default placeholder for an array of components.
dragClasses: Use this option to specify classes for the dragging block. The default classes include 'gjs-selected,' 'gjs-freezed,' and 'animation.'
animation: This option provides a selection of default animations for the dragging block. Options: animation1 / animation2 / animation3 / animation4 / animation5 / none
dragPlace: Utilize this option to replace a placeholder block with any HTML or CSS block.
customAnimation: You have the flexibility to add your custom animations to a block. This feature should be connected to the '.animation' class.
Example:
@keyframes slidein {
from { max-height: 0px; transform: scale(0); opacity: 0; }
to { max-height: 1000px; transform: scale(1); opacity: 1; }
}
.animation { animation-duration:0.5s; animation-name: slidein; }

Placeholder 2.0 - Elevating Component Dragging Experience

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!

Borders Color

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.
<pre>Options:</pre>
appendTo position for PagesManager able to set to any block in interface appendTo: '.class-div' or '#id-div'
main_name Name of default page default: main_name: 'Page 1'
default_content Default HTML to new pages default_content: '&lt;div&gt;New page&lt;/div&gt;'
default_style Default CSS to new pages default_style: '.class{ color: red; }'
pages_prefix Default prefix for new pages name, like Page 1, Page 2, Page 3 pages_prefix: 'Page'
exportSingle Show/hide export for page exportSingle: 1
exportMulti Show/hide export for all pages exportMulti: 1
nameArchive Prefix name of archive of all pages nameArchive: 'export-all'
stylesPages Add css to pages manager, possible to replace exist styles stylesPages: '.text{ color:red; }'

Pages Manager

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.
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.
Options:
1. Save remote or localstorage. Remote store hasthe functionality for save/remove/fetch data.
2. Rename button in Blocks Manager.
3. Hide/show the inputs in modal window.

Users Blocks

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.
<ul>
<li>Options:
<ul>
<li>appendTo: 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>templatesType: The type of data loading. It can be set to either "local" or "remote".</li>
<li>templatesUrl: 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>useSearch: 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>
&nbsp;
For creating pages inside require to use plugin: <a href="https://gjs.market/products/pages-manager" target="_blank" rel="noopener">Pages manager</a> then you will able to create sctructure with designs:
<ul>
<li>index</li>
<li>blog</li>
<li>contact us</li>
<li>etc...</li>
</ul>

Templates Manager

This plugin implements a custom but similar&nbsp;grapesjs-plugin-export so there is no need to install it.
Netlify dashboard for deploying abd managing sites directly in the grapesjs editor

Grapesjs Netlify

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

Blocomposer

Brendon Ngirazi

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
<div class="notranslate" style="all: initial;">&nbsp;</div>

Grapesjs Project Manager

Add more actions to the built in grapesjs rich text editor

Grapesjs RTE Extensions

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>

Grapesjs Style Border

Search and add undraw illustrations in the grapesjs editor through a modal

Grapesjs Undraw

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

Grapesjs Tailwind

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

Grapesjs SVG Editor

This plugin adds calendly embed widgets to grapesjs.

Grapesjs Calendly

Attach code generated from&nbsp;<code>google blockly</code> to a component mounted on the canvas

Grapesjs Blockly

Edit or attach script to selected component.

Grapesjs Script Editor

Rulers and guides for grapesjs designer mode

Grapesjs Rulers

Intergrates uppy file uploader to grapesjs asset manager

Grapesjs Uppy

Link google analytics or google tag manager from grapesjs settings

Grapesjs GA

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

Grapesjs Firebase Storage

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

Grapesjs Robodog

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

Grapesjs Quill

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

Grapesjs Component Code Editor

Some tools for the grapesjs editor
<ul dir="auto">
<li>
Tool in this plugin are
<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

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.
<div>
<div>Commands</div>
<div>1.&nbsp; get-tailwindCss - Get purged Tailwind CSS of your page.</div>
<div>2.&nbsp; open-update-theme - Open theme modal and switch between 20 different themes</div>
<div>
<div>
<div>&nbsp;</div>
<div>Options</div>
<div>1.&nbsp; tailwindCssUrl - URL for fetching tailwind stylesheet - https://unpkg.com/tailwindcss/dist/tailwind.min.css`</div>
<div>2.&nbsp; changeThemeText` - Change theme modal title - Change Theme</div>
</div>
</div>
</div>

Grapesjs Tailwind Dark

Adds a gradient picker to background property

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

Sample plugin setup for implementing the cloudinary file uploader

Grapesjs Cloudinary

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.
<h2 dir="auto" tabindex="-1">Options</h2>
<ol>
<li>txtConfirmClear - Message when clearing the canvas - Clear Canvas? 2. filters - dropdown filters list - Check Source 3. onSave - callback when save button is clicked - editor =&gt; editor.store() 4. onPublish - callback when publish button is clicked - editor =&gt; {} 5&nbsp; customStyleManager - reconfigure style manager - [] 6. leftPanel - Object definition for the left panel - Check Source 7. upgradeContent - Content for the upgrade modal, HTMLElement or string - ``&nbsp; 8. logo - Logo url -&nbsp; ``</li>
</ol>
The plugin also has options to configure block filters, custom panels and provides a callback system to populate some of the panels if needed.

Grapesjs Wix Like

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.
Components
<ul>
<li>icon</li>
<li>shape-divider</li>
<li>header</li>
<li>animate</li>
<li>&nbsp;block-builder</li>
<li>button-basic</li>
</ul>
Blocks
<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>
Commands
<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>
 Options
1. `useCloudinary` - Use cloudinary file picker - `true`&nbsp; 2. `showPanels` - Use editor with fixed panels - `false` 3. `staticSettings` - Reposition settings popup when a component is selected - `false` 4. `settingsAnimation` - Animate settings popup when - `true` 5. `hideSettings` - Hide settings by default - `true` 6. `linkBlock` - Extend link block - `{}` 7. `quoteBlock` - Extend quote block - `{}` 8. `textBlock` - Extend text block - `{}` 9. `btnBlock` - Extend button block - `{}` 10. `bldBlock` - Extend block builder block - `{}` 11. `hrBlock` - Extend line divider block - `{}` 12. `heroBlock` - Extend hero block - `{}` 13. `teamBlock` - Extend team block - `{}` 14. `shapedividerBlock` - Extend shape divider block - `{}` 15. `sectionBlock` - Extend section block - `{}` 16. `spanBlock` - Extend span block - `{}` 17. `footerBlock` - Extend footer block - `{}` 18. `headerBlock` - Extend header block - `{}` 19. `animateBlock` - Extend animate block - `{}` 20. `iconBlock` - Extend icon block - `{}` 21. `modalHelpLabel` - Modal help title - `Help` 22. `modalImportTitle` - Modal import title - `Import` 23. `modalImportButton` - Modal import button text - `Import` 24. `modalImportLabel` - Import description inside import modal - `HTML` 25. `importViewerOptions` - Code viewer (eg. CodeMirror) options - `{}` 26. `textCleanCanvas` - Confirm text before cleaning the canvas - `Are you sure to clean the canvas?` 27. `onSave` - Callback when save button is clicked - `editor.store()` 28, `hoverDelay` - Hover delay for block adding widgets, lower value makes hover update faster - `250`
&nbsp;

Grapesjs Paneless

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
Components
<ul>
<li style="color: rgb(126, 140, 141);">icon</li>
</ul>
Blocks
<ul>
<li style="color: rgb(126, 140, 141);">icon</li>
</ul>
Options
1. iconBlock - Options for extending the icon block - {} 2. config - IconifyFinder's configurations - {} 3. constructor - Pass the editor constructor. By default, the `IconFinder` will be called - ``&nbsp; 4. labelIconPicker - Label for the image editor (used in the modal) - Icon Picker&nbsp; 5. commandId - Id to use to create the icon finder command - icon-finder 6. onEvent - Handle iconfinder events `onEvent: (event) =&gt; {}` - false 7. maxWidth - Container max-height - 100% 8. script - Scripts to load dynamically in case no Iconifiy instance was found - ["https://unpkg.com/@ju99ernaut/iconsearch/dist/icon-finder.min.js"] 9. style - In case the script is loaded this style will be loaded too - ["https://unpkg.com/@ju99ernaut/iconsearch/dist/style.css"]

Grapesjs Component Icon

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.
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
Features
<ul dir="auto">
<li>Works with any storage: This plugin place itself between the storage and your app.</li>
<li>Immediate Save: The first save is performed immediately.</li>
<li>Cooldown Period: After saving, the plugin enters a cooldown period during which subsequent saves are ignored.</li>
<li>Post-Cooldown Save: 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

Custom Fonts plugin for grapesjs
<blockquote>
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>
</blockquote>
<h2 dir="auto" tabindex="-1">About this plugin</h2>
Links
<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>
&nbsp;
The plugin currently has these features
<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>
Limitations:
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.
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>
<h3 dir="auto" tabindex="-1">Motivations</h3>
I saw discussions and issues like "How can i add custom fonts in grapesjs editor? #4563"
What seems to work for me is
<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>
This is quite easy but here are the things which took me time as I implemented google fonts
<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

/!\ 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>
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.

WIP: Links for Multipage websites

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.
&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
This code is part of a bigger project: <a href="https://www.silexlabs.org/silex-v3-kickoff/" rel="nofollow">about Silex v3</a>

Loading Bar

Directus as a backend for GrapesJS
<blockquote>
/!\ This code uses an outdated SDK from directus project
This code is part of a bigger project: <a href="https://www.silexlabs.org/silex-v3-kickoff/" rel="nofollow">about Silex v3</a>
</blockquote>
&nbsp;
The plugin currently has these features
<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

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
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.
Summary
<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

This plugin adds feature to GrapesJS editor, for users to be able to reuse elements in a website and accross pages
<blockquote>
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>
</blockquote>
Links
<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>
Features
<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

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

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> </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> </div><div>Features&nbsp;</div><div> </div><div>Grid components</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> </div><div>Visual layout control</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 </li></ul><div> </div><div>Developer-friendly</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 </li></ul>

GRID System GrapesJS

The official GrapesJS wrapper for React that allows you to build custom and declarative UI for your editor.
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.
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.
&nbsp;

React UI for GrapesJS

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.
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.
Design was developed from <a href="https://stackblitz.com/edit/grapesjs-react-custom-ui?file=package.json">example</a>.
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.

Reactor Preset for GrapesJS

New Software

JonySoftware

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;.
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.
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.

Hero React Component GrapesJS

Stop guessing. Start designing with absolute precision.
The LayoutEnhancer Plugin 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 pixel-perfect results every time.
<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">
🎯 Visual margin &amp; padding controls Adjust spacing directly on the canvas with live, visual feedback.
</li>
<li data-start="899" data-end="1021">
🧩 Precision without clutter Enhance only the components you choose&mdash;keep your workspace focused and efficient.
</li>
<li data-start="1023" data-end="1131">
⚡ Seamless GrapesJS integration No extra setup. Works with the editor you already know and love.
</li>
<li data-start="1133" data-end="1273">
🎨 Cleaner, sharper layouts Say goodbye to uneven gaps and misaligned sections&mdash;your designs will look polished and professional.
</li>
<li data-start="1275" data-end="1410">
🚀 Save hours of tweaking No more guessing numbers or constant previewing&mdash;just drag, drop, and get it right the first time.
</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">
Designers who care about visual harmony and consistency
</li>
<li data-start="1490" data-end="1564">
Developers who want precise, professional results without wasting time
</li>
<li data-start="1565" data-end="1636">
Agencies and freelancers delivering polished, client-ready websites
</li>
</ul>

GrapesJS LayoutEnhancer: Precision Spacing Tool

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.
&nbsp;
Development Status: This plugin is currently under development. We are committed to refining its features and ensuring its compatibility and performance across various environments.
Stay tuned for updates on the release and availability of the GrapesJS Plugin Saver!

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

BitTurbo Software

BitTurbo

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.
&nbsp;
Development Status: This feature is currently under development. We are committed to refining its features and ensuring its compatibility and performance across various environments.

GrapesJS NodeJS JSON Converter to HTML/CSS

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.
Key Features:
Easy Link Management: Provides a user-friendly interface to create, edit, and delete hyperlinks, streamlining the workflow in web design.
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.
Dynamic Link Options: Supports the addition of dynamic link behaviors, including pop-ups, tooltips, and modal windows, enhancing the interactive experience on web pages.
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.
Compatibility and Integration: Seamlessly integrates with other GrapesJS components and plugins, maintaining consistent performance and compatibility across the platform.

GrapesJS Link Component

The GrapesJS GPT Plugin 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.
<h2>Features</h2>
<ul>
<li>Magic Icon: Easily accessible icon to invoke GPT-based content generation.</li>
<li>Content Generation: Generate new content with the help of OpenAI's GPT.</li>
<li>Content Modification: Modify existing content seamlessly.</li>
<li>Customizable Options: 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

Design once. Apply everywhere. Manage your site&rsquo;s header with zero hassle.
The Super Header Plugin brings effortless header management to GrapesJS. Instead of rebuilding or updating headers page by page, this plugin lets you design a single global header (or multiple variations) and apply them consistently across your entire project. Perfect for teams, freelancers, and agencies who value speed, consistency, and brand alignment.
Working only with Pages Manger by GrapesJS. In demo uses this <a href="../pages-manager">Pages Manager</a> plugin.
<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">
🚀 One-click global headers Create once, update once &mdash; changes instantly appear on every page.
</li>
<li data-start="826" data-end="938">
🗂 Multiple headers &amp; categories Organize different headers for site sections, projects, or clients.
</li>
<li data-start="940" data-end="1042">
🎨 Fully customizable Works seamlessly with GrapesJS &mdash; edit using the same familiar tools.
</li>
<li data-start="1044" data-end="1148">
⚡ Fast &amp; intuitive UI Designed for productivity with no extra setup or steep learning curve.
</li>
<li data-start="1150" data-end="1244">
💼 Professional results Keep your projects consistent, polished, and client-ready.
</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">
Agencies building multi-page websites
</li>
<li data-start="1306" data-end="1364">
Freelancers who need reusable, client-specific headers
</li>
<li data-start="1365" data-end="1422">
Anyone tired of editing the same header over and over
</li>
</ul>

Super Header for GrapesJS

Build once. Apply everywhere. Manage your site&rsquo;s footer with zero hassle.
The Super Footer Plugin brings effortless footer management to GrapesJS. Instead of recreating or updating footers page by page, this plugin lets you design a single global footer (or multiple variations) and apply them consistently across your entire project. Perfect for teams, freelancers, and agencies who value speed, consistency, and brand alignment.
Working only with Pages Manger by GrapesJS. In demo uses this <a href="../pages-manager">Pages Manager</a> plugin.
<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">
🚀 One-click global footers Create once, update once &mdash; changes instantly reflect on every page.
</li>
<li data-start="858" data-end="980">
🗂 Multiple footers &amp; categories Organize different footers for different site sections, clients, or projects.
</li>
<li data-start="982" data-end="1092">
🎨 Fully customizable Works seamlessly inside GrapesJS &mdash; edit with the same tools you already use.
</li>
<li data-start="1094" data-end="1204">
⚡ Fast &amp; intuitive UI Designed with productivity in mind. No extra setup, no steep learning curve.
</li>
<li data-start="1206" data-end="1300">
💼 Professional results Keep your projects consistent, polished, and client-ready.
</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">
Agencies managing multi-page websites
</li>
<li data-start="1362" data-end="1420">
Freelancers who need reusable, client-specific footers
</li>
<li data-start="1421" data-end="1488">
Anyone tired of updating the same footer manually on every page
</li>
</ul>
&nbsp;

Super Footer for GrapesJS

Enhance component interactions with smart, floating UI tooltips and contextual menus.
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.
<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">
Floating &ldquo;Add Component&rdquo; and &ldquo;More Options&rdquo; Buttons Intuitively placed icons appear next to selected components for quick access.
</li>
<li class="" data-start="623" data-end="876">
Keyboard Shortcuts Perform actions like:
<ul data-start="676" data-end="876">
<li class="" data-start="676" data-end="709">
<code data-start="678" data-end="692">Cmd/Ctrl + D</code>: Add component
</li>
<li class="" data-start="712" data-end="749">
<code data-start="714" data-end="728">Cmd/Ctrl + F</code>: Open more options
</li>
<li class="" data-start="752" data-end="785">
<code data-start="754" data-end="768">Cmd/Ctrl + E</code>: Select parent
</li>
<li class="" data-start="788" data-end="826">
<code data-start="790" data-end="808">Cmd/Ctrl + &uarr; / &darr;</code>: Move component
</li>
<li class="" data-start="829" data-end="858">
<code data-start="831" data-end="845">Cmd/Ctrl + S</code>: Duplicate
</li>
<li class="" data-start="861" data-end="876">
<code data-start="863" data-end="868">Del</code>: Delete
</li>
</ul>
</li>
<li class="" data-start="878" data-end="987">
Tooltip System Smooth tooltips with shortcuts appear on hover, enhancing usability without clutter.
</li>
<li class="" data-start="989" data-end="1200">
Animated Context Menus
<ul data-start="1022" data-end="1200">
<li class="" data-start="1022" data-end="1062">
Block insertion with filterable search
</li>
<li class="" data-start="1065" data-end="1118">
&ldquo;Convert To&rdquo; submenu for live component replacement
</li>
<li class="" data-start="1121" data-end="1200">
Actions like move, delete, duplicate, select parent &mdash; all keyboard accessible
</li>
</ul>
</li>
<li class="" data-start="1202" data-end="1322">
Integrated with <code data-start="1222" data-end="1236">BlockManager</code> Dynamically pulls available blocks with SVG/icon preview and content injection.
</li>
</ul>
Logs:
Version 0.1.5 - Updated the position for buttons and updated to GrapesJS 0.22.x
Version 0.1.3 - Adding Moving Icon and Fixing issue with menu positions
Version 0.1.1 - "Add component" &amp; "More options" &amp; Short keys

Super Tooltip for GrapesJS

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

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

Bootstrap 4 Blocks for GrapesJS

kaoz70

admin

GrapesJS Swiper Slider is a plugin for GrapesJS that adds a fully touch-enabled, responsive slider/carousel block built on Swiper. Key features:
<ul data-start="1093" data-end="1784">
<li data-start="1093" data-end="1186">
A new block: <code data-start="1108" data-end="1123">swiper-slider</code> ready for drag-&amp;-drop.
</li>
<li data-start="1187" 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.
</li>
<li data-start="1386" data-end="1479">
Compatible with GrapesJS version 0.12.60 or higher.
</li>
<li data-start="1480" data-end="1784">
Lightweight and easy to integrate: install via npm or clone from GitHub Perfect for: 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.
</li>
</ul>

GrapesJS Swiper Slider

Create beautiful, responsive web layouts in seconds with Bootstrap 5 Blocks for GrapesJS. This plugin brings the full power of Bootstrap 5 &mdash; including its modern grid system, responsive utilities, and pre-built components &mdash; directly into the GrapesJS visual editor.
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.
Perfect for: 🧩 Developers and designers building responsive templates 🎨 No-code creators who want clean Bootstrap markup 🚀 Rapid prototyping and UI layout assembly
<hr data-start="939" data-end="942">
<h3 data-start="944" data-end="960">Features</h3>
<ul data-start="961" data-end="1421">
<li data-start="961" data-end="1047">
🧱 Responsive Grid System &mdash; Includes Bootstrap 5 containers, rows, and columns
</li>
<li data-start="1048" data-end="1142">
🎛 Utility-based Styling &mdash; Supports Bootstrap&rsquo;s built-in spacing and alignment classes
</li>
<li data-start="1143" data-end="1239">
💎 Pre-made Components &mdash; Ready-to-use sections like headers, footers, cards, and buttons
</li>
<li data-start="1240" data-end="1325">
⚡ Lightweight Integration &mdash; Seamlessly plugs into GrapesJS with minimal setup
</li>
<li data-start="1326" data-end="1421">
🔄 Customizable &mdash; Extend or restyle blocks easily to match your project&rsquo;s design system
</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 Components Farmer 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 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.
<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>
⚡ Component Registration: Effortlessly register new component types and blocks.
</li>
<li>
📂 Library Management: Group and categorize components for easy retrieval and use.
</li>
<li>
🔄 Dynamic Injection: Inject components into the editor on-demand based on project needs.
</li>
<li>
🛠️ Developer Focused: Simplifies the process of working with complex custom component structures.
</li>
<li>
📈 Accelerate Development: Reuse components across multiple GrapesJS projects instantly.
</li>
</ul>

GrapesJS Components Farmer

niiknow

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.
Ideal for designers, freelancers and content editors who need to quickly prototype or build pages without deep dev-skills.
Features include: &bull; Drag-and-drop block/ component placement &bull; Instant HTML/CSS export (via &ldquo;&lt;/&gt;&rdquo; button) &bull; Works out-of-the-box with your Tailwind+DaisyUI project &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>) &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>
Perfect for building landing pages, microsites, mobile-friendly HTML apps &mdash; and fully extendable.

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>. 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. 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). Features:&nbsp;<ul><li>Auto-detect language&nbsp; </li><li>Supports 190+ multi-languages.&nbsp; </li><li>Skip to Navigation / Content / Footer&nbsp; </li><li>Content adjustment options&nbsp; </li><li>Visual and Color Adjustments&nbsp; </li><li>Customization available, including colors, size, icon, and position.&nbsp; </li><li>Reading mask&nbsp; </li><li>Accessibility statement </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>.

 </div><div> </div><div>Why one should use the GrapesJS accessibility plugin - All in One Accessibility?</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; </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; </li><li>It helps organizations align with global accessibility guidelines - such as those established by W3C.&nbsp; </li><li>It is fast to install, supports 190+ languages, and instantly improves inclusivity for visitors with visual, motor, cognitive, or auditory disabilities.&nbsp; </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>Visit the GrapesJS accessibility extension demo to see how does it performs&nbsp;with improved accessibility features:

 </div><div>https://www.youtube.com/watch?v=VMHx30aUnR4 </div><div> </div><div></div><div>Documentation&nbsp;</div><div>https://www.skynettechnologies.com/sites/default/files/accessibility-widget-features-list.pdf&nbsp; </div><div> </div><div>Submit a Support Request&nbsp;</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> </div><div>Send Us an Email</div><div>Alternatively, you can send an email to our support team:&nbsp;</div><div>mailto:hello@skynettechnologies.com </div><div> </div><div>Accessibility Paid Add-on Services

 </div><div> </div><div>GrapesJS manual accessibility audit</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; </li><li>WCAG 2.0 / WCAG 2.1 / WCAG 2.2 Level AA conformance testing&nbsp; </li><li>Automated, semi-automated testing&nbsp; </li><li>Manual testing&nbsp; </li><li>Simple before-after UI/UX recommendations on how to fix the issues&nbsp; </li><li>Comprehensive audit report </li></ul></div><div> </div><div><a href="https://www.skynettechnologies.com/full-website-accessibility-remediation">GrapesJS site manual accessibility remediation</a></div><div> </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. </div><div> </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. </div><div> </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. </div><div> </div><div>Accessibility GrapesJS Widget Paid Add-ons

 </div><div> </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.

 </div><div> </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. </div><div> </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.

 </div><div> </div><div>GrapesJS Accessibility Partnership Opportunities </div><div> </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. </div><div> </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. </div><div> </div><div>For more details, explore <a href="https://www.skynettechnologies.com/partner-program">GrapesJS accessibility partnership opportunities</a> </div><div> </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

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

All in One Accessibility

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

Skynet Technologies USA LLC

GrapesJS React Demo is a lightweight starter project that shows you exactly how to integrate the GrapesJS editor inside a modern React environment. 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.
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.
<h3 data-start="976" data-end="992">Features</h3>
<ul data-start="993" data-end="1296">
<li data-start="993" data-end="1032">
✔️ Minimal, clean React integration
</li>
<li data-start="1033" data-end="1093">
✔️ Example of mounting GrapesJS inside a React component
</li>
<li data-start="1094" data-end="1126">
✔️ Configurable init options
</li>
<li data-start="1127" data-end="1180">
✔️ Supports React hooks and functional components
</li>
<li data-start="1181" data-end="1238">
✔️ Ideal for plugins, builders, SaaS tools, and demos
</li>
<li data-start="1239" data-end="1296">
✔️ Works with any modern React + Vite/Webpack project
</li>
</ul>
<h3 data-start="1298" data-end="1318">Who it&rsquo;s for</h3>
<ul data-start="1319" data-end="1528">
<li data-start="1319" data-end="1360">
React developers integrating GrapesJS
</li>
<li data-start="1361" data-end="1414">
SaaS builders creating custom page/email builders
</li>
<li data-start="1415" data-end="1468">
Plugin creators who need a quick test environment
</li>
<li data-start="1469" data-end="1528">
Anyone who wants a working React + GrapesJS boilerplate
</li>
</ul>

Monthly Trending Products

Top 10 Most Downloaded GrapesJS Plugins

Whitener Preset GrapesJS

GrapesJS Link Component

Reactor Preset for GrapesJS

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

GrapesJS NodeJS JSON Converter to HTML/CSS

TinyMCE 6 Inline Text Editor

Placeholder 2.0 - Elevating Component Dragging Experience

GrapesJS Inline Text Editor — Compatible with CKEditor 5

GrapesJS LayoutEnhancer: Precision Spacing Tool

Froala Inline Text Editor

Top 10 Best-Selling GrapesJS Plugins

TinyMCE 6 Inline Text Editor

Froala Inline Text Editor

Placeholder 2.0 - Elevating Component Dragging Experience

GrapesJS LayoutEnhancer: Precision Spacing Tool

GrapesJS Inline Text Editor — Compatible with CKEditor 5

Grapesjs Paneless

Grapesjs Tailwind Dark

Grapesjs Wix Like

Grapesjs Component Icon

Pages Manager

Popular GrapesJS Categories

Plugins

RTE

Blocks

Presets

Components

Newsletters

Become an Author on GJS Market

High Revenue

Large Audience

Full Support