Without JS frameworks

Polotno is optimized for integration with the React framework.

However, for scenarios requiring no customization, a 'frameworkless' version of Polotno is available. This version can be easily included in a page through simple script tags.

<!-- add styles -->
<link
  href="https://unpkg.com/@blueprintjs/core@5/lib/css/blueprint.css"
  rel="stylesheet"
/>
<!-- add polotno bundle -->
<!-- (!) important: make sure it is added into body of document (not <head>) -->
<script src="https://unpkg.com/polotno@2/polotno.bundle.js"></script>

<!-- set styles for the editor -->
<style>
  body {
    padding: 0;
    margin: 0;
  }
  #container {
    width: 100vw;
    height: 100vh;
  }
</style>

<!-- create container for editor -->
<div id="container"></div>
<!-- init the editor -->
<script>
  const { store } = createPolotnoApp({
    // this is a demo key just for that project
    // (!) please don't use it in your projects
    // to create your own API key please go here: https://polotno.com/cabinet
    key: 'nFA5H9elEytDyPyvKL7T',
    // you can hide back-link on a paid license
    // but it will be good if you can keep it for Polotno project support
    showCredit: true,
    container: document.getElementById('container'),
    // also optionally you can specify which side panels you want to show
    // by default all panels are shown
    // sections: ['photos', 'text', 'elements', 'upload', 'background', 'layers']
  });
  // you can use full store API available here: https://polotno.com/docs/store-overview
</script>