Events

All Webdraw events bubble and cross the component boundary. Listen with the standard DOM event API.

webdraw-ready

Fires after the canvas and resize observer are ready. Use it when setup must wait for the rendered editor.

drawing.addEventListener("webdraw-ready", () => {
  console.log("Webdraw is ready");
});

Remount the demo to fire the event again.

webdraw-change

Fires after a scene edit or a public scene-changing method. detail contains elements, appState, and files.

drawing.addEventListener("webdraw-change", ({ detail }) => {
  localStorage.setItem("diagram", JSON.stringify(detail));
});

webdraw-library-change

Fires when the library loads or changes. Read the current items from detail.libraryItems. This is the persistence hook when storage-key="".

drawing.addEventListener("webdraw-library-change", ({ detail }) => {
  saveLibrary(detail.libraryItems);
});

webdraw-error

Fires when Webdraw cannot parse library JSON or open a scene file. detail is the original error.

drawing.addEventListener("webdraw-error", ({ detail }) => {
  showError(detail.message);
});

The demo deliberately passes invalid library JSON.