Next-Gen Text Editing in Browser With Tiptap 🔥
Tags: javascript, vue, tiptap, typescript
Published: 2021-02-01 00:13:22

---
title: Next-Gen Text Editing in Browser With Tiptap 🔥
published: true
date: 2021-01-31 23:06:33 UTC
tags: JavaScript,VueJS,Tiptap,TypeScript
canonical_url: https://webdevjeet.me/2021-02-01-next-gen-text-editor-tiptap/
---

 ![Next-Gen Text Editing in Browser With Tiptap](https://webdevjeet.me/content/images/2021/01/title-image-3.png)

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](https://tiptap.dev/) 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](https://prosemirror.net/) 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](https://tiptap.dev/).

![Next-Gen Text Editing in Browser With Tiptap](https://webdevjeet.me/content/images/2021/01/image.png)<figcaption>Isn't it enchanting ?</figcaption>

### Installation

Tiptap can be installed with help of NPM of Yarn. NPM ships with NodeJS. Here are instructions for installing [NPM](https://nodejs.org/en/) and [Yarn](https://yarnpkg.com/getting-started/install).

```
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](https://cli.vuejs.org/guide/creating-a-project.html).

![Next-Gen Text Editing in Browser With Tiptap](https://webdevjeet.me/content/images/2021/01/image-1.png)<figcaption>Created A New Vue Project</figcaption>

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

![Next-Gen Text Editing in Browser With Tiptap](https://webdevjeet.me/content/images/2021/01/image-2.png)

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

{% gist https://gist.github.com/sereneinserenade/e6a744ffa01f7305a9c6ca05e4209574 %}


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.

{% gist https://gist.github.com/sereneinserenade/14dd9810aead8c1d0f7ba05ac0e120bd %}


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

![Text Editor](https://dev-to-uploads.s3.amazonaws.com/i/uqxprb0piahmtjm55892.gif)

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/](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](https://github.com/ueberdosis/tiptap). 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](https://github.com/ueberdosis/tiptap/issues/819). 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](https://element.eleme.io/) or [VuetifyJS](https://vuetifyjs.com/), there exist even packages like [element-tiptap](https://github.com/Leecason/element-tiptap) and [tiptap-vuetify](https://github.com/iliyaZelenko/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](https://github.com/ueberdosis/tiptap) and [Prosemirror](https://github.com/ProseMirror/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](https://github.com/sereneinserenade/tiptap-demo).

* * *

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 ☕️.**

<a href="https://www.buymeacoffee.com/webdevjeet" > 
<img src="https://dev-to-uploads.s3.amazonaws.com/i/ee4tulpkh0x3zmzadvwl.png" />
</a>