Slots

AlphaPilot program

With Slots, you can turn your documents into templates and forms with fields that users can fill. Define rules to validate each slot's content, and use Content Protection to control who can edit it.

Install

First, contact our team to join the Tiptap Composable Docs pilot program.

Then, configure your package manager by following the private registry guide.

Then, install the package:

npm install @tiptap/core @tiptap/starter-kit @tiptap-pro/extension-slot

import { Editor } from '@tiptap/core'
import StarterKit from '@tiptap/starter-kit'
import { Slot } from '@tiptap-pro/extension-slot'

const editor = new Editor({
  extensions: [StarterKit, Slot],
  content: {
    type: 'doc',
    // Pass a document with slots, or let the user create them
    content: [
      // An example slot
      {
        type: 'blockSlot',
        attrs: {
          id: 'summary',
          config: { label: 'Summary', required: true },
        },
        content: [{ type: 'paragraph' }],
      },
    ],
  },
})

Client-side only

Slots currently work only client-side. If you're interested in filling slots on the server, contact us.

Next steps

To use a single value across several slots or display a calculated value, bind slots to variables.

Read the quickstart guide to learn how to add slots to your document. Then, set up the document so that users can fill the slots.

Next upGuides