Editor as Overlay

Example below shows how to open an existing image on the page inside pixie overlay (modal) editor.

<img id="image" src="assets/images/sample.jpg" /><button id="button">
  Open Editor
</button>
<script>
  var pixie = new Pixie({
    ui: {
      // whether pixie is visible initially
      visible: false,
      mode: "overlay",
    },
  });

  //open pixie on button click
  document.querySelector("#button").addEventListener("click", function () {
    pixie.open({ image: document.querySelector("#image").src });
  });
</script>