You can use Polotno
tools and ability to customize side panel to make your own library of templates.
In order to make a templates library you will need:
Create a design in the
Polotno
EditorUse
store.toJSON()
to save the design state on computer as.json
file(Optionally) Use
store.saveAsImage()
to save preview file of a designRepeat 1-4 as many times as you need in order to make a library of templates
If you skipped step number 3 you can use Cloud Render API to generate previews automatically
Make a server-side API to access a list of templates
Create a custom side panel to display a list of templates from that API
Use
store.loadJSON()
to import design into canvas
(1-4) Making designs library
You will need to use Polotno editor to create designs. Importing designs from other software is not directly supported.
Note: if you need to import from svg
files, please contact us, there are some (not public) tools for that.
(5) Generating previews
You can use Polotno Cloud API
to generate previews with your own backend language.
(6) Making backend API to load templates
This step is out of Polotno
scope. You can use any backend stack you like. Most likely, you will need API to get a list of available templates. For every design, you will have to share a public path to json
file and png
preview.
(7 and 8) Displaying templates on side panel
As soon as you have backend API to get list of templates, you can use Side Panel Customization to display that list on the page. In the demo we will use <ImagesGrid />
component and useInfiniteAPI
hook (Docs for them). You don't have to use them in your app. You can make your own implementation. But these modules may save you a lot of time, because they are designed for such use cases. Polotno uses them internally for default side panels.
The side panel may look like this: