Node views enable you to fully customize your nodes. We are collecting a few different examples here. Feel free to copy them and start building on them.

Keep in mind that those are just examples to get you started, not officially supported extensions. We don’t have tests for them, and don’t plan to maintain them with the same attention as we do with official extensions.

Drag handles

Drag handles aren’t that easy to add. We are still on the lookout what’s the best way to add them. Official support will come at some point, but there’s no timeline yet.

Preview

ReactVue

GuideNodeViews/DragHandle/React

This is a boring paragraph.

Followed by a fancy draggable item.

And another draggable item.

And a nested one.

But can we go deeper?

Let’s finish with a boring paragraph.

index.jsxComponent.jsxDraggableItem.jsstyles.scss Inspect

import './styles.scss'

import { EditorProvider } from '@tiptap/react'
import StarterKit from '@tiptap/starter-kit'
import React from 'react'

import DraggableItem from './DraggableItem.js'

const extensions = [StarterKit, DraggableItem]

const content = `
        <p>This is a boring paragraph.</p>
        <div data-type="draggable-item">
          <p>Followed by a fancy draggable item.</p>
        </div>
        <div data-type="draggable-item">
          <p>And another draggable item.</p>
          <div data-type="draggable-item">
            <p>And a nested one.</p>
            <div data-type="draggable-item">
              <p>But can we go deeper?</p>
            </div>
          </div>
        </div>
        <p>Let’s finish with a boring paragraph.</p>
      `

export default () => {
  return <EditorProvider extensions={extensions} content={content}></EditorProvider>
}

Drawing in the editor

The drawing example shows a SVG that enables you to draw inside the editor.

Preview

Vue

Examples/Drawing/Vue

Clear

index.vueComponent.vuePaper.js Inspect

<template>
  <editor-content :editor="editor" />
</template>

<script>
import Document from '@tiptap/extension-document'
import Text from '@tiptap/extension-text'
import { Editor, EditorContent } from '@tiptap/vue-3'

import Paper from './Paper.js'

export default {
  components: {
    EditorContent,
  },

data() {
    return {
      editor: null,
    }
  },

mounted() {
    this.editor = new Editor({
      extensions: [\
        Document.extend({\
          content: 'paper',\
        }),\
        Text,\
        Paper,\
      ],
    })
  },

beforeUnmount() {
    this.editor.destroy()
  },
}
</script>

It’s not working very well with the Collaboration extension. It’s sending all data on every change, which can get pretty huge with Y.js. If you plan to use those two in combination, you need to improve it or your WebSocket backend will melt.