Tiptap —— The headless editor framework for web artisans.

What is a Tiptap

Before I introduce Tiptap, ProseMirror is a customizable, wySIWYG rich text editor framework with editable documents and collaboration support. It is written by @Marijnh, He is also the developer of the CodeMirror editor.

Atlassian and the New York Times are both using ProseMirror. However, it is not as out-of-the-box as other editors, requiring a series of modules to build, and involves some internal abstract concepts, complicated and multiple APIS, and official documents in English, so the cost of getting started is relatively high. Tiptap is a Headerless wrapper for ProseMirror, with some of the necessary module assembly, MVVM framework access and other black boxes inside the framework. Without losing its original customizable extensibility, it exposes some simpler and fewer apis, making it easier for developers to get started.

What is a headerless

Tiptap is a headless editor that doesn’t provide any UI styles and gives you the freedom to build whatever UI you want. No need to rewrite any classes, no need! Important or other hack code.

Tiptap’s past lives

Tiptap was started in 2019 by @Philipp Kuhn, who was looking for a vue2.js editor but couldn’t come up with a solution that really addressed his needs. React already had good modularity support for Slate.js. When he stumbled upon ProseMirror, which was being used by many big foreign companies, he decided to roll up his sleeves and build his own editor wheel based on it that supported Vue, was easy to expand, and didn’t rely on outdated plugins like jQuery. Tiptap was born.

Tiptap has so far gone through two versions, V1 and V2.

Tiptap1

Tiptap was born out of the box because it supports Vue2, has a rich API, and doesn’t lose any of its original apis, and doesn’t lose any of its original customization capabilities, which is much better than ProseMirror. After just a few months on Github, I got a lot of good feedback from developers, but there were a few drawbacks:

  • Only VUe2 is supported, but vue3 is not
  • Without TypeScript type definitions, the development experience in TS projects is poor, probably because Vue2 itself is not TS friendly
  • There are a number of out-of-the-box extensions available, but they are relatively simple, such as images that can only be inserted and cannot be resized or aligned, and require some development to be used in real scenarios. There is no real out-of-the-box extension
  • Some extensions are buggy
  • Documentation is imperfect, and many attributes require deep source code

Thus, the author had plans for Tiptap2, issue link, by the end of 19

Tiptap2

Finally, after a year, Tiptap2 was released this year, with a lot of CHANGES to the V1 API, almost all of which are breaking change, and it may take a bit more work to migrate from V1 to V2.

More eye-catching features than ever before:

  • Support Vue2, Vue3, React, Svelte and other frameworks, a wider audience
  • Refactoring with TypeScript supports the type system
  • Code multi-package release, each module function is more independent, developers can better use on demand
  • More out-of-the-box extensions are available
  • Complete the documentation details and have a documentation site
  • A higher degree of support for collaborative editing

Tiptap2 is currently in beta, but has been relatively stable overall.

Why is Tiptap recommended

ProseMirror is a reliable and powerful editor. But it’s not what most people want out of the box. Tiptap, however, takes just a few minutes to get started, and there are plenty of extensions to choose from and refer to, while still using the native ProseMirror API when you need it.

I’m a deep user of ProseMirror and Tiptap myself

  • ProseMirror – a modular rich text editing framework
  • Also worked on an open source Tiptap project: Element-TipTap, which had some editor features I implemented myself. I’m currently working on upgrading it to Tiptap2 and Vue3.

Currently, Tiptap is probably the only editor in the community that supports Vue2 and 3, can write its own plugin extensions, and supports collaboration.

The last

If you’re looking for a way to develop an editor, try ProseMirror.

Tiptap is recommended if you are interested in or developing with ProseMirror.

In the future, I will share some of my own practices in developing ProseMirror using Tiptap.

❤ ️ thank

  • If this article has been helpful to you, please support me by clicking 👍. Your “likes” are the motivation for my creation.

  • Welcome to pay attention to the public account “front-end micro food record”. I am currently working in the frontline large factories, and I will share and summarize the thinking and experience of front-end work in depth from time to time, to help you become a better front-end.