---
title: "Examples"
description: "Learn how to use and integrate a custom user experience in Tiptap with our list of code examples. More in the docs!"
canonical_url: "https://tiptap.dev/docs/examples"
---

# Examples

Learn how to use and integrate a custom user experience in Tiptap with our list of code examples. More in the docs!

It's hard to get started with a new library. We know that and that's why we created a bunch of examples for you. They cover a wide range of use cases and show you how to use Tiptap in your project.

[Default text editorLearn how to create a default text editor with Tiptap.Editor](https://tiptap.dev/docs/examples/basics/default-text-editor.md)

[Markdown shortcutsAdd markdown shortcuts to your Tiptap Editor.Editor](https://tiptap.dev/docs/examples/basics/markdown-shortcuts.md)

[Tables
Add tables to your Tiptap Editor.Editor](https://tiptap.dev/docs/examples/basics/tables.md)

[Images
Add images to your Tiptap Editor.Editor](https://tiptap.dev/docs/examples/basics/images.md)

[FormattingAdd content formatting to your Tiptap Editor.Editor](https://tiptap.dev/docs/examples/basics/formatting.md)

[Tasks
Add task lists to your Tiptap Editor.Editor](https://tiptap.dev/docs/examples/basics/tasks.md)

[Text direction & RTL supportAdd support for right-to-left languages and bidirectional text.Editor](https://tiptap.dev/docs/examples/basics/text-direction.md)

[Long textsKeep a good performance with huge amount of content.Editor](https://tiptap.dev/docs/examples/basics/long-texts.md)

[Minimal setupKeep it simple and clean with a minimal Tiptap Editor setup.Editor](https://tiptap.dev/docs/examples/basics/minimal-setup.md)

[Collaborative editingBuild collaborative editors with Tiptap Editor.Editor
Collaboration](https://tiptap.dev/docs/examples/advanced/collaborative-editing.md)

[MenusAdd bubble and floating menus to your editor.Editor](https://tiptap.dev/docs/examples/advanced/menus.md)

[DrawingAdd a custom NodeView with drawing support to your Tiptap Editor.Editor](https://tiptap.dev/docs/examples/advanced/drawing.md)

[MentionsAllow users to mention others in your documents.Editor](https://tiptap.dev/docs/examples/advanced/mentions.md)

[Forced content structureEnforce specific content structures like headings in your editor.Editor](https://tiptap.dev/docs/examples/advanced/forced-content-structure.md)

[Clever EditorMake your editor clever with custom replacement extensions.Editor](https://tiptap.dev/docs/examples/advanced/clever-editor.md)

[Interactive React & Vue viewsUse React or Vue components in your Tiptap Editor content.Editor](https://tiptap.dev/docs/examples/advanced/interactive-react-and-vue-views.md)

[Syntax highlightingImplement syntax highlighting to codeblocks in your Tiptap Editor.Editor](https://tiptap.dev/docs/examples/advanced/syntax-highlighting.md)

## Experiments

The following examples are **experiments**, meaning they are not supported or maintained. They are here to show you what's possible with Tiptap and to inspire you to create your own extensions.

[Collaborative fieldsSave separate data to one collaborative Yjs document with Tiptap via fields.Editor
Collaboration](https://tiptap.dev/docs/examples/experiments/collaborative-fields.md)

[FigureCreate image nodes and enhance them with figures.Editor](https://tiptap.dev/docs/examples/experiments/figure.md)

[Generic FigureCreate nodes with figure support via a generic figure extension.Editor](https://tiptap.dev/docs/examples/experiments/generic-figure.md)

[iFrame
Embed iframes in your editor contentEditor](https://tiptap.dev/docs/examples/experiments/iframe.md)

[LintingCreate a document linter for your Tiptap editor.Editor](https://tiptap.dev/docs/examples/experiments/linting.md)

[Slash commandsAdd a toolbar that pops up at the slash positionEditor](https://tiptap.dev/docs/examples/experiments/slash-commands.md)