Editor configuration
Configure uploads, translations, fonts, and color presets in Polotno
How to change image upload behavior?
The default Side Panel has an Upload tab to import local images into the project. By default, Polotno converts a local file into a Base64 string. These strings are then used by image elements. Using Base64 may produce large project JSON because images are fully encoded inside it.
It is highly recommended to upload images to your server. This will keep JSON smaller, easier to read, and significantly improve the canvas editor performance.
If you want to upload local images to your server, use:
import { setUploadFunc } from 'polotno/config';
// define your upload function (implement your API logic here)
async function upload(localFile: File) {
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 a simple and short URL
return url as string;
}
// set new function
setUploadFunc(upload);Similar to image uploads, you can customize font uploading behavior in the Text panel:
import { setFontUploadFunc } from 'polotno/config';
// define your upload function (implement your API logic here)
async function upload(localFile: File) {
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 a simple and short URL
return url as string;
}
// set new function
setFontUploadFunc(upload);How to translate UI?
If you would like to translate the UI into a different language or change some labels, use:
import { setTranslations } from 'polotno/config';
setTranslations(
{
sidePanel: {
text: 'Текст',
myFonts: 'Мои шрифты',
},
},
{
validate: true, // set to false if you don't need validation
}
);To inspect the full translation schema:
import { getTranslations } from 'polotno/config';
// log full translations object
console.log(getTranslations());You can also use the same translation API to translate your custom components:
import { observer } from 'mobx-react-lite';
import { t } from 'polotno/utils/l10n';
// in your component
const App = observer(() => {
return <div>{t('sidePanel.yourLabel')}</div>; // sidePanel.yourLabel is a key in translations object
});If you are working on a translation for any language or changing default labels, please share your results—it helps us improve defaults and provide ready-to-use translations.
How to configure fonts?
See the dedicated Fonts guide for comprehensive documentation on:
- Google Fonts configuration
- Design fonts (per-design custom fonts stored in JSON)
- Global fonts (app-wide fonts not stored in JSON)
- Font upload customization
Change default preset colors in color picker
By default, the color picker generates preset colors from (1) used colors in the design and (2) default colors. You can override this logic with your own presets:
import { setColorsPresetFunc } from 'polotno/config';
// define your own function
setColorsPresetFunc((store) => {
// return array of colors
return ['#000', '#fff'];
});