Skip to main content

Editor configuration

How to enable dark theme?โ€‹

Thanks to https://blueprintjs.com/, Polotno has full support for the dark theme. To enable it, you just need to add bp4-dark class to any editor container.

<body class="bp4-dark">
<div id="container"></div>
</body>

How to change image upload behavior?โ€‹

The default SidePanel Component has Upload tab to import local images into the project. By default polotno just converting local file into base64 string. Resulted URL strings are using for image elements. Using base64 string may produce projects with a large size, since images will be fully encoded inside JSON.

It is very recommended to upload images into your server! It will make JSON much smaller and easier to read. Also it will improve the performance of the editor a lot!

If you want to upload local images to your server you can do this:

import { setUploadFunc } from 'polotno/config';

// define our upload function
// you have to write your own logic, that fits your API
async function upload(localFile) {
const formData = new FormData();
formData.append('files[]', localFile);
const res = await fetch(yourServerURL, {
method: 'POST',
body: formData,
});
const json = await res.json();
const { url } = json;
// return simple and short url
return url;
}

// set new function
setUploadFunc(upload);

How to translate UI?โ€‹

If you want to translate UI into a different language or change some labels you can use this:

import { setTranslations } from 'polotno/config';
setTranslations({
sidePanel: {
text: 'ะขะตะบัั‚',
myFonts: 'ะœะพะธ ัˆั€ะธั„ั‚ั‹',
},
});

If you need to know full scheme of translation object you can use:

import { getTranslations } from 'polotno/config';

// log full translations object
console.log(getTranslations());

If you are working on a translation for any language or just changing default labels, please share your results with anton@polotno.com or on discord. It will help to make better defaults for UI and to make ready-to-use translations. Thanks.

How to change available fonts?โ€‹

There are three types of fonts in Polotno:

  1. Google fonts
  2. User fonts defined in store.fonts
  3. Global fonts

(1) Google fonts usageโ€‹

In the default text toolbar, Polotno is using a very large list of google fonts. If you don't want to enable the full list or if you want to disable it you can use this:

import { setGoogleFonts } from 'polotno/config';
// pass an array with google fonts names
setGoogleFonts(['Roboto']);
// pass empty array if you don't want to see google fonts in available fonts
setGoogleFonts([]);

(2) User fontsโ€‹

If you want to add/remove fonts specific for the user you can use Store Fonts API.

Fonts added into store directly will be included into JSON export via store.toJSON().

A user can add/remove fonts from the default "Text" side-panel inside "fonts" tab.

(3) Global fontsโ€‹

If you want to add fonts that you want to enable for all users you can use global API. Fonts added via global API will be NOT added into JSON export.

import { addGlobalFont } from 'polotno/config';

// add font by its URL
addGlobalFont({
fontFamily: 'MyCustomFont',
url: url,
});

// more control over fonts
addGlobalFont({
fontFamily: 'MyCustomFont',
styles: [
{
src: 'url(pathToNormalFile.ttf)',
fontStyle: 'normal',
fontWeight: 'normal',
},
{
src: 'url(pathToBoldFile.ttf)',
fontStyle: 'normal',
fontWeight: 'bold',
},
],
});

// if a font is already added into the page by some CSS
// you can register it inside polotno
// so it can be listed in available fonts in the toolbar

addGlobalFont({
fontFamily: 'MyCustomFont',
});

Hot to get API endpoints to get a list of available google fonts?โ€‹

import { getGoogleFontsListAPI, getGoogleFontImage } from 'polotno/config';

// returns an URL to api.polotno.com
const url = getGoogleFontsListAPI();
// when you fetch the list you can show preview of every font in the list
// to get image path you can use this:
<img src={getGoogleFontImage('Roboto')} />;