GrapesJS v1.x ships with complete TypeScript definitions — no separate @types package needed. This guide covers the most important type imports, how to type your editor instance, write typed plugins, and define typed custom components. All examples are compatible with GrapesJS v1.x and TypeScript 4.x+.
Key GrapesJS types
Editor
The main editor instance. Import from "grapesjs" and use as the type for your editor variable.
Component
Represents a single component in the canvas. Returned by ComponentManager methods and events.
Block
A draggable block definition. Returned by BlockManager.get() and BlockManager.getAll().
ComponentDefinition
Type for registering new component types via ComponentManager.addType().
ComponentProperties
Type for the defaults property inside a ComponentDefinition model.
StorageManager
Type for the storage manager config object and the storage manager instance.
Typing the editor instance and events
import grapesjs from 'grapesjs';
import type { Editor, Component, Block } from 'grapesjs';
// Typed editor instance
let editor: Editor | null = null;
editor = grapesjs.init({
container: '#gjs',
storageManager: false,
});
// Typed event handlers
editor.on('component:add', (component: Component) => {
console.log('Added component:', component.get('type'));
});
// Typed block access
const blockManager = editor.BlockManager;
const blocks: Block[] = blockManager.getAll().models;Writing a typed GrapesJS plugin
import type { Editor } from 'grapesjs';
interface MyPluginOptions {
apiKey?: string;
debug?: boolean;
}
const myPlugin = (editor: Editor, opts: MyPluginOptions = {}) => {
const { apiKey = '', debug = false } = opts;
editor.BlockManager.add('custom-block', {
label: 'Custom Block',
category: 'Custom',
content: '<div class="custom-block">Custom content</div>',
});
if (debug) {
console.log('Plugin initialized with API key:', apiKey);
}
};
export default myPlugin;Typed custom component definition
import type { ComponentDefinition, ComponentProperties } from 'grapesjs';
// Typed component definition
const heroComponent: ComponentDefinition = {
model: {
defaults: {
tagName: 'section',
draggable: true,
droppable: false,
attributes: { class: 'hero-section' },
traits: [
{ type: 'text', name: 'headline', label: 'Headline' },
{ type: 'text', name: 'subheadline', label: 'Subheadline' },
],
} as ComponentProperties,
},
};
editor.ComponentManager.addType('hero', heroComponent);GrapesJS TypeScript FAQ
TypeScript-compatible plugins on GJS.Market
All premium GJS.Market plugins ship with TypeScript definitions.
Browse plugins →