Skip to main content

Polotno Editor configuration

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 objectconsole.log(getTranslations());

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

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.

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 APIasync 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 functionsetUploadFunc(upload);

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 namessetGoogleFonts(['Roboto']);// pass empty array if you don't want to see google fonts in available fontssetGoogleFonts([]);

(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 URLaddGlobalFont({  fontFamily: 'MyCustomFont',  url: url,});
// more control over fontsaddGlobalFont({  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.devconst 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')} />;