lesion / tiptap-docs

tiptap documentation

Introduction

tiptap is a renderless and extendable rich-text editor for Vue.js

Why tiptap was built

The guys behind Scrumpy were looking for a text editor for Vue.js and found some solutions that didn't really satisfy their needs. The editor should be easy to extend and not based on old dependencies such as jQuery. For React there is already a great editor called Slate.js, which impresses with its modularity. They came across ProseMirror and decided to build on top of it. ProseMirror is a toolkit for building rich-text editors that are already in use at many well-known companies such as Atlassian or New York Times.

What does renderless mean?

With renderless components you'll have full control over markup and styling. tiptap doesn't tell you what a menu should look like or where it should be rendered in the DOM. That's all up to you. There is also a good article about renderless components by Adam Wathan.

::: tip No styling by default tiptap comes without any CSS. It's a feature – not a bug. :::

How is the data stored under the hood?

You can save your data as a raw HTML string or can get a JSON-serializable representation of your document. And of course, you can pass these two types back to the editor.

Examples

To check out some live examples, visit tiptap.scrumpy.io.

Who is using tiptap already?

• Scrumpy
• GitLab
• Statamic
• ApostropheCMS
• Directus
• Nextcloud

Contributing

Please see the CONTRIBUTING file for details. If you want to contribute with the documentation, install its dependencies and run Vuepress

yarn install
yarn start

Credits

• Philipp Kühn
• Christoph Flathmann
• Erick Wilder
• All Contributors

License

The MIT License (MIT). Please see the License File for more information.