grapesjs-studio-sdk

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

GrapesJS Studio SDK 是一款可嵌入应用中的完全可定制可视化构建器，可用于创建：

网站与落地页
新闻通讯与邮件内容
文档编辑器

本指南适用于安装、配置、插件集成及项目类型实现场景。

Installation

安装

bash

npm i @grapesjs/studio-sdk

bash

npm i @grapesjs/studio-sdk

Initial Editor Load

编辑器初始加载

React:

tsx

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'
  },
});

React:

tsx

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

JavaScript (其他框架或原生):

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

在
```
localhost
```
环境下，任意字符串均可用于本地开发。
在非
```
localhost
```
域名下，需要有效的
```
licenseKey
```
。更多信息: 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.

rules/project-types/email.md - 使用邮件模式创建MJML格式的新闻通讯，进行邮件内容编辑。
rules/project-types/web.md - 使用网页模式创建网站与落地页，支持多页面内容结构。
rules/project-types/document.md - 使用文档模式创建类印刷布局，提供文档导向的默认配置。

完成初始安装与项目类型选择后，下一步需配置持久化功能：

要让编辑器完全可用，接下来的重要步骤是配置持久化：定义项目的加载与保存方式，以及上传资源的存储与检索方式。

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.

rules/configuration/overview.md - 了解所有主要配置领域及其在集成中的协同方式。
rules/configuration/projects.md - 设置项目初始化、项目数据存储、加载、保存及导出行为。
rules/configuration/blocks.md - 定义可复用的组件库、分类，供终端用户拖拽到画布中。
rules/configuration/components/overview.md - 了解组件类型注册、解析规则及自定义组件架构。
rules/configuration/components/properties.md - 参考完整的组件属性模型，该模型控制组件的结构、行为、样式及导出。
rules/configuration/components/methods.md - 使用组件模型/视图API以编程方式检查、修改和扩展组件。
rules/configuration/assets/overview.md - 配置资源管理器中的资源上传、存储及浏览行为。
rules/configuration/assets/asset-providers.md - 连接外部资源服务，定义自定义媒体源的提供商集成。
rules/configuration/fonts.md - 配置可用字体、自定义源及提供商集成，实现排版控制。
rules/configuration/global-styles.md - 定义用户可编辑的共享样式控件，确保样式在项目内容中一致应用。
rules/configuration/layout/overview.md - 控制面板布局及编辑器整体UI结构。
rules/configuration/layout/components.md - 使用布局组件及其属性选项组合编辑器UI。
rules/configuration/pages.md - 管理多页面项目：创建页面、切换上下文及处理页面级编辑。
rules/configuration/templates.md - 配置模板目录及新项目的模板选择流程。
rules/configuration/themes.md - 自定义编辑器界面的UI主题令牌、图标及视觉样式。
rules/configuration/datasources/overview.md - 使用记录、变量、条件及可重复输出模式将结构化数据绑定到内容。
rules/configuration/datasources/template-engines.md - 集成模板引擎，映射数据绑定语法以支持渲染及导入/导出工作流。

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.

rules/plugins/ai/overview.md - 了解AI插件的整体架构及UI与后端之间的职责划分。
rules/plugins/ai/ai-backend.md - 实现后端AI处理，包括请求流程与流式响应。
rules/plugins/ai/ai-chat.md - 在编辑器体验中添加并配置AI聊天UI行为。
rules/plugins/asset-providers/google-fonts.md - 添加Google Fonts作为资源提供商，支持字体查找与插入。
rules/plugins/asset-providers/youtube-asset-provider.md - 添加YouTube作为资源源，支持视频媒体的选择与嵌入。
rules/plugins/canvas/absolute-mode.md - 启用自由形式的绝对定位，支持基于坐标的布局编辑。
rules/plugins/canvas/emptyState.md - 自定义画布组件内的空状态占位符与入门提示。
rules/plugins/canvas/full-size.md - 启用全尺寸画布模式，支持编辑超出视口限制的大型布局。
rules/plugins/canvas/grid-mode.md - 在画布中启用可视化CSS Grid编辑控件。
rules/plugins/components/accordion.md - 提供可配置章节与交互行为的折叠面板组件。
rules/plugins/components/animation.md - 添加可配置的动画行为，实现内容过渡与效果。
rules/plugins/components/dialog.md - 提供可配置内容与交互选项的对话框/模态框组件。
rules/plugins/components/flex.md - 添加基于Flex的布局块，加速响应式行列布局的构建。
rules/plugins/components/fslightbox.md - 添加基于FsLightbox的媒体查看交互功能。
rules/plugins/components/iconify.md - 集成Iconify图标库，支持基于选择器的图标插入。
rules/plugins/components/lightGallery.md - 添加基于LightGallery的图库与媒体浏览组件。
rules/plugins/components/listPages.md - 根据项目页面模型动态生成导航页面列表。
rules/plugins/components/swiper.md - 添加基于Swiper的轮播/滑块组件，支持可配置行为。
rules/plugins/components/table.md - 添加增强型表格组件，提供更丰富的编辑控件。
rules/plugins/custom-renderer/react.md - 自定义画布渲染器，使用自有React组件构建并渲染项目。
rules/plugins/data-sources/ejs.md - 使用EJS作为模板引擎，支持数据源驱动的渲染与导出。
rules/plugins/data-sources/handlebars.md - 使用Handlebars作为模板引擎，支持数据源驱动的渲染与导出。
rules/plugins/layout/sidebar-buttons.md - 添加侧边栏操作布局，快速访问常用编辑器面板。
rules/plugins/preset/printable.md - 应用面向印刷的默认配置与组件，适用于文档类布局。
rules/plugins/rte/prosemirror.md - 替换默认富文本编辑器，集成ProseMirror。
rules/plugins/rte/tinymce.md - 替换默认富文本编辑器，集成TinyMCE。