Tip-Tap Editor with Next.js #1 Quick Start

Tip-Tap Editor

Tiptap editor is a WYSIWYG rich text editor for web platforms built on ProseMirror API. While there exists many alternatives for publishing articles on web, tiptap stands out in its ability to deliver a notion like editing environment out of the box.

Purpose

The purpose of this article is to provide a guide on how to quickly setup tiptap as shown from in this official demo (except for the AI feature which requires a paid membership). These instructions can be found from tiptap’s official website and README files easily, but I decided to put them here anyways as I’ll be writing following guides using this setup.

Getting Started

First, create a tiptap cloud account from here. then, navigate to Pro Extensions Tab where you can retrieve your personal registry token. Copy and keep the token for later use (or the .npmrc script).

Then navigate to React Templates tab, and follow the instruction there to link your github account to tiptap which will allows you to clone their template repository.

Installation

Once you have the access to the repository you can now clone the repository.

git clone -b feature/free-version https://github.com/ueberdosis/tiptap-templates.git

Under the created tiptap-templates/templates directory, you’ll find next-block-editor-app, you can work directly in this directory or, cut and paste it somewhere else for easier access.

Inside the block-editor-app directory, add a file called .npmrc with the below content, replacing [YOUR TOKEN] with the registry token you retrieved in the earlier.

@tiptap-pro:registry=https://registry.tiptap.dev/
//registry.tiptap.dev/:_authToken=[YOUR TOKEN]

Now you can go ahead and install the dependencies.

npm install

For the last step of the setup, rename .example.env to .env and fill in the required fields. The comments will direct you with the link to the webpage where you can get the corresponding id and secret. You can leave the COLLAB_DOC_PREFIX as is.

Finally, run the project

npm run dev

And, lo, we have the editor running!

However, to make real use of the editor, the example needs little more work so we can save, edit the data from the editor. If you are interested, do check out my next tutorial :)