Getting Started

Updated 8 April 2026

Watch Demo Watch Tutorial

Introduction

Learn how to install the package, import the CSS bundle, render the controlled editor, and validate your integration across CRA, Vite, and Next.js—all in one guided checklist.

This guide walks you through every prerequisite and first-run task: installing the package, importing the CSS, wiring the controlled component, configuring height/width defaults, and verifying framework specifics for Next.js, CRA, and Vite. Follow the sections below to bootstrap state management, render your first editor instance, and discover the next docs to read once you are live.

Installation

Select your preferred workflow—CLI or package manager—to add the editor to your project.

npm install @webbycrown/react-advanced-richtext-editor

Requirements

  • React 16.8 or newer Hooks (useState, useEffect, useCallback) drive the editor’s controlled state. Older React versions lack those primitives and will fail to compile the examples.
  • ReactDOM 16.8 or newer Portal-based UI (modals, floating toolbars) and concurrent rendering fixes rely on the matching ReactDOM release—keep React/ReactDOM versions in sync to avoid hydration warnings.
  • Modern evergreen browser The editor leans on contentEditable, Selection API, Clipboard API, and ResizeObserver. Ensure Chrome, Edge, Firefox, or Safari within the last two years; IE11 is not supported.

Basic Usage

1. Import the Editor

// Import the Editor component
import Editor from '@webbycrown/react-advanced-richtext-editor';
// Import the default stylesheet (required)
import '@webbycrown/react-advanced-richtext-editor/dist/styles.css';

2. Use in Your Component

import React, { useState } from 'react';
import Editor from '@webbycrown/react-advanced-richtext-editor';
// Import the default stylesheet - required for proper editor appearance
import '@webbycrown/react-advanced-richtext-editor/dist/styles.css';

function App() {
  // Store HTML content in state
  const [content, setContent] = useState('');

  return (
    <Editor
      value={content}           // Current HTML content
      onChange={setContent}     // Update state when content changes
      height={400}              // Editor height in pixels
      width="100%"              // Full width of container
    />
  );
}

First Steps

1. Import the component and styles

import Editor from '@webbycrown/react-advanced-richtext-editor'; // Import the default bundle
import '@webbycrown/react-advanced-richtext-editor/dist/styles.css'; // Import the default stylesheet

2. Render the editor

<Editor/> // Render the editor

Next Steps

Framework Compatibility

Next.js

The editor works seamlessly with Next.js. For App Router (Next.js 13+), make sure to use it in a Client Component. The editor requires browser APIs that are only available on the client side.

Setup Steps:

  • Install the package
  • Add 'use client' directive at the top of your file
  • Import the Editor and stylesheet

Note: If you’re using the Pages Router (Next.js 12 and below), you can use the editor directly without the 'use client' directive, as all components are client-side by default.

// Required for Next.js App Router (editor uses browser APIs)
'use client';

// Import useState hook
import { useState } from 'react';
// Import the Editor component
import Editor from '@webbycrown/react-advanced-richtext-editor';
// Import editor styles
import '@webbycrown/react-advanced-richtext-editor/dist/styles.css';

export default function Page() {
  // Store HTML content in state
  const [content, setContent] = useState('');
  
  return (
    <Editor
      value={content}           // Current HTML content
      onChange={setContent}     // Update state when content changes
      height={500}              // Editor height in pixels
    />
  );
}

Create React App

Create React App (CRA) is the official way to create single-page React applications. The editor integrates seamlessly with CRA projects without any additional configuration.

Setup Steps:

  • Install the package
  • Import the Editor and stylesheet in your component

Note: CRA handles all the build configuration automatically, so you can focus on building your application.

// Import React and useState hook
import React, { useState } from 'react';
// Import the Editor component
import Editor from '@webbycrown/react-advanced-richtext-editor';
// Import editor styles
import '@webbycrown/react-advanced-richtext-editor/dist/styles.css';

function App() {
  // Store HTML content in state
  const [content, setContent] = useState('');

  return (
    <div className="App">
      <Editor
        value={content}           // Current HTML content
        onChange={setContent}     // Update state when content changes
        height={500}              // Editor height in pixels
      />
    </div>
  );
}

export default App;

Vite

Vite is a next-generation frontend build tool that provides a faster and leaner development experience. The editor works perfectly with Vite’s React template.

Setup Steps:

  • Install the package
  • Import the Editor and stylesheet in your component

Benefits: Vite offers instant server start, lightning-fast HMR (Hot Module Replacement), and optimized builds. The editor’s CSS will be automatically processed by Vite’s CSS handling.

// Import useState hook
import { useState } from 'react';
// Import the Editor component
import Editor from '@webbycrown/react-advanced-richtext-editor';
// Import editor styles
import '@webbycrown/react-advanced-richtext-editor/dist/styles.css';

function App() {
  // Store HTML content in state
  const [content, setContent] = useState('');

  return (
    <Editor
      value={content}           // Current HTML content
      onChange={setContent}     // Update state when content changes
      height={400}              // Editor height in pixels
    />
  );
}

export default App;