@scopmx/markup-editor

Fabric.js markup and drawing editor for React — shapes, text, PDF and image backgrounds, comments, version history, and PDF/image/HTML export.

Install

npm install @scopmx/markup-editor

Usage

import {
    DrawingEditor,
    UserProvider,
    ToastProvider,
    ToastContainer,
    SwitchUserModal,
} from "@scopmx/markup-editor";
import "@scopmx/markup-editor/styles.css";

export function EditorPage() {
    return (
        <UserProvider>
            <ToastProvider>
                <DrawingEditor
                    drawingId={null}
                    loadToken={0}
                    onDrawingCreated={() => {}}
                    onDirtyChange={() => {}}
                    onMetaUpdated={() => {}}
                    onCommentsChange={() => {}}
                    onSelectionChange={() => {}}
                    rightTab="style"
                    onRightTabChange={() => {}}
                    commentsPanelProps={{/* ... */}}
                    historyPanelProps={{/* ... */}}
                />
                <SwitchUserModal />
                <ToastContainer />
            </ToastProvider>
        </UserProvider>
    );
}

Exports

• Components: DrawingEditor, EditorHeader, ConfirmDialog, SwitchUserModal, ToastContainer
• Context: UserProvider, useCurrentUser, ToastProvider, useToast
• Services: drawing/version CRUD via versionService functions
• Types: DrawingEditorProps, DrawingEditorHandle, models, panel props, etc.

Use a ref on DrawingEditor to access DrawingEditorHandle (saveVersion, restoreVersionById, etc.).

Guides

• Live-HTML screen redirect — what a host must store and return so comment redirect survives a reload.

Peer dependencies

• react ^18 or ^19
• react-dom ^18 or ^19