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: