Create minimal editor with Tiptap in React

Tiptap is a modern Editor framework for Javascript applications. It is popular because come with bunch pro features, extension, flexibility and its well documented for all frameworks such as Nextjs, Vuejs, React etc.

There are 50 more extensions ready to boost editor experience.

Let’s setup our react project with Tiptap dependencies.

npx create-react-app tiptapeditor 
npm install @tiptap/core @tiptap/starter-kit @tiptap/react

We can use hooks to create our Tiptap component in React.

import React from 'react'
import { useEditor, EditorContent } from '@tiptap/react'
import Document from '@tiptap/extension-document'
import Paragraph from '@tiptap/extension-paragraph'
import Text from '@tiptap/extension-text'
import './styles.css'

export default function Minimal   ()   {
  const editor = useEditor({
    extensions: [
      Document,
      Paragraph,
      Text,
    ],
    content: `
      <p>
        This is a radically reduced version of tiptap. It has support for a document, with paragraphs and text. That’s it. It’s probably too much for real minimalists though.
      </p>
      <p>
        The paragraph extension is not really required, but you need at least one node. Sure, that node can be something different.
      </p>
    `,
  })

  return (
    <EditorContent editor={editor} />
  )
}

A live example can be found @ Sandbox

Links

Tiptap Repo on Github

• Create Quill RichText editor using react-quill
• How to get HTML from Remirror editor in Reactjs
• How to get state as JSON from Remirror editor in Reactjs
• Create a TinyMCE Rich Text Editor in React
• Create a Slate Rich Text Editor in React
• Create a Material-UI Rich Text Editor in React
• Create a RichText editor using Quilljs
• Create minimal editor with Tiptap in React
• Create a Social Editor using Remirror toolkit in React
• Create a RichText Editor using Remirror toolkit in React