Tiptap Docs

Text styling

Text styling extensions change how text looks: its color, background color, font, size, line height, and alignment.

TextStyle kit
The text styling extensions in one: text style, color, background color, font family, font size, and line height.
Open source
Background color
Set the background color of text.
Open source
Color
Set the color of text.
Open source
Font family
Set the font family of text.
Open source
Font size
Set the font size in the editor.
Open source
Line height
Add text line-height support to your editor.
Open source
Text align
Align text left, right, centered, or justified.
Open source
Text style
Adds the span element that color, font, and size extensions build on.
Open source

When you use them

  • Colors. Color sets the font color of text, and Background color sets the color behind it. Both accept any color.
  • Fonts. Font family and Font size set the typeface and the size of the selected text.
  • Spacing. Line height sets the line height of text.
  • Alignment. Text align aligns paragraphs, headings, or other blocks left, center, right, or justified.

How they work

  • They build on the Text style mark. Text style renders a span tag and adds no styling by itself. Background color, Color, Font family, Font size, and Line height add their value to that span as an inline style, so each of them needs Text style. Nodes and marks
  • The TextStyle kit bundles them. The TextStyle kit holds Text style, Background color, Color, Font family, Font size, and Line height. None of them is in the StarterKit.
  • Text align works on nodes. It adds an attribute to the node types you list in its types setting, which is empty by default. It has its own package and isn't part of the TextStyle kit.
  • Text formatting marks words and phrases as bold, italic, linked, or highlighted.
  • Text blocks are the paragraphs and headings that Text align aligns.
PreviouslyUnderline