Styling the Editor

Tiptap is headless, which means there is no styling provided. That also means you are in full control of how your editor looks. The following methods allow you to apply custom styles to the editor.

Wanna take a shortcut?

Speed up your Tiptap integration into your React app with our UI template. It's ready for deployment as-is or can be customized to your needs.

Try demo

Get access

Style plain HTML

The entire editor is rendered inside a container with the class .tiptap. You can use that to scope your styling to the editor content:

/* Scoped to the editor */
.tiptap p {
  margin: 1em 0;
}

If you're rendering the stored content elsewhere, there won't be a .tiptap container, so you can globally add styling to the relevant HTML tags:

/* Global styling */
p {
  margin: 1em 0;
}

Add custom classes

You can control the whole rendering, including adding classes to everything.

Extensions

Most extensions allow you to add attributes to the rendered HTML through the HTMLAttributes option. You can use that to add a custom class (or any other attribute). That's also very helpful when you work with Tailwind CSS.

new Editor({
  extensions: [
    Document,
    Paragraph.configure({
      HTMLAttributes: {
        class: 'my-custom-paragraph',
      },
    }),
    Heading.configure({
      HTMLAttributes: {
        class: 'my-custom-heading',
      },
    }),
    Text,
  ],
})

The rendered HTML will look like this:

<h1 class="my-custom-heading">Example Text</h1>
<p class="my-custom-paragraph">Wow, that's really custom.</p>

If there are already classes defined by the extensions, your classes will be added.

Editor

You can even pass classes to the element that contains the editor:

new Editor({
  editorProps: {
    attributes: {
      class: 'prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none',
    },
  },
})

Customize HTML

Or you can customize the markup for extensions. The following example will make a custom bold extension that doesn't render a <strong> tag, but a <b> tag:

import Bold from '@tiptap/extension-bold'

const CustomBold = Bold.extend({
  renderHTML({ HTMLAttributes }) {
    // Original:
    // return ['strong', HTMLAttributes, 0]
    return ['b', HTMLAttributes, 0]
  },
})

new Editor({
  extensions: [
    // …
    CustomBold,
  ],
})

You should place your custom extensions in separate files for better organization, but you get the idea.

Style using Tailwind CSS

The editor works fine with Tailwind CSS, too. Find an example that's styled with the @tailwindcss/typography plugin below.

Intellisense

If you're using TailwindCSS Intellisense, add this snippet to your .vscode/setting.json to enable intellisense support inside Tiptap objects:

"tailwindCSS.experimental.classRegex": [
  "class:\\s*?[\"'`]([^\"'`]*).*?,"
]