GrapesJS DevFuture

Modernized GrapesJS preset UI with improved panel UX, vanilla JavaScript interactions, Bootstrap 5 local runtime, and custom signature workflow.

Highlights

• Updated GrapesJS stack with pinned stable versions.
• Sidebar UX refresh (Blocks/Styles behavior, floating action controls).
• Vanilla JS event handling (no jQuery dependency in app logic).
• Local Bootstrap runtime (assets/vendor/bootstrap/js/bootstrap.min.js).
• Rich text support with ScribeJS plugin.
• Signature block in Extra category:
  • drag/drop placeholder,
  • double-click to open signature modal,
  • undo/redo/clear in modal,
  • save PNG to canvas component and Asset Manager.

Changelog

2026-02-16

• Upgraded GrapesJS ecosystem to stable pinned versions.
• Migrated editor interactions from jQuery-style handlers to vanilla JavaScript.
• Updated UI runtime to local Bootstrap 5.3.8 bundle.
• Refined editor sidebars, panel toggles, search, and floating action controls.
• Added and configured ScribeJS RTE plugin for richer in-canvas text editing.
• Added Signature block in Extra with AutographJS-powered modal workflow.
• Implemented signature replacement history in modal (Undo/Redo between old and new sign).

2026-02-15

• Initial UI/UX modernization pass for panel layout and style manager sectors.
• Introduced command-based panel control architecture for cleaner behavior.

Featured Integrations

ScribeJS RTE Plugin (Rich Text Editing)

GJS: https://gjs.market/products/rte-scribejs-for-grapesjs-inline-toolbar

ScribeJS gives this preset a smoother authoring experience for content teams:

• clean inline editing directly inside the GrapesJS canvas,
• practical toolbar actions for common formatting,
• responsive toolbar behavior for different viewport sizes.

If you are building email/page templates where non-technical users edit text often, this integration is a strong productivity upgrade.

AutographJS Signature Workflow

AutographJS powers a production-ready signature flow in the editor:

GitHub: https://github.com/GoodPHP/AutographJS

• add a Signature block from Extra,
• open the editor by double-clicking the block,
• draw, undo/redo, clear, and insert the final signature,
• automatically save PNG into both the canvas component and GrapesJS Asset Manager.

This makes it easy to prepare signed templates (contracts, forms, approvals) without leaving the builder.

Pinned Frontend Dependencies

• grapesjs@0.22.14
• grapesjs-blocks-basic@1.0.2
• grapesjs-navbar@1.0.2
• grapesjs-plugin-forms@2.0.6
• grapesjs-plugin-scribejs@1.0.28
• bootstrap@5.3.8 (local vendor files)
• autographjs@1.0.1 (browser ESM import)

Run Locally

This project is static HTML/CSS/JS.

1. Open index.html directly in the browser, or
2. Serve the folder with any local static server.

Example:

python3 -m http.server 8080

Then open http://localhost:8080.

NPM Preset Package

This repository now includes a publish-ready package:

• packages/grapesjs-preset-devfuture

Quick usage after publish:

npm i grapesjs grapesjs-preset-devfuture

import grapesjs from 'grapesjs';
import grapesjsPresetDevfuture from 'grapesjs-preset-devfuture';

import 'grapesjs/dist/css/grapes.min.css';
import 'grapesjs-preset-devfuture/style.css';
import 'grapesjs-preset-devfuture/custom-grapesjs.css';

grapesjs.init({
	container: '#gjs',
	plugins: [grapesjsPresetDevfuture],
	pluginsOpts: {
		[grapesjsPresetDevfuture]: {
			setupManagers: true,
			setupBlocks: true,
			setupSignatureBlock: true
		}
	}
});

Publish:

cd packages/grapesjs-preset-devfuture
npm publish --access public

Project Links

• Demo: https://devfuture.pro/live/new-design-grapesjs/
• GJS.MARKET: https://gjs.market/authors/devfuture-development
• Website: https://devfuture.pro/
• Support: support@devfuture.pro
• AutographJS: https://autographjs.top/
• ScribeJS: https://scribejs.top/

License

Licensed under GNU General Public License v3.0. See LICENSE.