Non-React integration

Polotno is designed for use with the React framework, requiring a React environment for customization. However, you can still integrate Polotno with other frameworks, such as Vue, Angular, and Svelte. Here is how:

Start by creating an isolated project for the 'editor' component.
Use Polotno to build and customize the editor as needed.
Develop a set of API methods to facilitate communication with the primary project.
Compile the project into basic source files, eliminating the need for JSX or transpilers.
Incorporate the compiled bundle into the main project.

It's important to note that React proficiency remains essential for customizing the Polotno editor. In the current landscape, numerous tools are available for creating React projects. For demonstration purposes, this explanation will utilize the parcel bundler. For those interested in viewing a sample result, an example repository is available for reference.

1. Installations

First of all, you need to install parcel bundler, polotno and react:

npm install parcel polotno react react-dom

2. Create project

Right in your project folder create a new folder for editor. I will call it editor.

mkdir editor

3. Create index.html

Create index.html file in the editor folder. It will be a template for your editor.

Note: HTML file will not be used in your application moving forward; it is only needed for isolated development.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />

    <link
      href="https://unpkg.com/@blueprintjs/core@5/lib/css/blueprint.css"
      rel="stylesheet"
    />
    <style>
      body {
        padding: 0;
        margin: 0;
      }
      #root {
        width: 100vw;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <div id="root"></div>
    <script src="./index.js" type="module"></script>
    <script>
      window.onload = () => {
        window.createEditor({ container: document.getElementById('root') });
      };
    </script>
  </body>
</html>

4. Create index.js

Create index.js file in the editor folder. It will be a main entry point for your editor.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { PolotnoContainer, SidePanelWrap, WorkspaceWrap } from 'polotno';
import { Toolbar } from 'polotno/toolbar/toolbar';
import { ZoomButtons } from 'polotno/toolbar/zoom-buttons';
import { SidePanel } from 'polotno/side-panel';
import { Workspace } from 'polotno/canvas/workspace';

import { createStore } from 'polotno/model/store';

const store = createStore({
  key: 'nFA5H9elEytDyPyvKL7T', // you can create it here: https://polotno.com/cabinet/
  // 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,
});
const page = store.addPage();

export const App = ({ store }) => {
  return (
    <PolotnoContainer style={{ width: '100vw', height: '100vh' }}>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} />
        <Workspace store={store} />
        <ZoomButtons store={store} />
      </WorkspaceWrap>
    </PolotnoContainer>
  );
};

// default API of your editor
export const createEditor = ({ container }) => {
  const root = ReactDOM.createRoot(container);
  root.render(<App store={store} />);
};

// make API global for simple start in development
window.createEditor = createEditor;

5. Start development server

parcel ./editor/index.html

Tip: you can also add this command to your package.json file:

"scripts": {
  "dev": "parcel ./editor/index.html",
}

6. Open editor in browser

Open http://localhost:1234 in your browser. That URL is default by parcel bundler. But it may use a different port. So watch your terminal.

7. Compile editor

First you need to tell parcel where you want to put compiled code. For that you need to add this line into package.json file:

"main": "editor.js",

When you are happy with your editor, you can compile it into plain JS files. For that you need to run:

parcel build ./editor/index.js --no-source-maps

Also you can add this command to your package.json file:

"scripts": {
  "build:editor": "parcel build ./editor/index.js --no-source-maps",
}

8. Use editor in your project

Now you can use your editor in your project. For that you need to add editor.js file into your project. And then you can use it like this:

import { createEditor } from './editor.js';

// somewhere in you code:
createEditor({ container: document.getElementById('editor') });

Note: every time you modify editor.js or any other file in editor folder, you need to recompile it.

Also remember to include CSS styles into your project:

<link
  href="https://unpkg.com/@blueprintjs/core@5/lib/css/blueprint.css"
  rel="stylesheet"
/>

9. API

createEditor method here is just a simple example. You can customize it as you want. For example, you can add some methods to communicate with your main project. You can pass some data into it and define some callbacks. Only your imagination is a limit.

Vue example

Open Vite + Vue + Polotno example

10. Pitfalls

Installing all editor dependencies may go into conflict with your own project. If that is the case, you can put whole editor workflow into its own package.json file in editor folder and install all dependencies there.