Feature Kits

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

Feature kits live under components/editor/plugins after installation. Full editor kits like editor-kit and editor-base-kit live under components/editor. 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.

import { Plate, usePlateEditor } from 'platejs/react';

import { BasicNodesKit } from '@/components/editor/plugins/basic-nodes-kit';
import { TableKit } from '@/components/editor/plugins/table-kit';
import { Editor, EditorContainer } from '@/components/ui/editor';

export function MyEditor() {
  const editor = usePlateEditor({
    plugins: [...BasicNodesKit, ...TableKit],
  });

  return (
    <Plate editor={editor}>
      <EditorContainer>
        <Editor />
      </EditorContainer>
    </Plate>
  );
}

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

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.

import { BaseEditorKit } from '@/components/editor/editor-base-kit';
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.

import { H1Plugin } from '@platejs/basic-nodes/react';
import { ParagraphPlugin } from 'platejs/react';

import { H1Element } from '@/components/ui/heading-node';
import { ParagraphElement } from '@/components/ui/paragraph-node';

export const MyBasicKit = [
  ParagraphPlugin.withComponent(ParagraphElement),
  H1Plugin.configure({
    node: {
      component: H1Element,
    },
    shortcuts: {
      toggle: { keys: 'mod+alt+1' },
    },
  }),
];

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 registry items. These names map to files in components/editor/plugins or components/editor.

Next Steps