---
title: "Simple template"
description: "Integrate the Tiptap open source editor with UI components and open source extensions. More in the docs."
canonical_url: "https://tiptap.dev/docs/ui-components/templates/simple-editor"
---

# Simple template

Integrate the Tiptap open source editor with UI components and open source extensions. More in the docs.

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.

[View in Full Screen](https://template.tiptap.dev/preview/templates/simple)

> **Interactive demo:** [simple](https://template.tiptap.dev/preview/templates/simple)

## Installation

### For existing projects

```bash
npx @tiptap/cli@latest add simple-editor
```

### For new projects

```bash
npx @tiptap/cli@latest init simple-editor
```

## Styling

This template requires styling setup. We stay unopinionated about styling frameworks, so you'll need to integrate it with your setup. Follow the [style setup guide](https://tiptap.dev/docs/ui-components/getting-started/style.md) to ensure the editor displays correctly.

## Usage

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

```jsx
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 compatibility

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.