Next-Gen Text Editing in Browser With Tiptap 🔥

Good day folks, I've decided to write a series about one of the Web-World's most underrated topics, which is web-based rich text editors. In this series, I'll be first covering Tiptap and describe how we can build great web-based text editors using tiptap.

Requirements:

• A little bit of familiarity with JavaScript and VueJS.
• A VueJS project ( existing or new ).

Tiptap is a renderless rich-text editor made originally for VueJS. Tiptap uses Prosemirror under the hood which is a toolkit that provides various abstractions to manipulate DOM and transform its content to specific formatting we want. In other words, it can transform a normal text into a bold text(and much more) and vice-versa very easily.

Another very powerful aspect of Tiptap is that it fills the gap between writing markdown and rich text. For example, if you want to use a heading and write a '#' at the start of a line and press space, it'll turn that line into an H1 for instance.

Okay enough intro, let's take a look at the official example and let's figure out more about it on the journey. You can take a look at many more examples with customizations at tiptap.dev.

Installation

Tiptap can be installed with help of NPM of Yarn. NPM ships with NodeJS. Here are instructions for installing NPM and Yarn.

npm install --save tiptap

or

yarn add tiptap

Once we have tiptap installed, we can directly start using it, or we can install extensions first. The power of Tiptap(or so to say Prosemirror) lies in the extensions. Any functionality you'd like to have can be written as an extension and plugged into Tiptap's running instance and we'd have an editor with our custom functionality.

Tiptap team has a nice set of extensions in NPM package tiptap-extensions and they maintain them which makes them guaranteed to work with Tiptap. Some of them are Blockquote, CodeBlock, HardBreak, Heading, OrderedList, BulletList, ListItem, TodoItem, TodoList, Bold, Code, Italic, Link, Strike, Underline, History.

Each of them is required for adding specific behaviour to our editor. It can be installed with the following method.

npm install --save tiptap-extensions

or

yarn add tiptap-extensions

Initializing

For the scope of this post, we're just going to use basic extensions like Bold, Italic, Underline, Headings. Now, since everyone has a past, we're including the History extension too. In your project, you can create a new specific folder to keep all the JS files and VueJS components written for the Editor. In my case, I've created a bare VueJS 2 project with Babel and ESLint and have created a dir named editor in my src folder like this.

Instructions to initialize a new VueJS project can be found here.

Then I'll be installing tiptap and tiptap-extensions. Here, I'm installing two packages with NPM in one shot. We can separate them with a space in between and NPM will do the rest for us.

npm install --save tiptap tiptap-extensions

Once installed, we can move on to our tiptap.js file showed in the screenshot above and start working with Tiptap.

In this file, we're initializing an instance of Tiptap Editor with the extensions we want to use. Now it's time to use this in Tiptap.vue. Here's what Tiptap.vue would look like.

Finally, when we spin up our app, this is how it looks and behaves. I've deployes this at https://tiptap-demo.now.sh/. You can play around with it and experience yourself what's what.

Preview for everything we showed exists except History, it provides functionality for doing ctrl/⌘ + Z or ctrl/⌘ + Y to undo/redo. You can try it out yourself at https://tiptap-demo.now.sh/.

One of the great things about Tiptap is that it has keyboard shortcuts implemented out of the box. For instance bold can be activated/inactivated with ctrl/⌘ + B, italic with ctrl/⌘ + I and underline with ctrl/⌘ + U.

We have power to customize keyboard shortcuts when we write extensions but that part is out of scope for this post.

Conclusion

What we did in this post is a small part of the functionality that Tiptap or the great Tiptap community has to offer. More in-depth insight into this tech exists on their GitHub repo. Not only the maintainers but also the community has great extensions to offer, you can take a look at the discussion in this GitHub issue. The community has very cool extensions to offer like

• KaTex integration
• :emoji: Support
• Code Block with manual language selection
• TextColor, TextAlign, TextHighlight
• Realtime Multi-User editing with Y.js

If you're using famous VueJS Component Frameworks like ElementUI or VuetifyJS, there exist even packages like element-tiptap and tiptap-vuetify which provide a great deal of abstraction and allow you to integrate tiptap with your project very rapidly.

Tiptap 2.x

The version of TipTap we used in this post is 1.x but 2.x is coming out soon and with that, we won't be requiring many community extension as the Tiptap team has decided to integrate them in their extension library. Also, Tiptap makes the way of writing extensions easier than ever, so we're going to see more and more opportunities of community developed extensions for tiptap in near future. Moreover, it's a great news for TypeScript lovers(or bad for those who hate TS but their company codebase is in TS and they're still on their way to learn it) that Tiptap 2 is completely rewritten in TypeScript.'

If you liked this, give a start to the Tiptap and Prosemirror repository for making experience of rich text editing in browser mind-boggling.

Also you can find all the source code used in this post at this repository.

That's it for this post my fellow coders, see you in the next post !!

If this was helpful to you in any way and you'd like to support my work, consider Buying me a ☕️.