tiptap-editor-kit | A ready-to-use Tiptap WYSIWYG editor with full toolbar, image upload, and table support — works with both React and Vanilla JS.

한국어 문서

• React & Vanilla JS — One package, two entry points
• Full Toolbar — Headings, formatting, font, color, alignment, image, link, list, table, clear formatting
• Image Upload — Drag & drop / paste / button click (all three supported)
• Custom Upload Handler — Plug in your own S3, Cloudinary, or any upload logic via onImageUpload
• TypeScript — Full type definitions included (d.ts)
• ESM & CJS — Dual module format support

npm install tiptap-editor-kit

If you're using the React version, the following packages are required:

npm install react react-dom

Note: If you only use the Vanilla JS version, react and react-dom are not required. (optional peer dependency)

Use as a React component in your project.

import { useState } from 'react';
import TiptapEditor from 'tiptap-editor-kit';
import 'tiptap-editor-kit/styles.css';

function App() {
  const [content, setContent] = useState('<p>Hello World</p>');

  return <TiptapEditor content={content} setContent={setContent} />;
}

import { useState } from 'react';
import TiptapEditor from 'tiptap-editor-kit';
import 'tiptap-editor-kit/styles.css';

function App() {
  const [content, setContent] = useState('');

  const handleImageUpload = async (file: File): Promise<string> => {
    const formData = new FormData();
    formData.append('file', file);
    const res = await fetch('/api/upload', { method: 'POST', body: formData });
    const { url } = await res.json();
    return url;
  };

  return (
    <TiptapEditor
      content={content}
      setContent={setContent}
      onImageUpload={handleImageUpload}
    />
  );
}

Use without React in plain JavaScript/TypeScript projects.

import { createTiptapEditor } from 'tiptap-editor-kit/vanilla';
import 'tiptap-editor-kit/styles.css';
import 'tiptap-editor-kit/vanilla.css';

const instance = createTiptapEditor({
  element: document.getElementById('editor')!,
  content: '<p>Hello World</p>',
  onUpdate: (html) => {
    console.log('Updated:', html);
  },
});

import { createTiptapEditor } from 'tiptap-editor-kit/vanilla';
import 'tiptap-editor-kit/styles.css';
import 'tiptap-editor-kit/vanilla.css';

const instance = createTiptapEditor({
  element: document.getElementById('editor')!,
  content: '',
  onUpdate: (html) => {
    document.getElementById('output')!.textContent = html;
  },
  onImageUpload: async (file) => {
    const formData = new FormData();
    formData.append('file', file);
    const res = await fetch('/api/upload', { method: 'POST', body: formData });
    const { url } = await res.json();
    return url;
  },
});

Import the stylesheets based on your environment:

Note: The React version toolbar uses inline styles — no Tailwind CSS dependency required.

src/
├── core/                    # Shared modules
│   ├── constants.ts         #   Colors, fonts, type definitions
│   ├── extensions.ts        #   Tiptap extensions configuration
│   ├── font-size.ts         #   Custom FontSize extension
│   └── image-handler.ts     #   Drop / paste / file-select handlers
├── react/                   # React version
│   ├── index.tsx            #   TiptapEditor component
│   └── toolbar.tsx          #   JSX toolbar
├── vanilla/                 # Vanilla JS version
│   ├── index.ts             #   createTiptapEditor() factory
│   ├── toolbar.ts           #   DOM-based toolbar
│   └── vanilla.css          #   Toolbar styles (no Tailwind)
├── tiptap.css               #   Editor content area styles (shared)
├── index.tsx                # React entry point
└── vanilla.ts               # Vanilla entry point

This package is open-sourced software licensed under the MIT license.