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/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>