Plate
PlateEditorsTemplates
GitHub16kGitHub
DiscordDiscord
    • Stream
    • Copilot
  • Comments
  • Discussion
  • Suggestions
    • Basic Blocks
      • Blockquote
      • Heading
      • Horizontal Rule
    • Callout
    • Code Block
    • Column
    • Date
    • Equation
    • Link
    • Media
    • MentionElement
    • Table
    • Table of Contents
    • Footnote
    • Details
  • 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
    • 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 live and static Plate UI setups. The server-safe kit targets headings, paragraphs, images, and media embeds.

import { BaseTextAlignPlugin, PLUGINS } from 'platejs';
 
export const AlignKit = [
  BaseTextAlignPlugin.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,
    ],
  }),
] as const;
import { BaseTextAlignPlugin, PLUGINS } from 'platejs';
 
export const AlignKit = [
  BaseTextAlignPlugin.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,



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

Add the toolbar control

Install AlignToolbarButton separately when the editor needs alignment controls.

pnpm dlx shadcn@latest add @plate/align-toolbar-button
pnpm dlx shadcn@latest add @plate/align-toolbar-button

The dropdown 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 @tanstack/react-virtual
pnpm add platejs @tanstack/react-virtual

Add the plugin

Configure the blocks that can store alignment.

import { BaseTextAlignPlugin, PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
 
export const editor = createEditor({
  plugins: [
    BaseTextAlignPlugin.configure({
      targetPlugins: [
        PLUGINS.heading,
        PLUGINS.paragraph,
      ],
      inject: {
        nodeProps: {
          defaultNodeValue: "start",
          styleKey: "textAlign",
          validNodeValues: [
            "start",
            "left",
            "center",
            "right",
            "end",







import { BaseTextAlignPlugin, PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
 
export const editor = createEditor({
  plugins: [
    BaseTextAlignPlugin.configure({
      targetPlugins: [
        PLUGINS.heading,
        PLUGINS.paragraph,
      ],
      inject: {
        nodeProps: {
          defaultNodeValue: "start",
          styleKey: "textAlign",
          validNodeValues: [
            "start",
            "left",
            "center",
            "right",
            "end",

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
BaseTextAlignPluginplatejsHeadless plugin that stores alignment, injects block props, and parses HTML text-align styles.
TextAlignPluginplatejs/reactReact wrapper around BaseTextAlignPlugin.
editor.update.textAlign.setplatejsBound update method exposed by the plugin.
AlignKitRegistry kitServer-safe setup shared by live and static editors.
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
TextAlignPluginplatejs/reactReact alignment plugin.
BaseTextAlignPluginplatejsHeadless alignment plugin.
editor.update.textAlign.set(value, options?)platejsSets or clears alignment on matching blocks.
tx.textAlign.set(value, options?)platejsTransaction form for a larger atomic update.

Options

OptionSurfaceUse
targetPluginsBaseTextAlignPluginElement plugin descriptors or dynamic names whose schema can keep textAlign; injection is derived from this list.
inject.nodeProps.defaultNodeValueBaseTextAlignPluginValue that clears the stored property when selected.
inject.nodeProps.styleKeyBaseTextAlignPluginCSS property used for rendering.
inject.nodeProps.validNodeValuesRegistry toolbarValues exposed to alignment UI.
optionseditor.update.textAlign.setPlate node update options for the target range and matcher.
],
}),
] as const;
plugins: [
...
AlignKit],
});
"justify",
],
},
},
}),
],
});
"justify",
],
},
},
}),
],
});