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

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 image

  • children - array of shapes and groups

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

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