Angular

How to integrate Polotno editor into Angular application?

Let's demonstrate how to integrate the Polotno editor, a React-based design tool, into an Angular application.

This demo showcases:

Integration of React components (Polotno) within an Angular application
Optional use of MobX for state management in Angular

Installation

Run the following npm command to install React, ReactDOM, and Polotno:

npm install react react-dom polotno

Optionally, you can install mobx-angular library if you want to have automatic reactivity of changes on canvas in your Angular UI.

npm install mobx-angular

Create Polotno Editor Component With React

Create editor.tsx, and set up the Polotno editor as a React component:

// this file is a bootstrap of polotno editor
// from here you can start any customization
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 * as React from "react";
import createStore from "polotno/model/store";
import "@blueprintjs/core/lib/css/blueprint.css";

export const store = createStore({ key: "your-api-key", showCredit: true });
store.addPage();

export const App = () => {
  return (
    <PolotnoContainer style={{ height: "90vh" }}>
      <SidePanelWrap>
        <SidePanel store={store} />
      </SidePanelWrap>
      <WorkspaceWrap>
        <Toolbar store={store} />
        <Workspace store={store} />
        <ZoomButtons store={store} />
      </WorkspaceWrap>
    </PolotnoContainer>
  );
};

Remember to replace "your-api-key" in editor.tsx with your actual Polotno API key.

Set Up React Integration

In an Angular component that should show the editor (let's call it app.component.ts), use React DOM to render the Polotno editor:

import * as ReactDOM from "react-dom/client";
import * as React from "react";
import { App, store } from "./polotno/editor";

export class AppComponent {
     root: ReactDOM.Root | undefined;
     store = store;

     ngAfterViewInit() {
       this.root = ReactDOM.createRoot(document.getElementById("editor"));
       this.renderComponent();
     }

     public ngOnChanges() {
       this.renderComponent();
     }

     private renderComponent() {
       this.root.render(React.createElement(App));
     }

     public ngOnDestroy() {
       if (this.root) {
         this.root.unmount();
       }
     }

     // ... other lifecycle methods
}

Make sure that the HTML template of the component has a container for the editor:

<div id="editor"></div>

(Optionally) Setup mobx reactions

The mobx-angular library can be used to automatically react to state changes in polotno store. Import it in app.component.ts:

import { MobxAngularModule } from 'mobx-angular';

And add it to the imports array in the component decorator.

@Component({
     selector: "app-root",
     templateUrl: "./app.component.html",
     styleUrls: ["./app.component.css"],
     standalone: true,
     imports: [MobxAngularModule],
   })

With mobx-angular integration, you can do things like this in HTML:

<div *mobxAutorun class="header">
  Number of pages: {{ store.pages.length }}
</div>

Customization

Now from editor.tsx file you can do any customization of the editor you need. From your Angular app, you can control store object. For example, you can use it to load data into editor and export the result into image/pdf.