Text Align

Align block content.

TextAlignPlugin stores block alignment in a textAlign property and renders it as CSS text-align. A block without one follows its container's alignment, and clear removes the property.

Loading…

Line Height Indent

On This Page

Features Kit usage Add the kit Add the toolbar control Manual usage Install package Add the plugin Set alignment Ownership Behavior HTML API Reference Options

Build your editor

Production-ready AI template and reusable components.

Add the kit

Use AlignKit for live and static Plate UI setups. The server-safe kit targets headings, paragraphs, images, media embeds, audio, and video.

import { BaseTextAlignPlugin, PLUGINS } from 'platejs';
 
export const AlignKit = [
  BaseTextAlignPlugin.configure({
    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({
    targetPlugins: [
      PLUGINS.heading,
      PLUGINS.paragraph,
      PLUGINS.image,
      PLUGINS.mediaEmbed,
      PLUGINS.audio,
      PLUGINS.video,
    ],
  }),
] as const;

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({

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 />;
}

Install package

pnpm add platejs

pnpm add platejs

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,
      ],
    }),
  ],
});

import { BaseTextAlignPlugin, PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
 
export const editor = createEditor({
  plugins: [
    BaseTextAlignPlugin.configure({
      targetPlugins: [
        PLUGINS.heading,
        PLUGINS.paragraph,
      ],
    }),
  ],
});

Set alignment

Use the bound update methods. set saves every value it receives, start included, and clear removes the property.

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

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

Surface	Owner	What It Does
`BaseTextAlignPlugin`	`platejs`	Headless plugin that stores alignment, injects block props, and parses HTML text-align styles.
`TextAlignPlugin`	`platejs/react`	React wrapper around `BaseTextAlignPlugin`.
`editor.update.textAlign.set`	`platejs`	Bound update method that saves an alignment.
`editor.update.textAlign.clear`	`platejs`	Bound update method that removes an alignment.
`AlignKit`	Registry kit	Server-safe setup shared by live and static kits.
`AlignToolbarButton`	Registry UI	Dropdown that writes alignment through `textAlign.set`.

Behavior	Source
Plugin name	`PLUGINS.textAlign`
Stored property	`textAlign`
Rendered CSS style	`textAlign`
Default target plugins	`[BaseParagraphPlugin]`
Registry target plugins	Headings, paragraphs, images, media embeds, audio, and video
Valid values	`start`, `left`, `center`, `right`, `end`, `justify`
HTML parser	Reads `element.style.textAlign`.
Setting a value	Sets `{ textAlign: value }` on matching blocks.
Setting `start`	Stores `start`, which aligns to the start edge even inside an aligned container.
Clearing	Unsets `textAlign` on matching blocks.
Registry media items	Place `start`, `left`, and `justify` on the left, `end` and `right` on the right, and `center` or no alignment in the center.
Non-target blocks	Are ignored by `textAlign.set` and `textAlign.clear`.

API	Package	Use
`TextAlignPlugin`	`platejs/react`	React alignment plugin.
`BaseTextAlignPlugin`	`platejs`	Headless alignment plugin.
`editor.update.textAlign.set(value, options?)`	`platejs`	Sets alignment on matching blocks.
`editor.update.textAlign.clear(options?)`	`platejs`	Removes alignment from matching blocks.
`tx.textAlign.set(value, options?)`	`platejs`	Transaction form for a larger atomic update.
`tx.textAlign.clear(options?)`	`platejs`	Transaction form of `clear`.

Option	Surface	Use
`targetPlugins`	`BaseTextAlignPlugin`	Element plugin descriptors or dynamic names whose schema can keep `textAlign`; injection is derived from this list.
`inject.nodeProps.styleKey`	`BaseTextAlignPlugin`	CSS property used for rendering.
`options`	`editor.update.textAlign.set`, `editor.update.textAlign.clear`	Plate node update options for the target range and matcher.