@figureit/editor

The FigureIt editor as a web component. Drop <figureit-editor> into any page, framework or none.

FigureIt comes from figure it out. You draw what you are thinking, see it, arrange it, and understand it in the arranging — and this is the surface where that happens.

npm install @figureit/editor

<figureit-editor id="editor"></figureit-editor>
<script type="module">
  import "@figureit/editor";

  const editor = document.querySelector("#editor");
  editor.source = `figure { schemaVersion: 1; }`;

  editor.addEventListener("figureit-change", ({ detail }) => {
    console.log(detail.source); // canonical text, ready to store
  });
</script>

The contract

It never writes anything. Not a file, not a request. It holds a document, tells you when it is dirty, and hands you canonical text when asked — where a figure belongs is your decision, and an editor that guessed would be wrong somewhere. Answer save-request with acknowledgeSave, reportSaveError, reportConflict, or abandonSave.

It stays inside its element. A shadow root, so your button { } cannot break its toolbar and its styles cannot reach your page. The chrome takes its colours from custom properties you can set from outside.

It speaks nine languages. en, ja, de, es, fr, id, it, ko, pt — the interface and the readability findings, never the document.

It hands back the keyboard. save="host" leaves Cmd/Ctrl+S to the page around it, for an app that saves the figure as part of its own document.

Also available

@figureit/react wraps this in a component with typed props and callbacks. @figureit/iframe runs it in an isolated frame and speaks to it over postMessage.

Documentation

docs.figureit.io/embed — options, events, methods, and the saving contract.

Licence

MIT.