Vellum

Vellum is a React rich text editor built on top of TipTap. It ships with a Medium-style writing experience, a pluggable image storage layer, and a small API surface that is easy to drop into an app.

Features

• Modular storage providers with built-in base64 and imagekit support
• Bubble and floating menus for common formatting actions
• Automatic image cleanup hooks when tracked media is removed
• CSS-based theming through props and exported package styles
• Responsive editor layout for desktop and mobile

Installation

npm install vellum-editor

react and react-dom 18+ are peer dependencies and must already exist in the host app.

Basic usage

import { useState } from 'react';
import VellumEditor from 'vellum-editor';
import 'vellum-editor/style.css';

export default function MyArticleEditor() {
  const [html, setHtml] = useState('');

  return (
    <VellumEditor
      onChange={setHtml}
      placeholder={{
        text: 'Tell your story...',
        color: '#94a3b8',
        fontSize: '1.2rem',
        opacity: 0.8
      }}
      editorSettings={{
        backgroundColor: 'transparent'
      }}
      bubbleMenuSettings={{
        backgroundColor: '#1e293b',
        iconSize: 18,
        border: '1px solid #334155',
        hoverBg: '#334155',
        hoverColor: '#60a5fa'
      }}
      storage={{
        provider: 'imagekit',
        config: {
          publicKey: process.env.NEXT_PUBLIC_IMAGEKIT_PUBLIC,
          authenticationEndpoint: 'https://your-api.com/auth',
          folder: 'blog_articles'
        }
      }}
    />
  );
}

API

React component: VellumEditor

| Prop | Type | Description | | --- | --- | --- | | onChange | (html: string) => void | Called whenever the editor content changes. | | placeholder | object | Placeholder text and styling overrides. | | iconPack | object | Replaces built-in Lucide icons with custom components. | | bubbleMenuSettings | object | Styling controls for the text selection menu. | | editorSettings | object | Styling controls for the editor container. | | storage | object | Storage provider selection and provider config. |

Storage providers

storage={{ provider: 'base64' }}

storage={{
  provider: 'imagekit',
  config: {
    publicKey: '...',
    privateKey: '...',
    authenticationEndpoint: 'https://your-api.com/auth',
    folder: 'my_uploads'
  }
}}

Exports

import VellumEditor from 'vellum-editor';
import { Base64Provider, ImageKitProvider } from 'vellum-editor';
import { useVellumEditor, useVellumStorage } from 'vellum-editor';
import 'vellum-editor/style.css';

Publishing

This package is configured for public npm publishing.

npm run build
npm run pack:check
npm publish

If you later move to a scoped package, npm currently requires public scoped packages to be published with public access, commonly via npm publish --access public.

License

MIT