Editor · Annotations

Editor

Draw a mark, move it, change your mind. The page holds the annotations and the editor reports each change.

A soft marble texture in coral, sand and blue, with editable marks

Choose a tool, then click or drag on the image. Select a mark to move it. Arrow keys move the selection, Delete removes it, and Escape cancels.

Saved2 marks

{"version":1,"annotations":[{"kind":"area","box":[10,14,30,30],"label":"Crop line"},{"kind":"arrow","line":[70,74,52,56]}]}

⌘Z undoes and ⇧⌘Z redoes while the image has focus. Arrow keys move the selected mark.

import { createAnnotationEditor, createAnnotatedImage } from "@reuse-sh/annotations";

const root = document.querySelector(".proof-editor");
const image = { src, alt, width: 1600, height: 1200 };
const renderer = createAnnotatedImage(root, { ...image, annotations: stored });
const editor = createAnnotationEditor(root, {
  annotations: stored,
  onChange(next) {
    renderer.update({ ...image, annotations: next });
    save(next);
  },
});

undoButton.onclick = () => editor.undo();
redoButton.onclick = () => editor.redo();

import { AnnotationEditor } from "@reuse-sh/annotations/react";
import { useState } from "react";

export function ProofEditor({ initial }) {
  const [annotations, setAnnotations] = useState(initial);
  return (
    <AnnotationEditor
      src="/prints/coral-sky.jpg"
      alt="A marble print in coral, sand and blue"
      width={1600}
      height={1200}
      annotations={annotations}
      onChange={setAnnotations}
    />
  );
}