Documentation Get started

React integration

Add the React component, export through a ref and update settings without remounting.

On this page

Install

The wrapper supports React 18.3 and React 19.

npm install @weavour/react

Add an editor

Wait for onReady before enabling actions that use the ref. The component removes the editor on unmount.

'use client';

import { useRef, useState } from 'react';
import { WeavourEditor, type WeavourEditorRef } from '@weavour/react';

export function EmailComposer() {
  const editor = useRef<WeavourEditorRef>(null);
  const [ready, setReady] = useState(false);
  const [error, setError] = useState('');
  const [html, setHtml] = useState('');

  async function exportEmail() {
    try {
      const output = await editor.current!.exportHTML();
      setHtml(output.html);
    } catch (error) {
      setError(error instanceof Error ? error.message : String(error));
    }
  }

  return (
    <section>
      <WeavourEditor
        ref={editor}
        editorKey="YOUR_PUBLIC_EDITOR_KEY"
        userId="user-123"
        organizationId="organization-456"
        style={{ height: 700 }}
        onReady={() => setReady(true)}
        onError={error => setError(error.message)}
      />
      <button type="button" disabled={!ready} onClick={exportEmail}>
        Export HTML
      </button>
      {error && <p role="alert">{error}</p>}
      {html && <textarea aria-label="Exported HTML" readOnly value={html} />}
    </section>
  );
}

Update props or start a new session

Mode, theme, locale, merge tags, display conditions, blocks and feature preferences update live. Callback props use your latest handlers.
Editor key, user and organization IDs, initial content and draftId require a new mount. Save current work, then change the component’s React key.

Use a component with the use client directive, as in the example. Imports are safe during server rendering; the editor mounts in the browser. Keep delivery and administrative credentials in your server routes.

Need help? Contact us

Install

Add an editor

Update props or start a new session

Next.js