text-style-kit.mdx

title	tags	meta	extension
TextStyleKit extension	type src url label image https://img.shields.io/npm/v/@tiptap/extension-text-style/beta?label=version https://www.npmjs.com/package/@tiptap/extension-text-style Version type src url label image https://img.shields.io/npm/dm/@tiptap/extension-text-style.svg https://npmcharts.com/compare/@tiptap/extension-text-style?minimal=true Downloads	title description category TextStyleKit extension | Tiptap Editor Docs All necessary text style extensions in one extension with TextStyleKit. Perfect for quickly registering the most common text styles with Tiptap. More in the docs! Editor	name link description type icon TextStyleKit https://github.com/ueberdosis/tiptap/tree/main/packages/extension-text-style All common text styles in one. It doesn’t get much better than this. extension Package

import { CodeDemo } from '@/components/CodeDemo'

The TextStyleKit is a collection of the most common Tiptap text style extensions. If you quickly want to setup styles for your text in Tiptap, this extension is for you.

Install

npm install @tiptap/extension-text-style

Included extensions

Marks

• TextStyle

Functionality

• BackgroundColor
• Color
• FontFamily
• FontSize
• LineHeight

Source code

packages/extension-text-style/

Using the TextStyleKit extension

Pass TextStyleKit to the editor to load all included extension at once.

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

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

You can configure the included extensions, or even disable a few of them, like shown below.

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

const editor = new Editor({
  extensions: [
    TextStyleKit.configure({
      // Disable an extension
      backgroundColor: false,

      // Configure an extension
      fontSize: {
        types: ['heading', 'paragraph'],
      },
    }),
  ],
})