Simple editor Tiptap template

The Simple Editor Template is a fully working setup for the Tiptap editor. It includes commonly used open source extensions and UI components, all MIT licensed and ready to customize.

Install

Add the Simple Editor Template to your project using the Tiptap CLI (for Vite or Next.js):

npx @tiptap/cli add simple-editor

Style

Missing styles?

If you haven’t added the styles yet, make sure to follow the style setup guide to ensure your editor and components render correctly.

Usage

After installation, use the SimpleEditor component in your React or Next.js project:

import { SimpleEditor } from '@/components/tiptap-templates/simple/simple-editor'

export default function App() {
  return <SimpleEditor />
}

Features

A fully responsive rich text editor with built-in support for common formatting and layout tools. All components are open source and easy to extend.

Responsive design: Mobile-friendly by default
Dark and light mode: Supported out-of-the-box
Formatting: Bold, Italic, Underline
Lists: Bullet, Ordered, Checkboxes
Text alignment: Left, Center, Right, Justified
Headings: Multiple levels via dropdown
Image upload
Link editing: UI for adding and editing links
Undo / Redo: History management

Used reference components

Hooks

use-mobile
use-window-size

Icons

arrow-left-icon
highlighter-icon
link-icon
moon-star-icon
sun-icon

Extensions

selection-extension
link-extension
trailing-node-extension

Lib

tiptap-utils

UI Components

blockquote-button
code-block-button
color-highlight-button
color-highlight-popover
heading-button
heading-dropdown-menu
image-upload-button
link-popover
list-button
list-dropdown-menu
mark-button
text-align-button
undo-redo-button

Node Components

code-block-node
image-node
image-upload-node
list-node
paragraph-node

Primitives

button
spacer
toolbar

License

The Simple Editor Template and all included components are MIT licensed. You’re free to use, modify, and extend the code as needed.

Future compatability

You can extend this template with additional features as your needs grow.

Paid Tiptap Cloud features will have matching UI components that integrate just as easily! No rework needed.