Vue.js

How to integrate Polotno editor into Vue application?

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

This demo showcases:

  • Integration of React components (Polotno) within an Vue application

  • Optional use of MobX for state management in Vue

Installation

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

npm install react react-dom polotno

Optionally, you can install mobx-vue-lite library if you want to have automatic reactivity of changes on canvas in your vue components.

npm install mobx-vue-lite

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 Vue component that should show the editor (let's call it App.vue), use React DOM to render the Polotno editor:

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

<script setup>
import * as ReactDOM from 'react-dom/client';
import * as React from 'react';
import { App, store } from './components/editor';
import { Observer } from 'mobx-vue-lite';

import { onMounted, onUnmounted } from 'vue';

let root;
onMounted(() => {
  root = ReactDOM.createRoot(document.getElementById('editor'));
  root.render(React.createElement(App));
});

onUnmounted(() => {
  root?.unmount();
});
<

(Optionally) Setup mobx reactions

The mobx-vue-lite library can be used to automatically react to state changes in polotno store. Import it in App.vue:

import { Observer } from 'mobx-vue-lite';

And wrap HTML like this:

<Observer>
    <div class="header">
      <div>
        This header is controlled by Vue. It can be used to display the number
        of pages: {{ store.pages.length }}
      </div>
      <button @click="store.addPage">Add page</button>
    </div>
    <div id="editor"></div>
  </Observer>

Customization

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

News, updates and promos – be the first to get 'em

News, updates and promos – be the first to get 'em