From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
  • Feature Kits
  • Plugin
    • Plugin Methods
    • Plugin Shortcuts
    • Plugin Context
    • Plugin Components
    • Plugin Rules
    • Editing Behavior
    • Plugin Input Rules
  • Editor
    • Editor Methods
    • Controlled Value
  • Performance
  • Static Rendering
  • HTML
  • Markdown
  • Form
  • TypeScript
  • Debugging
  • Unit Testing
  • Browser
  • Troubleshooting

Feature Kits

PreviousNext

Use registry kits to add groups of Plate plugins and UI wiring.

Feature kits are app-owned registry files that group related Plate plugins, components, shortcuts, input rules, and helper UI. Use them to start from working Plate UI wiring, then edit the installed kit when your app needs different behavior.

Kit Types

Kit typeExampleUse for
Client/UI kitbasic-nodes, table, mediaEditable React editors with Plate UI components.
Base kitbasic-blocks-static, table-static
Improving PerformancePlugin

On This Page

Kit TypesUse a KitChoose the Right KitBase KitsCustomize a KitRegistry NamesNext Steps
Build your editor
Production-ready AI template and reusable components.
Get all-access
Static rendering and server-safe editor setup.
Full editor kiteditor-pluginsA complete client editor feature stack.
Full base kiteditor-plugins-staticA broad static/base plugin stack.

Feature kits live directly under components/editor after installation. The file and registry item use the feature name, while the exported value keeps the Kit suffix: link.tsx exports LinkKit. They are normal TypeScript files in your app, not package exports locked inside node_modules.

Use a Kit

Install the kit through the Plate registry, then import it from your app.

components/editor.tsx
import { Plate, usePlateEditor } from 'platejs/react';
 
import { BasicNodesKit } from '@/components/editor/basic-nodes';
import { TableKit } from '@/components/editor/table';
import { Editor, EditorContainer } from '@/components/editor/editor';
 
export function MyEditor() {
  const editor = usePlateEditor({
    plugins: [...BasicNodesKit, ...TableKit],
  });
 
  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor />
      </EditorContainer>
    </Plate>
  );
}
components/editor.tsx
import { Plate, usePlateEditor } from 'platejs/react';
 
import { BasicNodesKit } from '@/components/editor/basic-nodes';
import { TableKit } from '@/components/editor/table';
import { Editor, EditorContainer } from '@/components/editor/editor';
 
export function MyEditor() {
  const editor = usePlateEditor({
    plugins: [...BasicNodesKit, ...TableKit],
  });
 
  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor />
      </EditorContainer>

BasicNodesKit composes BasicBlocksKit and BasicMarksKit. For example, BasicBlocksKit wires paragraph, headings, blockquote, and horizontal rule plugins to their Plate UI components; BasicMarksKit wires marks, input rules, shortcuts, and mark leaf components.

Choose the Right Kit

NeedStart with
Paragraphs, headings, blockquotes, marks.basic-nodes
Tables with table UI components.table
Images, video, audio, files, embeds, captions.media
Comments and discussions.comment plus discussion
AI menu, AI nodes, cursor overlay, and Markdown support.ai
Full editable editor stack.editor-plugins
Static or server-rendered output.editor-plugins-static or focused *-static files

Plugin pages show the recommended kit in their installation section. Use the kit source when you need the exact plugin list, imported UI components, shortcuts, or registry dependencies.

Base Kits

Base kits use base plugins and static components. They are the right starting point for Static Rendering, Node.js, and other non-editable pipelines.

static-editor.ts
import { BaseEditorKit } from '@/components/editor/plugins-static';
import { createStaticEditor } from 'platejs/static';
 
const editor = createStaticEditor({
  plugins: BaseEditorKit,
});
static-editor.ts
import { BaseEditorKit } from '@/components/editor/plugins-static';
import { createStaticEditor } from 'platejs/static';
 
const editor = createStaticEditor({
  plugins: BaseEditorKit,
});

Use client kits in editable React editors. Use base kits when React editor hooks, editable components, floating UI, or browser-only behavior should stay out of the runtime.

Customize a Kit

Because kits are copied into your app, the cleanest customization is usually to edit the installed kit file.

components/editor/my-basic.tsx
import { HeadingPlugin } from '@platejs/basic-nodes/react';
import { ParagraphPlugin } from 'platejs/react';
 
import { HeadingElement } from '@/components/editor/heading';
import { ParagraphElement } from '@/components/editor/paragraph';
 
export const MyBasicKit = [
  ParagraphPlugin.configure({ component: ParagraphElement }),
  HeadingPlugin.configure({
    component: HeadingElement,
  }),
];
components/editor/my-basic.tsx
import { HeadingPlugin } from '@platejs/basic-nodes/react';
import { ParagraphPlugin } from 'platejs/react';
 
import { HeadingElement } from '@/components/editor/heading';
import { ParagraphElement } from '@/components/editor/paragraph';
 
export const MyBasicKit = [
  ParagraphPlugin.configure({ component: ParagraphElement }),
  HeadingPlugin.configure({
    component: HeadingElement,
  }),
];

Use manual plugin setup when you only need a small part of a kit, when the app does not use Plate UI components, or when a feature needs a different dependency boundary.

Registry Names

Kits are exported composition values. Registry items and files use feature names and install directly into components/editor.

Registry itemInstalls
basic-nodesBasicNodesKit, BasicBlocksKit, and BasicMarksKit dependencies.
tableTableKit and table UI components.
mediaMediaKit without a media upload API route.
media-uploadthingmedia plus the UploadThing API route.
editor-pluginsThe full editable editor kit.
editor-plugins-staticThe full static/base kit.

editor-plugins installs the authored EditorKit source only. When an app needs exact generated Editor or Value contracts, generate them from its customized plugin module and run plate generate --check <entry> in CI. See Exact Generated Editor Types.

Next Steps

TaskGuide
Install registry items.Plate UI
Configure editor creation.Editor Configuration
Compose plugin APIs and options.Plugin Methods
Render without an editable React editor.Static Rendering
</
Plate
>
);
}