Skip to main content

Custom UI

@pdfme/ui allows customization of themes and labels through options.
This page explains how to customize these elements.

Sample code uses the Designer, but Form and Viewer can be customized in the same way.

UI Theme​

pdfme internally uses Ant Design. You can apply the Ant Design theme to the pdfme UI.

Refer to Ant Design's documentation for how to customize the theme.
For the API reference, see here.

new Designer({
  domContainer,
  template,
  options: {
    theme: {
      token: {
        colorPrimary: 'red',
      },
    },
  },
});

UI Language and Labels​

note

The label customization feature is not yet implemented. Custom Label for UI #107

To change the language, modify lang in options. (The default for lang is en.) Currently, only 'en', 'ja', 'ar', 'th', 'pl', 'it' are supported. To support additional languages, create an issue or send a pull request.

To use custom labels instead of the provided ones, change labels in options. For supported labels, refer to this i18n.ts.

pdfme first loads lang from options, then reads and overrides from options' labels.

new Designer({
  domContainer,
  template,
  options: {
    lang: 'ja',
    labels: {
      fieldsList: '入力項目一覧ビュー', // override the label for the edit button
      youCanCreateYourOwnLabel: '独自のラベルを作成できます', // add a new label for the custom plugin
    },
  },
});

Create your own labels and use the i18n function from the plugin to retrieve the labels. Please refer to the implementation of the Signature plugin in the Playground code.