From zbeyens. The source code is available on GitHub.

Plate
PlatePliteEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Discussion
    • Comments
    • Suggestion
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • List Classic
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Toggle
  • Marks
    • Bold
    • Italic
    • Underline
    • Code
    • Highlight
    • Keyboard Input
    • Strikethrough
    • Subscript
    • Superscript
      • Font
      • Line Height
      • Text Align
    • Indent
    • List
      • Exit Break
      • Single Block
      • Trailing Block
    • Autoformat
    • Block Menu
    • Block Placeholder
    • Combobox
      • Emoji
      • MentionElement
      • Slash Command
    • Cursor Overlay
    • Drag & Drop
    • Navigation Feedback
    • Tabbable
    • Toolbar
    • Yjs
    • Multi SelectEditor
    • CSV
    • DOCX
    • HTML
    • Markdown

Basic Blocks

PreviousNext

Paragraphs, headings, blockquotes, and horizontal rules.

Paragraph ElementHeading ElementBlockquote ElementHorizontal Rule Element

Basic Blocks is the registry kit for the common structural blocks in a Plate editor. It wires paragraphs, six heading levels, blockquotes, and horizontal rules to Plate UI components. Use the leaf docs when you need the behavior details for one block type.

Heading

Structure content with H1 through H6 blocks.

Blockquote

Wrap quoted or emphasized content in a blockquote.

Horizontal Rule

Insert a void divider between sections.

Loading…
SuggestionBlockquote

On This Page

FeaturesFast PathAdd The KitAdd Static RenderingOwnershipIncluded PluginsMarkdown ShortcutsManual SetupAPI Reference
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

  • Paragraph, H1-H6, blockquote, and horizontal rule components.
  • Markdown shortcuts for headings, blockquotes, and horizontal rules.
  • Keyboard shortcuts for heading toggles and blockquote toggling.
  • Static rendering companion through basic-blocks-static.
  • Leaf docs for block-specific setup and API details.
Report an issue

Fast Path

Add The Kit

BasicBlocksKit is the normal app/editor kit. It installs the React plugins and the matching registry UI components.

'use client';
 
