Skip to content

Next.js

Next.js WYSIWYG editor — App Router ready

One 'use client' file and you have a full rich text editor in Next.js — no next/dynamic tricks, no hydration warnings. Built on the official React component, ~41 KB gzipped, zero dependencies.

Get a free API key Live demo
RSC
compatible
one 'use client' file
~41 KB
editor core
zero dependencies
13
plugins included
tables, media, code…
Free
lifetime plan
no credit card

Setup

Next.js in four steps

  1. 1

    Install

    The official React component works in Next.js (App Router and Pages Router).

    bash
    npm install @liteeditor/react @liteeditor/editor
  2. 2

    Create a 'use client' component

    The editor is a browser widget, so it lives in a client component. Server components can render it anywhere; initialization runs only after mount, so server rendering is safe with no dynamic-import tricks.

    jsx
    // app/posts/RichEditor.jsx
'use client';

import { useRef } from 'react';
import { Editor } from '@liteeditor/react';

export default function RichEditor({ initialHtml = '' }) {
  const ref = useRef(null);
  return (
    <Editor
      ref={ref}
      apiKey={process.env.NEXT_PUBLIC_LITEEDITOR_KEY}
      value={initialHtml}
      plugins="all"
      toolbar="full"
      menubar
    />
  );
}
  3. 3

    Render it from a server component

    No wrapper needed — the boundary is the file above.

    jsx
    // app/posts/new/page.jsx (server component)
import RichEditor from '../RichEditor';

export default function Page() {
  return <RichEditor />;
}
  4. 4

    Save via a route handler or server action

    Read the HTML with ref.current.getContent() and post it — the output is clean, self-contained HTML.

    jsx
    const save = async () => {
  const html = ref.current?.getContent();
  await fetch('/api/posts', { method: 'POST', body: JSON.stringify({ html }) });
};

Live

The same editor, live

The exact editor the React component renders — try the menubar, tables, and paste from Word.

Loading editor…

FAQ

Next.js rich text editor FAQ

LiteEditor's @liteeditor/react component is Next.js-ready out of the box: one 'use client' file, browser-guarded initialization (SSR-safe), ~41 KB gzipped with zero dependencies, and tables, images, media and code samples included. Free lifetime plan.

See also: React component · Nuxt guide · TinyMCE comparison

Add a rich text editor to your Next.js app

Free lifetime plan · No credit card · localhost pre-approved for development

Try the live demo Get a free API key Docs
npm install @liteeditor/react @liteeditor/editor