grapesjs-studio-sdk

GrapesJS Studio SDK

GrapesJS Studio SDK is a fully customizable visual builder you can embed in your app to create:

• Website and landing pages
• Newsletters and email content
• Document editor

Use this skill for setup, configuration, plugin integration, and project type implementation.

Installation

npm i @grapesjs/studio-sdk

Initial Editor Load

React:

import StudioEditor from "@grapesjs/studio-sdk/react";
import "@grapesjs/studio-sdk/style";
// ...
<StudioEditor
  options={{
    licenseKey: "LOCAL_LICENSE_KEY",
    project: {
      type: "web", // 'email' | 'document'
    },
  }}
/>;

JavaScript (other frameworks or vanilla):

import createStudioEditor from "@grapesjs/studio-sdk";
import "@grapesjs/studio-sdk/style";
// ...
createStudioEditor({
  licenseKey: "LOCAL_LICENSE_KEY",
  project: {
    type: "web", // 'email' | 'document'
  },
});

License Key Behavior

• On localhost, any string is valid for local development.
• On non-localhost domains, a valid licenseKey is required. More info: rules/overview/licenses.md

Project Types

• rules/project-types/email.md - Use email mode for MJML newsletter composition and email-oriented editing.
• rules/project-types/web.md - Use web mode for websites and landing pages with multi-page content structures.
• rules/project-types/document.md - Use document mode for print-like layouts with document-oriented defaults.

After the initial setup and project-type choice, configure persistence next:

To make the editor fully functional, the next important step is persistence: define how projects are loaded and saved, and how uploaded assets are stored and retrieved.

Configuration

• rules/configuration/overview.md - Navigate all major configuration areas and how they fit together in an integration.
• rules/configuration/projects.md - Set up project initialization, storage of projects data, loading, saving, and export behavior.
• rules/configuration/blocks.md - Define reusable block libraries, categories, the end-user can drop into the canvas.
• rules/configuration/components/overview.md - Understand component type registration, parsing rules, and custom component architecture.
• rules/configuration/components/properties.md - Reference the full component property model that controls structure, behavior, style, and export.
• rules/configuration/components/methods.md - Use component model/view APIs to inspect, mutate, and extend components programmatically.
• rules/configuration/assets/overview.md - Configure asset upload, storage, and browsing behavior in the asset manager.
• rules/configuration/assets/asset-providers.md - Connect external asset services and define provider integrations for custom media sources.
• rules/configuration/fonts.md - Configure available fonts, custom sources, and provider integrations for typography control.
• rules/configuration/global-styles.md - Define shared style controls editable by users and applied consistently across project content.
• rules/configuration/layout/overview.md - Control panel placement and overall editor UI layout structure.
• rules/configuration/layout/components.md - Compose editor UI with Layout Components and their property options.
• rules/configuration/pages.md - Manage multi-page projects: create pages, switch context, and handle page-level editing.
• rules/configuration/templates.md - Configure template catalogs and template selection flows for new projects.
• rules/configuration/themes.md - Customize UI theme tokens, iconography, and visual styling of the editor interface.
• rules/configuration/datasources/overview.md - Bind structured data to content using records, variables, conditions, and repeatable output patterns.
• rules/configuration/datasources/template-engines.md - Integrate template engines and map data-binding syntax for rendering and import/export workflows.

Plugins

• rules/plugins/ai/overview.md - Understand overall AI plugin architecture and responsibilities between UI and backend.
• rules/plugins/ai/ai-backend.md - Implement backend-side AI handling, including request flow and streaming responses.
• rules/plugins/ai/ai-chat.md - Add and configure AI chat UI behavior inside the editor experience.
• rules/plugins/asset-providers/google-fonts.md - Add Google Fonts as an asset provider for font discovery and insertion.
• rules/plugins/asset-providers/youtube-asset-provider.md - Add YouTube as an asset source for selecting and embedding video media.
• rules/plugins/canvas/absolute-mode.md - Enable freeform absolute positioning for coordinate-based layout editing.
• rules/plugins/canvas/emptyState.md - Customize empty-state placeholders and onboarding hints inside canvas components.
• rules/plugins/canvas/full-size.md - Enable full-size canvas mode for editing large layouts beyond viewport constraints.
• rules/plugins/canvas/grid-mode.md - Enable visual CSS Grid editing controls directly in the canvas.
• rules/plugins/components/accordion.md - Provide accordion components with configurable sections and interaction behavior.
• rules/plugins/components/animation.md - Add configurable animation behaviors for content transitions and effects.
• rules/plugins/components/dialog.md - Provide dialog/modal components with configurable content and interaction options.
• rules/plugins/components/flex.md - Add flex-based layout blocks to speed up responsive row/column composition.
• rules/plugins/components/fslightbox.md - Add FsLightbox-powered media viewing interactions.
• rules/plugins/components/iconify.md - Integrate Iconify collections with picker-based icon insertion.
• rules/plugins/components/lightGallery.md - Add LightGallery-powered gallery and media browsing components.
• rules/plugins/components/listPages.md - Generate navigational page lists dynamically from the project page model.
• rules/plugins/components/swiper.md - Add Swiper-based carousel/slider components with configurable behavior.
• rules/plugins/components/table.md - Add enhanced table components with richer editing controls.
• rules/plugins/custom-renderer/react.md - Custom canvas renderer to build and render projects using your own React componenst.
• rules/plugins/data-sources/ejs.md - Use EJS as the template engine for data-source-driven rendering and export.
• rules/plugins/data-sources/handlebars.md - Use Handlebars as the template engine for data-source-driven rendering and export.
• rules/plugins/layout/sidebar-buttons.md - Add sidebar action layouts for quick access to common editor panels.
• rules/plugins/preset/printable.md - Apply printable-oriented defaults and components for document-focused layouts.
• rules/plugins/rte/prosemirror.md - Replace the default rich-text editor with a ProseMirror integration.
• rules/plugins/rte/tinymce.md - Replace the default rich-text editor with a TinyMCE integration.