Skip to main content

Without JS frameworks

Polotno is designed to use with React framework.

But if you don't need any customization, you can use special "frameworkless" version of Polotno. You can add it with a simple scripts into the page.

<!-- add styles -->
<link
  href="https://unpkg.com/@blueprintjs/icons@4/lib/css/blueprint-icons.css"
  rel="stylesheet"
/>
<link
  href="https://unpkg.com/@blueprintjs/core@4/lib/css/blueprint.css"
  rel="stylesheet"
/>
<link
  href="https://unpkg.com/@blueprintjs/popover2@1/lib/css/blueprint-popover2.css"
  rel="stylesheet"
/>
<!-- add polotno bundle -->
<!-- (!) important: make sure it is added into body of document (not <head>) -->
<script src="https://unpkg.com/polotno@latest/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'),
  });
  // you can use full store API available here: https://polotno.com/docs/store-overview
</script>