Polotno design can be exported into JSON format and imported from it. The best way to learn JSON from Polotno is to just export any design into JSON and inspect it:
JSON structure has the same structure as the store object:
Here is a sample of JSON:
So we have a root object with properties
width
- number in css pixelsheight
- number in css pixelsfonts
- array of fontsaudios
- array of audiospages
- array of pagesunit
- metric system. Only used for UI in the editor. Doesn't affect any sizes in store/json.dpi
- used to convert units into pixels in editor UI
Fonts
A font can be represented as an object:
Also it can have a form like this:
Audios
Example of audio object
id
- unique ID of audio. Must be a string.src
- public path to a fileduration
- total duration of file defined insrc
. It is an internal property that polotno auto-detects based on file.delay
- number in ms. Defines when audio is starting to play on global timelinestartTime
- number in ms. Defines from what point of audio file to start to play. For example,startTime = 5000
means that when audio is starting to play, it will played from 5s second of audio file.endTime
- similar tostartTime
it will define when to finish playing the audio relative to the timeline of the audio file
Pages
Every page has:
id
width
- number is CSS pixels or "auto" to take size from root.height
- number is CSS pixels or "auto" to take size from root.background
- CSS color or path to imagechildren
- array of shapes and groups