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

Text Align

PreviousNext

Align block content.

Align DemoAlign Toolbar Button

TextAlignPlugin stores block alignment in a textAlign property and renders it as CSS text-align. Setting the default start value removes the property from matching blocks.

Loading…
Line HeightIndent

On This Page

FeaturesKit UsageAdd the KitAdd the Toolbar ControlManual UsageInstall PackageAdd the PluginSet AlignmentOwnershipBehaviorHTMLAPI ReferenceOptions
Build your editor
Production-ready AI template and reusable components.
Get all-access

Features

  • Block-level text alignment.
  • start, left, center, right, end, and justify values.
  • HTML text-align style deserialization.
  • Default-value cleanup.
  • Configurable target block types.
  • Registry dropdown toolbar for common alignments.
Report an issue

Kit Usage

Add the Kit

Use AlignKit for the Plate UI setup. It targets headings, paragraphs, images, and media embeds.

'use client';
 
import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { PLUGINS } from 'platejs';
 
export const AlignKit = [
  TextAlignPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'start',
        styleKey: 'textAlign',
        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      },
    },
    targetPlugins: [
      PLUGINS.heading,
      PLUGINS.paragraph,
      PLUGINS.image,
      PLUGINS.mediaEmbed,
      PLUGINS.audio,
      PLUGINS.video,
    ],
  }),
];
'use client';
 
import { TextAlignPlugin } from '@platejs/basic-styles/react';
import { PLUGINS } from 'platejs';
 
export const AlignKit = [
  TextAlignPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 'start',
        styleKey: 'textAlign',
        validNodeValues: ['start', 'left', 'center', 'right', 'end', 'justify'],
      },
    },
    targetPlugins: [
      PLUGINS.heading,
      PLUGINS.paragraph,
      PLUGINS.image,






import { createPlateEditor } from "platejs/react";
 
import { AlignKit } from "@/components/editor/align";
 
export const editor = createPlateEditor({
  plugins: [...AlignKit],
});
import { createPlateEditor } from "platejs/react";
 
import { AlignKit } from "@/components/editor/align";
 
export const editor = createPlateEditor({
  plugins: [

Add the Toolbar Control

AlignToolbarButton shows left, center, right, and justify controls.

import { AlignToolbarButton } from "@/components/editor/align-toolbar-button";
 
export function AlignControls() {
  return <AlignToolbarButton />;
}
import { AlignToolbarButton } from "@/components/editor/align-toolbar-button";
 
export function AlignControls() {
  return <AlignToolbarButton />;
}

Manual Usage

Install Package

pnpm add @platejs/basic-styles
pnpm add @platejs/basic-styles

Add the Plugin

Configure the blocks that can store alignment.

import { TextAlignPlugin } from "@platejs/basic-styles/react";
import { PLUGINS } from "platejs";
import { createPlateEditor } from "platejs/react";
 
export const editor = createPlateEditor({
  plugins: [
    TextAlignPlugin.configure({
      targetPlugins: [
        PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading,
        PLUGINS.paragraph,
      ],
      inject: {
        nodeProps: {
          defaultNodeValue: "start",
          styleKey: "textAlign",
          validNodeValues: [
            "start",











import { TextAlignPlugin } from "@platejs/basic-styles/react";
import { PLUGINS } from "platejs";
import { createPlateEditor } from "platejs/react";
 
export const editor = createPlateEditor({
  plugins: [
    TextAlignPlugin.configure({
      targetPlugins: [
        PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading, PLUGINS.heading,
        PLUGINS.paragraph,
      ],
      inject: {
        nodeProps: {
          defaultNodeValue: "start",
          styleKey: "textAlign",
          validNodeValues: [

Set Alignment

Use the bound update method.

editor.update.textAlign.set("center");
editor.update.textAlign.set("start", { at: [] });
editor.update.textAlign.set("center");
editor.update.textAlign.set("start", { at: [] });

Ownership

SurfaceOwnerWhat It Does
BaseTextAlignPlugin@platejs/basic-stylesHeadless plugin that stores alignment, injects block props, and parses HTML text-align styles.
TextAlignPlugin@platejs/basic-styles/reactReact wrapper around BaseTextAlignPlugin.
editor.update.textAlign.set@platejs/basic-stylesBound update method exposed by the plugin.
BaseAlignKitRegistry kitStatic/headless setup for headings, paragraphs, images, and media embeds.
AlignKitRegistry kitReact setup plus toolbar dependency.
AlignToolbarButtonRegistry UIDropdown that writes alignment through textAlign.set.

The package owns alignment storage and parsing. The registry owns the dropdown UI.

Behavior

BehaviorSource
Plugin namePLUGINS.textAlign
Stored propertytextAlign
Rendered CSS styletextAlign
Default target plugins[BaseParagraphPlugin]
Registry target pluginsHeadings, paragraphs, images, and media embeds
Default valuestart
Valid valuesstart, left, center, right, end, justify
HTML parserReads element.style.textAlign.
Setting a custom valueSets { textAlign: value } on matching blocks.
Setting startUnsets the stored alignment property.
Non-target blocksAre ignored by textAlign.set.

HTML

targetPlugins is the schema placement truth. The plugin derives its render and HTML-parser injection targets from the same list. Pasted HTML with a text-align style becomes a textAlign property on matching blocks.

<p style="text-align: center">Centered text</p>
<p style="text-align: center">Centered text</p>

API Reference

APIPackageUse
TextAlignPlugin@platejs/basic-styles/reactReact alignment plugin.
BaseTextAlignPlugin@platejs/basic-stylesHeadless alignment plugin.
editor.update.textAlign.set(value, options?)@platejs/basic-stylesSets or clears alignment on matching blocks.
tx.textAlign.set(value, options?)@platejs/basic-stylesTransaction form for a larger atomic update.

Options

OptionSurfaceUse
targetPluginsTextAlignPluginElement plugin descriptors or dynamic names whose schema can keep textAlign; injection is derived from this list.
inject.nodeProps.defaultNodeValueTextAlignPluginValue that clears the stored property when selected.
inject.nodeProps.styleKeyTextAlignPluginCSS property used for rendering.
inject.nodeProps.validNodeValuesRegistry toolbarValues exposed to alignment UI.
optionseditor.update.textAlign.setPlite node update options for the target range and matcher.
PLUGINS.mediaEmbed,
PLUGINS.audio,
PLUGINS.video,
],
}),
];
...
AlignKit],
});
"left"
,
"center",
"right",
"end",
"justify",
],
},
},
}),
],
});
"start",
"left",
"center",
"right",
"end",
"justify",
],
},
},
}),
],
});