import {
  BlockquoteRules,
  HeadingRules,
  HorizontalRuleRules,
} from '@platejs/basic-nodes';
import {
  BlockquotePlugin,
  HeadingPlugin,
  HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { ParagraphPlugin } from 'platejs/react';
 
import { BlockquoteElement } from '@/components/editor/blockquote';
import { HeadingElement } from '@/components/editor/heading';
import { HrElement } from '@/components/editor/horizontal-rule';
import { ParagraphElement } from '@/components/editor/paragraph';
 
export const BasicBlocksKit = [
  ParagraphPlugin.configure({ component: ParagraphElement }),
  HeadingPlugin.configure({
    component: HeadingElement,
    inputRules: [HeadingRules.markdown()],
    rules: {
      break: { empty: 'reset' },
    },
    shortcuts: {
      toggleHeading1: {
        handler: ({ editor }) => {
          editor.plugin(HeadingPlugin).update.toggle({ level: 1 });
        },
        keys: 'mod+alt+1',
      },
      toggleHeading2: {
        handler: ({ editor }) => {
          editor.plugin(HeadingPlugin).update.toggle({ level: 2 });
        },
        keys: 'mod+alt+2',
      },
      toggleHeading3: {
        handler: ({ editor }) => {
          editor.plugin(HeadingPlugin).update.toggle({ level: 3 });
        },
        keys: 'mod+alt+3',
      },
      toggleHeading4: {
        handler: ({ editor }) => {
          editor.plugin(HeadingPlugin).update.toggle({ level: 4 });
        },
        keys: 'mod+alt+4',
      },
      toggleHeading5: {
        handler: ({ editor }) => {
          editor.plugin(HeadingPlugin).update.toggle({ level: 5 });
        },
        keys: 'mod+alt+5',
      },
      toggleHeading6: {
        handler: ({ editor }) => {
          editor.plugin(HeadingPlugin).update.toggle({ level: 6 });
        },
        keys: 'mod+alt+6',
      },
    },
  }),
  BlockquotePlugin.configure({
    component: BlockquoteElement,
    inputRules: [BlockquoteRules.markdown()],
    shortcuts: { toggle: { keys: 'mod+shift+period' } },
  }),
  HorizontalRulePlugin.configure({
    component: HrElement,
    inputRules: [
      HorizontalRuleRules.markdown({ variant: '-' }),
      HorizontalRuleRules.markdown({ variant: '_' }),
    ],
  }),
] as const;
'use client';
 
import {
  BlockquoteRules,
  HeadingRules,
  HorizontalRuleRules,
} from '@platejs/basic-nodes';
import {
  BlockquotePlugin,
  HeadingPlugin,
  HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { ParagraphPlugin } from 'platejs/react';
 
import { BlockquoteElement } from '@/components/editor/blockquote';
import { HeadingElement } from '@/components/editor/heading';
import { HrElement } from '@/components/editor/horizontal-rule';
import { ParagraphElement } from '@/components/editor/paragraph';
 




























































import { createPlateEditor } from 'platejs/react';
 
import { BasicBlocksKit } from '@/components/editor/basic-blocks';
 
export const editor = createPlateEditor({
  plugins: [...BasicBlocksKit],
});
import { createPlateEditor } from 'platejs/react';
 
import { BasicBlocksKit } from '@/components/editor/basic-blocks';
 
export const editor = createPlateEditor({

Add Static Rendering

Use BaseBasicBlocksKit in static or server-safe rendering paths.

import {
  BaseBlockquotePlugin,
  BaseHeadingPlugin,
  BaseHorizontalRulePlugin,
} from '@platejs/basic-nodes';
import { BaseParagraphPlugin } from 'platejs';
 
import { BlockquoteElementStatic } from '@/components/editor/blockquote-static';
import { HeadingElementStatic } from '@/components/editor/heading-static';
import { HrElementStatic } from '@/components/editor/horizontal-rule-static';
import { ParagraphElementStatic } from '@/components/editor/paragraph-static';
 
export const BaseBasicBlocksKit = [
  BaseParagraphPlugin.configure({
    component: ParagraphElementStatic,
  }),
  BaseHeadingPlugin.







import { createStaticEditor } from 'platejs/static';
 
import { BaseBasicBlocksKit } from '@/components/editor/basic-blocks-static';
 
const value = [
  {
    children: [{ text: 'Static content' }],
    type: 'paragraph',
  },
];
 
export const staticEditor = createStaticEditor({
  plugins: [...BaseBasicBlocksKit],
  initialValue: value,
});

Ownership

LayerOwnerWhat It Does
platejs/reactPackageExports ParagraphPlugin.
@platejs/basic-nodesPackageExports block rules and individual base block plugins.
@platejs/basic-nodes/reactPackageExports the individual React block plugins.
basic-blocksRegistryAdds React UI components, input rules, break rules, and shortcuts.
basic-blocks-staticRegistryAdds static UI components for static rendering.
Leaf pagesDocsOwn block-specific behavior: Heading, Blockquote, and Horizontal Rule.

The package owns each capability. The registry owns the app preset and keeps its plugin selection, rendering, input rules, and shortcuts editable.

Included Plugins

BlockPluginRegistry ComponentNotes
ParagraphParagraphPluginParagraphElementComes from platejs/react; the registry kit adds the UI component.
Heading 1-6HeadingPlugin through HeadingPluginHeadingElement through HeadingElementEach level gets a markdown rule and mod+alt+<level> shortcut.
BlockquoteBlockquotePluginBlockquoteElementUses a wrapping transform and mod+shift+period.
Horizontal ruleHorizontalRulePluginHrElementVoid block; supports dash and underscore markdown rules.

Markdown Shortcuts

ShortcutResult
# through ###### Converts the current paragraph into H1 through H6.
> Wraps the current block in a blockquote.
---Converts the current block into a horizontal rule, then inserts a paragraph after it.
___ Converts the current block into a horizontal rule, then inserts a paragraph after it.

See Plugin Input Rules for the rule engine and trigger model.

Manual Setup

Use manual setup when you want the package plugins without the registry kit.

pnpm add @platejs/basic-nodes
pnpm add @platejs/basic-nodes
import {
  BlockquoteRules,
  HeadingRules,
  HorizontalRuleRules,
} from '@platejs/basic-nodes';
import {
  BlockquotePlugin,
  HeadingPlugin,
  
  
  
  
  
  HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { createPlateEditor, ParagraphPlugin } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [
    ParagraphPlugin,
    HeadingPlugin.configure({
      inputRules: [HeadingRules.markdown()],
      shortcuts: { toggle: { keys: 'mod+alt+1' } },
    }),
    HeadingPlugin.configure({
      inputRules: [HeadingRules.markdown()],
      shortcuts: { toggle: { keys: 'mod+alt+2' } },
    }),
    HeadingPlugin.configure({
      inputRules: [HeadingRules.markdown()],
      shortcuts: { toggle: { keys: 'mod+alt+3' } },
    }),
    HeadingPlugin.configure({
      inputRules: [HeadingRules.markdown()],
      shortcuts: { toggle: { keys: 'mod+alt+4' } },
    }),
    HeadingPlugin.configure({
      inputRules: [HeadingRules.markdown()],
      shortcuts: { toggle: { keys: 'mod+alt+5' } },
    }),
    HeadingPlugin.configure({
      inputRules: [HeadingRules.markdown()],
      shortcuts: { toggle: { keys: 'mod+alt+6' } },
    }),
    BlockquotePlugin.configure({
      inputRules: [BlockquoteRules.markdown()],
      shortcuts: { toggle: { keys: 'mod+shift+period' } },
    }),
    HorizontalRulePlugin.configure({
      inputRules: [
        HorizontalRuleRules.markdown({ variant: '-' }),
        HorizontalRuleRules.markdown({ variant: '_' }),
      ],
    }),
  ],
});
import {
  BlockquoteRules,
  HeadingRules,
  HorizontalRuleRules,
} from '@platejs/basic-nodes';
import {
  BlockquotePlugin,
  HeadingPlugin,
  
  
  
  
  
  HorizontalRulePlugin,
} from '@platejs/basic-nodes/react';
import { createPlateEditor, ParagraphPlugin } from 'platejs/react';
 
export const editor = createPlateEditor({
  plugins: [
    ParagraphPlugin,
    HeadingPlugin.configure({
      inputRules: [HeadingRules.markdown()],
      shortcuts: { toggle: { keys:

API Reference

APIUse
BasicBlocksKit from @/components/editor/basic-blocksApp-owned React preset for paragraph, blockquote, H1-H6, and horizontal rule behavior.
BaseBasicBlocksKit from @/components/editor/basic-blocks-staticApp-owned static/base preset for the same block family.
HeadingRules.markdown()Creates heading input rules based on the configured H1-H6 plugin name.
BlockquoteRules.markdown()Creates the > block-start rule.
HorizontalRuleRules.markdown({ variant })Creates dash or underscore thematic-break rules.
export
const
BasicBlocksKit
=
[
ParagraphPlugin.configure({ component: ParagraphElement }),
HeadingPlugin.configure({
component: HeadingElement,
inputRules: [HeadingRules.markdown()],
rules: {
break: { empty: 'reset' },
},
shortcuts: {
toggleHeading1: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 1 });
},
keys: 'mod+alt+1',
},
toggleHeading2: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 2 });
},
keys: 'mod+alt+2',
},
toggleHeading3: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 3 });
},
keys: 'mod+alt+3',
},
toggleHeading4: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 4 });
},
keys: 'mod+alt+4',
},
toggleHeading5: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 5 });
},
keys: 'mod+alt+5',
},
toggleHeading6: {
handler: ({ editor }) => {
editor.plugin(HeadingPlugin).update.toggle({ level: 6 });
},
keys: 'mod+alt+6',
},
},
}),
BlockquotePlugin.configure({
component: BlockquoteElement,
inputRules: [BlockquoteRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+period' } },
}),
HorizontalRulePlugin.configure({
component: HrElement,
inputRules: [
HorizontalRuleRules.markdown({ variant: '-' }),
HorizontalRuleRules.markdown({ variant: '_' }),
],
}),
] as const;
plugins: [...BasicBlocksKit],
});
configure
({ component: HeadingElementStatic }),
BaseBlockquotePlugin.configure({
component: BlockquoteElementStatic,
}),
BaseHorizontalRulePlugin.configure({
component: HrElementStatic,
}),
];
import {
  BaseBlockquotePlugin,
  BaseHeadingPlugin,
  BaseHorizontalRulePlugin,
} from '@platejs/basic-nodes';
import { BaseParagraphPlugin } from 'platejs';
 
