Next.js

The React package with a "use client" banner. Use it straight from Server Components and wire it to Server Actions with name.

On this page

Package@open-wysiwyg-editor/nextRequires Next.js 13.4+

Install

Terminal

npm install @open-wysiwyg-editor/next

Usage

import "@open-wysiwyg-editor/next/style.css";

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Good to know

Import the stylesheet once, in app/layout.tsx (or pages/_app.tsx).
A Server Component cannot pass functions such as onChange. Use a client component for those, or use name with a Server Action.
You do not need dynamic(…, { ssr: false }): nothing touches window or document while rendering.

Always sanitize on the server

The editor sanitizes what it loads and produces, but that is not a security boundary: anyone can post any string to your API. Sanitize the HTML again with a library you trust before you store it or render it for other users.

Edit this page on GitHub