Skip to main content
This guide will walk you through creating your first WebEditor instance from installation to rendering.

​
Step 1: Create a new React project

If you don’t have a React project yet, create one using Vite: 
npm create vite@latest my-webeditor-app -- --template react-ts
cd my-webeditor-app
npm install

​
Step 2: Install dependencies

Install WebEditor and its peer dependencies: 
npm install @devscribe-team/webeditor react react-dom tailwindcss

​
Step 3: Configure Tailwind CSS

1

Initialize Tailwind

npx tailwindcss init
2

Update tailwind.config.js

tailwind.config.js
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/@devscribe-team/webeditor/**/*.{js,ts,jsx,tsx}"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
3

Create index.css

Create or update src/index.css:
src/index.css
@tailwind base;
@tailwind components;
@tailwind utilities;

​
Step 4: Create your first editor

Create a basic editor component:
src/App.tsx
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";
import "./index.css";

function App() {
  return (
    <div className="container mx-auto p-4">
      <h1 className="text-3xl font-bold mb-4">My WebEditor App</h1>
      <WebEditor />
    </div>
  );
}

export default App;
The editor will automatically detect and apply your browser’s preferred theme (light or dark mode).

​
Step 5: Run your application

Start the development server: 
npm run dev
Open your browser to http://localhost:5173 (or the URL shown in your terminal). You should see your WebEditor instance running!

​
Working with content

​
Controlled editor with onChange

To track changes and handle content updates: 
import { useState } from "react";
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";

function App() {
  const [content, setContent] = useState<string>("");

  return (
    <div className="container mx-auto p-4">
      <WebEditor 
        onChange={(html) => {
          setContent(html);
          console.log("Content updated:", html);
        }}
      />
    </div>
  );
}

export default App;

​
Setting initial content

You can provide initial content using the value prop: 
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";

function App() {
  const initialContent = `
# Welcome to WebEditor

This is a **rich text editor** with *Markdown support*.

## Features

- Write Markdown and JSX
- Add custom components
- Use the / menu for commands
  `;

  return <WebEditor value={initialContent} />;
}

export default App;

​
Read-only mode

To create a read-only editor for displaying content: 
import { WebEditor } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";

function App() {
  const content = "# Read-only Content\n\nThis editor is not editable.";

  return <WebEditor value={content} editable={false} />;
}

export default App;

​
Adding theme controls

WebEditor includes a built-in theme management system. You can add manual theme controls: 
import { WebEditor, useTheme } from "@devscribe-team/webeditor";
import "@devscribe-team/webeditor/styles";

function App() {
  const { theme, resolvedTheme, setTheme } = useTheme();

  return (
    <div className="container mx-auto p-4">
      <div className="flex gap-2 mb-4">
        <button 
          onClick={() => setTheme("light")}
          className="px-4 py-2 border rounded"
        >
          Light
        </button>
        <button 
          onClick={() => setTheme("dark")}
          className="px-4 py-2 border rounded"
        >
          Dark
        </button>
        <button 
          onClick={() => setTheme("auto")}
          className="px-4 py-2 border rounded"
        >
          Auto
        </button>
        <span className="px-4 py-2">
          Current: {theme} (resolved: {resolvedTheme})
        </span>
      </div>
      <WebEditor />
    </div>
  );
}

export default App;
The theme system automatically:
  • Follows your system’s dark/light preference in auto mode
  • Persists your theme choice to localStorage
  • Updates reactively when system preference changes

​
Using the editor

Once your editor is running, you can:
  1. Type Markdown: Just start typing - headers, lists, bold, italic all work
  2. Access commands menu: Press / in an empty line or at the start of a line to see available components
  3. Apply marks: Select text and press / to see formatting options
  4. Add components: Use the commands menu to insert cards, callouts, code snippets, and more
The commands menu (/) only appears when your cursor is at the start of a line or in an empty paragraph. This prevents accidental triggers while typing.

​
Next steps

Core concepts

Learn about the architecture and how WebEditor works

Components

Explore all available built-in components

Theming

Customize the editor’s appearance

API Reference

Detailed API documentation for WebEditor

Build docs developers (and LLMs) love

Get started for freeTalk to us