@figureit/react

The FigureIt editor as a React component, with typed props and callbacks instead of attributes and events.

FigureIt comes from figure it out. You draw what you are thinking, see it, arrange it, and understand it in the arranging.

npm install @figureit/react

import { FigureItEditor } from "@figureit/react";

function Diagram({ task }) {
  return (
    <FigureItEditor
      source={task.figure}
      documentId={task.id}
      baseRevision={task.revision}
      save="host"
      onDirtyChange={({ dirty }) => task.setDirty(dirty)}
      onChange={({ source }) => task.stage(source)}
    />
  );
}

Notes

Import on the client. The module defines a custom element and touches HTMLElement, so importing it in Node throws. Frameworks that render on the server need a client-only import.

save="host" leaves Cmd/Ctrl+S to your app. Use it when the figure is part of a document you already save — otherwise your own shortcut works everywhere except over the canvas.

Theme and read-only change without remounting. Passing them re-renders in place, so selection, viewport and undo history survive.

Documentation

docs.figureit.io/embed/react — every prop, every callback, and the saving contract they take part in.

Licence

MIT.