React Reference

The @pexelize/react-editor package provides a React component and hook for embedding the Pexelize editor.

Installation

npm install @pexelize/react-editor @pexelize/editor-types

Quick Start

import { PexelizeEditor } from '@pexelize/react-editor';
import type { DesignJson, EditorOptions } from '@pexelize/editor-types';

function App() {
  const options: EditorOptions = {
    user: { id: 'user-1', name: 'Jane', email: 'jane@example.com' },
    appearance: { theme: 'light' },
  };

  const handleReady = () => console.log('Editor ready');
  const handleChange = (design: DesignJson) => console.log('Changed', design);

  return (
    <PexelizeEditor
      options={options}
      style={{ height: '100vh' }}
      onReady={handleReady}
      onChange={handleChange}
    />
  );
}

PexelizeEditor Component Props

Prop	Type	Required	Description
options	EditorOptions	Yes	Editor configuration. See Configuration.
design	DesignJson	No	Initial design JSON to load.
style	React.CSSProperties	No	Inline styles for the container div.
className	string	No	CSS class for the container div.
onReady	() => void	No	Fires when the editor is fully initialized.
onLoad	(design: DesignJson) => void	No	Fires when a design is loaded.
onChange	(design: DesignJson) => void	No	Fires on every design change.
onError	(error: EditorError) => void	No	Fires on editor errors.
onModuleSave	(data: ModuleSaveData) => Promise<void>	No	Fires when a module is saved. Blocking.
onPreview	(data: PreviewData) => void	No	Fires when the user clicks preview.
onContentDialog	(data: ContentDialogData) => Promise<DesignJson>	No	Fires when the content dialog opens. Blocking.

usePexelizeEditor Hook

For imperative control, use the usePexelizeEditor hook:

import { PexelizeEditor, usePexelizeEditor } from '@pexelize/react-editor';
import type { DesignJson, ExportHtmlData } from '@pexelize/editor-types';

function App() {
  const { ref, isReady, loadDesign, exportHtml, undo, redo } = usePexelizeEditor();

  const handleExport = async () => {
    const html: ExportHtmlData = await exportHtml();
    console.log(html);
  };

  return (
    <div>
      <button onClick={handleExport} disabled={!isReady}>Export HTML</button>
      <button onClick={undo} disabled={!isReady}>Undo</button>
      <button onClick={redo} disabled={!isReady}>Redo</button>
      <PexelizeEditor
        ref={ref}
        options={{ user: { id: '1', name: 'Jane', email: 'jane@example.com' } }}
        style={{ height: '100vh' }}
      />
    </div>
  );
}

Hook Return Values

Property	Type	Description
ref	RefObject<PexelizeEditorRef>	Pass to the ref prop of <PexelizeEditor>.
isReady	boolean	true once the editor is initialized.
loadDesign	(design: DesignJson) => void	Load a design programmatically.
getDesign	() => DesignJson	Get the current design JSON.
exportHtml	() => Promise<ExportHtmlData>	Export design as HTML.
exportImage	(options?: ExportImageOptions) => Promise<ExportImageData>	Export design as image.
exportPdf	(options?: ExportPdfOptions) => Promise<ExportPdfData>	Export design as PDF.
undo	() => void	Undo last action.
redo	() => void	Redo last action.
setViewMode	(mode: ViewMode) => void	Switch between desktop/tablet/mobile view.
setTheme	(theme: ThemeMode) => void	Switch light/dark theme.
showPreview	() => void	Open the preview modal.
hidePreview	() => void	Close the preview modal.

Ref Methods

If you prefer using refs directly instead of the hook:

import { useRef } from 'react';
import { PexelizeEditor, type PexelizeEditorRef } from '@pexelize/react-editor';

function App() {
  const editorRef = useRef<PexelizeEditorRef>(null);

  const handleSave = async () => {
    const design = editorRef.current?.getDesign();
    const html = await editorRef.current?.exportHtml();
    // save to your backend
  };

  return (
    <PexelizeEditor
      ref={editorRef}
      options={{ user: { id: '1', name: 'Jane', email: 'jane@example.com' } }}
      style={{ height: '100vh' }}
      onReady={() => console.log('Ready')}
    />
  );
}

PexelizeEditorRef exposes all the same methods as the hook (except ref and isReady).

TypeScript

All types are re-exported from @pexelize/editor-types for convenience:

import type {
  DesignJson,
  EditorOptions,
  ExportHtmlData,
  ExportImageData,
  ExportPdfData,
  ViewMode,
  ThemeMode,
} from '@pexelize/react-editor';

tip

Use the usePexelizeEditor hook for the most ergonomic API. It manages the ref internally and provides reactive isReady state.

warning

Always set an explicit height on the editor container (via style or className). The editor fills its parent and won't render without a defined height.