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
:
2. Create project
Right in your project folder create a new folder for editor. I will call it 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.
4. Create index.js
Create index.js
file in the editor
folder. It will be a main entry point for your editor.
5. Start development server
Tip: you can also add this command to your package.json
file:
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:
When you are happy with your editor, you can compile it into plain JS files. For that you need to run:
Also you can add this command to your package.json
file:
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:
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:
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.