Skip to main content
The TextStyle extension provides a foundation for applying inline styles to text. It’s required by other extensions like Color, FontFamily, and FontSize. This extension renders as a <span> element with inline styles.

​
Installation

npm install @tiptap/extension-text-style

​
Usage

import { Editor } from '@tiptap/core'
import TextStyle from '@tiptap/extension-text-style'

const editor = new Editor({
  extensions: [
    TextStyle,
  ],
})

​
Configuration Options

​
HTMLAttributes
Record<string, any>
default:"{}"
HTML attributes to add to the span element.
TextStyle.configure({
  HTMLAttributes: {
    class: 'my-text-style',
  },
})
​
mergeNestedSpanStyles
boolean
default:"true"
When enabled, merges the styles of nested spans into the child span during HTML parsing. This prioritizes the style of the child span and is used when parsing content created in other editors.
TextStyle.configure({
  mergeNestedSpanStyles: false,
})

​
Commands

​
toggleTextStyle(attributes?)

Toggle a text style with the specified attributes. 
editor.commands.toggleTextStyle({ fontWeight: 'bold' })

​
removeEmptyTextStyle()

Remove spans without inline style attributes. 
editor.commands.removeEmptyTextStyle()

​
Usage with Other Extensions

The TextStyle extension is typically used as a foundation for other styling extensions: 
import { Editor } from '@tiptap/core'
import TextStyle from '@tiptap/extension-text-style'
import { Color } from '@tiptap/extension-color'
import { FontFamily } from '@tiptap/extension-font-family'

const editor = new Editor({
  extensions: [
    TextStyle,
    Color,
    FontFamily,
  ],
})

// These extensions rely on TextStyle
editor.commands.setColor('#ff0000')
editor.commands.setFontFamily('Comic Sans MS')

​
Technical Details

  • Priority: 101 (higher than most other marks to ensure proper style application)
  • HTML Element: Renders as <span> with inline styles
  • Parsing: Only parses <span> elements that have a style attribute
  • Nested Spans: By default, merges styles from nested spans up to 20 levels deep

​
Source Code

View the source code on GitHub:

Build docs developers (and LLMs) love

Get started for freeTalk to us