Tiptap Docs

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

When you initialize the simple template, the CLI creates the template file in the app router folder: src/app/simple/page.tsx

Manual Integration

For frameworks other than Vite or Next.js, add the template manually from the open-source repository.

Include Global Styles

To apply the correct styles to the editor, manually import the css files in styles/ into your main CSS/SCSS entry point:

@import 'path-to/_variables.scss';
@import 'path-to/_keyframes-animations.scss';

Usage

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

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

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

Requirements

Ensure the following open source packages and extensions are present to make full use of the Simple Editor Template:

npm i @tiptap/react @tiptap/starter-kit @tiptap/extension-image @tiptap/extension-task-item @tiptap/extension-task-list @tiptap/extension-text-align @tiptap/extension-typography
  • @tiptap/react
  • @tiptap/starter-kit
  • @tiptap/extension-image
  • @tiptap/extension-task-item
  • @tiptap/extension-task-list
  • @tiptap/extension-text-align
  • @tiptap/extension-typography

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

  • mark-button
  • node-button
  • image-upload-button
  • list-dropdown-menu
  • heading-dropdown-menu
  • highlight-popover
  • link-popover
  • 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.