import { BlockquoteElementStatic } from '@/components/editor/blockquote-static';
import { HeadingElementStatic } from '@/components/editor/heading-static';
import { HrElementStatic } from '@/components/editor/horizontal-rule-static';
import { ParagraphElementStatic } from '@/components/editor/paragraph-static';
 
export const BaseBasicBlocksKit = [
  BaseParagraphPlugin.configure({
    component: ParagraphElementStatic,
  }),
  BaseHeadingPlugin.configure({ component: HeadingElementStatic }),
  BaseBlockquotePlugin.configure({
    component: BlockquoteElementStatic,
  }),
  BaseHorizontalRulePlugin.configure({
    component: HrElementStatic,
  }),
];
import { createStaticEditor } from 'platejs/static'; import { BaseBasicBlocksKit } from '@/components/editor/basic-blocks-static'; const value = [ { children: [{ text: 'Static content' }], type: 'paragraph', }, ]; export const staticEditor = createStaticEditor({ plugins: [...BaseBasicBlocksKit], initialValue: value, });
'mod+alt+1'
} },
}),
HeadingPlugin.configure({
inputRules: [HeadingRules.markdown()],
shortcuts: { toggle: { keys: 'mod+alt+2' } },
}),
HeadingPlugin.configure({
inputRules: [HeadingRules.markdown()],
shortcuts: { toggle: { keys: 'mod+alt+3' } },
}),
HeadingPlugin.configure({
inputRules: [HeadingRules.markdown()],
shortcuts: { toggle: { keys: 'mod+alt+4' } },
}),
HeadingPlugin.configure({
inputRules: [HeadingRules.markdown()],
shortcuts: { toggle: { keys: 'mod+alt+5' } },
}),
HeadingPlugin.configure({
inputRules: [HeadingRules.markdown()],
shortcuts: { toggle: { keys: 'mod+alt+6' } },
}),
BlockquotePlugin.configure({
inputRules: [BlockquoteRules.markdown()],
shortcuts: { toggle: { keys: 'mod+shift+period' } },
}),
HorizontalRulePlugin.configure({
inputRules: [
HorizontalRuleRules.markdown({ variant: '-' }),
HorizontalRuleRules.markdown({ variant: '_' }),
],
}),
],
});