TextStyleKit extension

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

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