Line Height

Set block line height.

Line Height Demo Line Height Toolbar Button

LineHeightPlugin stores line height on blocks with a lineHeight property. Setting the default value removes the property, so saved values only carry overrides.

Loading…

Font Text Align

On This Page

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

Build your editor

Production-ready AI template and reusable components.

Add the kit

Use LineHeightKit for live and static Plate UI setups. The server-safe kit targets paragraphs and all heading levels, with valid values 1, 1.2, 1.5, 2, and 3.

import { BaseLineHeightPlugin, PLUGINS } from 'platejs';
 
export const LineHeightKit = [
  BaseLineHeightPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 1.5,
        validNodeValues: [1, 1.2, 1.5, 2, 3],
      },
    },
    targetPlugins: [PLUGINS.heading, PLUGINS.paragraph],
  }),
] as const;

import { BaseLineHeightPlugin, PLUGINS } from 'platejs';
 
export const LineHeightKit = [
  BaseLineHeightPlugin.configure({
    inject: {
      nodeProps: {
        defaultNodeValue: 1.5,
        validNodeValues: [1, 1.2, 1.5, 2, 3],
      },
    },
    targetPlugins: [PLUGINS.heading, PLUGINS.paragraph],
  }),
] as const;

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

import { createEditor } from "platejs/react";
 
import { LineHeightKit } from "@/components/editor/line-height";
 
export const editor = createEditor({

Install LineHeightToolbarButton separately when the editor needs a line-height control.

pnpm dlx shadcn@latest add @plate/line-height-toolbar-button

pnpm dlx shadcn@latest add @plate/line-height-toolbar-button

The dropdown reads defaultNodeValue and validNodeValues from the plugin inject props.

import { LineHeightToolbarButton } from "@/components/editor/line-height-toolbar-button";
 
export function LineHeightControls() {
  return <LineHeightToolbarButton />;
}

import { LineHeightToolbarButton } from "@/components/editor/line-height-toolbar-button";
 
export function LineHeightControls() {
  return <LineHeightToolbarButton />;
}

Install package

pnpm add platejs @tanstack/react-virtual

pnpm add platejs @tanstack/react-virtual

Add the plugin

Configure target block types and the values your UI should expose.

import { BaseLineHeightPlugin, PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
 
export const editor = createEditor({
  plugins: [
    BaseLineHeightPlugin.configure({
      targetPlugins: [
        PLUGINS.heading,
        PLUGINS.paragraph,
      ],
      inject: {
        nodeProps: {
          defaultNodeValue: 1.5,
          validNodeValues: [1, 1.2, 1.5, 2, 3],
        },
      },
    }),
  ],
});

Set line height

Use the bound update method.

editor.update.lineHeight.set(2);
editor.update.lineHeight.set(1.5, { at: [] });

editor.update.lineHeight.set(2);
editor.update.lineHeight.set(1.5, { at: [] });

Surface	Owner	What It Does
`BaseLineHeightPlugin`	`platejs`	Headless plugin that stores `lineHeight`, injects block props, and parses HTML line-height styles.
`LineHeightPlugin`	`platejs/react`	React wrapper around `BaseLineHeightPlugin`.
`editor.update.lineHeight.set`	`platejs`	Bound update method exposed by the plugin.
`LineHeightKit`	Registry kit	Server-safe setup shared by live and static editors.
`LineHeightToolbarButton`	Registry UI	Dropdown that writes values through `lineHeight.set`.

Behavior	Source
Plugin name	`PLUGINS.lineHeight`
Stored property	`lineHeight`
Default target plugins	`[BaseParagraphPlugin]`
Registry target plugins	`[PLUGINS.heading, PLUGINS.paragraph]`
Default node value	`1.5`
Registry valid values	`[1, 1.2, 1.5, 2, 3]`
HTML parser	Reads `element.style.lineHeight`.
Setting a custom value	Sets `{ lineHeight: value }` on matching blocks.
Setting the default value	Unsets `lineHeight` on matching blocks.
Non-target blocks	Are ignored by `lineHeight.set`.

API	Package	Use
`LineHeightPlugin`	`platejs/react`	React line-height plugin.
`BaseLineHeightPlugin`	`platejs`	Headless line-height plugin.
`editor.update.lineHeight.set(value, options?)`	`platejs`	Sets or clears line height on matching blocks.
`tx.lineHeight.set(value, options?)`	`platejs`	Transaction form for a larger atomic update.

Option	Surface	Use
`targetPlugins`	`BaseLineHeightPlugin`	Element plugin descriptors or dynamic names whose nodes can keep `lineHeight`; injection is derived from this list.
`inject.nodeProps.defaultNodeValue`	`BaseLineHeightPlugin`	Value that clears the stored property when selected.
`inject.nodeProps.validNodeValues`	Registry toolbar	Dropdown values used by `LineHeightToolbarButton`.
`options`	`editor.update.lineHeight.set`	Plate node update options for the target range and matcher.

import { BaseLineHeightPlugin, PLUGINS } from "platejs";
import { createEditor } from "platejs/react";
 
export const editor = createEditor({
  plugins: [
    BaseLineHeightPlugin.configure({
      targetPlugins: [
        PLUGINS.heading,
        PLUGINS.paragraph,
      ],
      inject: {
        nodeProps: {
          defaultNodeValue: 1.5,
          validNodeValues: [1, 1.2, 1.5, 2, 3],
        },
      },
    }),
  ],
});