Skip to main content

Build rich text experiences with WebEditor

The alternative to BlockNote and TipTap you’ve been waiting for. Write Markdown and JSX seamlessly, add custom components, and provide a world-class editing experience.

Get startedAPI Reference
import
from
”@devscribe-team/webeditor”
function
App()
return
WebEditor

Quick start

Get up and running with WebEditor in minutes

1

Install the package

Install WebEditor using your preferred package manager.
npm install @devscribe-team/webeditor
WebEditor requires React 18+ and Tailwind CSS 4+
2

Import the editor and styles

Import the WebEditor component and its styles into your application.
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";

function App() {
  return <WebEditor />;
}
3

Start editing

The editor automatically detects your browser’s theme preference and provides a rich editing experience with built-in components and markdown support.
Press / to open the command menu and insert components or format text

Key features

Everything you need to build modern rich text editing experiences

Markdown + JSX

Write Markdown and JSX seamlessly in the same document

Custom components

Add nestable custom components with a powerful command system

Command menu

Insert components and format text with an intuitive / command menu

Theme detection

Automatic light/dark mode with manual override support

Built-in components

Rich components including cards, callouts, code snippets, and diagrams

TypeScript support

Full type safety with comprehensive TypeScript definitions

Explore the docs

Learn how to use WebEditor in your projects

Installation

Set up WebEditor in your React application

Basic usage

Learn the fundamentals of working with WebEditor

Theme management

Control light and dark mode programmatically

API reference

Explore the complete API documentation

Ready to get started?

Build powerful rich text editing experiences with WebEditor

Get started now

Build docs developers (and LLMs) love

Get started for freeTalk to us