Scheme of JSON

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:

store.toJSON()

JSON structure has the same structure as the store object:

// access data via store API
const firstEl = store.pages[0].children[0];

// access from JSON object
const json = store.toJSON();
const firstJsonEl = json.pages[0].children[0];

Here is a sample of JSON:

{
    "width": 1080,
    "height": 1080,
    "fonts": [{
      "fontFamily": "Public Sans",
      "url": "https://fonts.cdnfonts.com/s/19244/PublicSans-Regular.woff"
    }],
    "audios": [{
        "id": "koHdKrP2Oo",
        "src": "https://upload.wikimedia.org/wikipedia/commons/2/28/Caldhu.wav",
        "duration": 719.819,
        "startTime": 0,
        "endTime": 1,
        "volume": 1,
        "delay": 0
    }],
    "unit": "px",
    "dpi": 72
    "pages": [
        {
            "id": "_fLCHAVv_H",
            "children": [
                {
                    "id": "OhnOoL82bU",
                    "type": "image",
                    "name": "",
                    "opacity": 1,
                    "visible": true,
                    "selectable": true,
                    "removable": true,
                    "alwaysOnTop": false,
                    "showInExport": true,
                    "x": 0,
                    "y": 0,
                    "width": 1080,
                    "height": 1080,
                    "rotation": 0,
                    "animations": [],
                    "blurEnabled": false,
                    "blurRadius": 10,
                    "brightnessEnabled": false,
                    "brightness": 0,
                    "sepiaEnabled": false,
                    "grayscaleEnabled": false,
                    "shadowEnabled": false,
                    "shadowBlur": 5,
                    "shadowOffsetX": 0,
                    "shadowOffsetY": 0,
                    "shadowColor": "black",
                    "shadowOpacity": 1,
                    "draggable": true,
                    "resizable": true,
                    "contentEditable": true,
                    "styleEditable": true,
                    "src": "https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3wxMTY5OTZ8MHwxfHNlYXJjaHwxfHxjYXR8ZW58MHx8fHwxNzEzODI2NjcxfDA&ixlib=rb-4.0.3&q=80&w=1080",
                    "cropX": 0,
                    "cropY": 0,
                    "cropWidth": 1,
                    "cropHeight": 1,
                    "cornerRadius": 0,
                    "flipX": false,
                    "flipY": false,
                    "clipSrc": "",
                    "borderColor": "black",
                    "borderSize": 0,
                    "keepRatio": false
                },
                {
                    "id": "ewDG8DLNSz",
                    "type": "text",
                    "name": "",
                    "opacity": 1,
                    "visible": true,
                    "selectable": true,
                    "removable": true,
                    "alwaysOnTop": false,
                    "showInExport": true,
                    "x": 270,
                    "y": 502,
                    "width": 540,
                    "height": 93,
                    "rotation": 0,
                    "animations": [],
                    "blurEnabled": false,
                    "blurRadius": 10,
                    "brightnessEnabled": false,
                    "brightness": 0,
                    "sepiaEnabled": false,
                    "grayscaleEnabled": false,
                    "shadowEnabled": false,
                    "shadowBlur": 5,
                    "shadowOffsetX": 0,
                    "shadowOffsetY": 0,
                    "shadowColor": "black",
                    "shadowOpacity": 1,
                    "draggable": true,
                    "resizable": true,
                    "contentEditable": true,
                    "styleEditable": true,
                    "text": "Header",
                    "placeholder": "",
                    "fontSize": 76,
                    "fontFamily": "Roboto",
                    "fontStyle": "normal",
                    "fontWeight": "normal",
                    "textDecoration": "",
                    "fill": "black",
                    "align": "center",
                    "verticalAlign": "top",
                    "strokeWidth": 0,
                    "stroke": "black",
                    "lineHeight": 1.2,
                    "letterSpacing": 0,
                    "backgroundEnabled": false,
                    "backgroundColor": "#7ED321",
                    "backgroundOpacity": 1,
                    "backgroundCornerRadius": 0.5,
                    "backgroundPadding": 0.5
                }
            ],
            "width": "auto",
            "height": "auto",
            "background": "white",
            "bleed": 0,
            "duration": 5000
        }
    ],
}

So we have a root object with properties

width - number in css pixels
height - number in css pixels
fonts - array of fonts
audios - array of audios
pages- array of pages
unit - 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:

{
  "fontFamily": "Public Sans",
  "url": "https://fonts.cdnfonts.com/s/19244/PublicSans-Regular.woff"
}

Also it can have a form like this:

{
  fontFamily: 'MyCustomFont',
  styles: [
    {
      src: 'url(pathToNormalFile.ttf)',
      fontStyle: 'normal',
      fontWeight: 'normal',
    },
    {
      src: 'url(pathToBoldFile.ttf)',
      fontStyle: 'normal',
      fontWeight: 'bold',
    },
  ],
}

Audios

Example of audio object

{
        "id": "koHdKrP2Oo",
        "src": "https://upload.wikimedia.org/wikipedia/commons/2/28/Caldhu.wav",
        "duration": 719.819,
        "startTime": 0,
        "endTime": 1,
        "volume": 1,
        "delay": 0
}

id - unique ID of audio. Must be a string.
src - public path to a file
duration - total duration of file defined in src. 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 timeline
startTime - 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 to startTime it will define when to finish playing the audio relative to the timeline of the audio file

News, updates and promos – be the first to get 'em

Subscribe now

How people find us:

Graphic design API

White label graphic design software

White label image editor

Video editing API

JS image editor

React image editor

Embedded image editor

Creative editor SDK

Canvas editor

White label video editor

Scheme of JSON

Fonts

Audios

Pages

News, updates and promos – be the first to get 'em

News, updates and promos – be the first to get 'em