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
polotno-node
to generate previews automaticallyMake server side API to access list of templates
Create a custom side panel to display list of templates from that API
Use
store.loadJSON()
(1-4) Making designs library
To make Polotno-friendly designs a Polotno-based editor must be used.
Feel free to use https://studio.polotno.com/ if you want; when a design is ready, hit "save' button to download .json
file.
(5) Generating previews
The polotno-node
API can be used to efficiently generate small previews of the entire library. A NodeJS script can be written to read a directory and create previews for every JSON file contained in it. Upon completion of the script, a folder will be generated that includes the designs (JSON files) and their previews (PNG files).
If you prefer not to use NodeJS, 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 need to share 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: