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.
Create Polotno Editor Component With React
Create editor.tsx, and set up the Polotno editor as a React component:
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();
}
}
}
Make sure that the HTML template of the component has a container for the editor:
(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.