Skip to main content

Internationalization (I18n)

The Sequential Workflow Designer supports internationalization (i18n). This allows you to translate the user interface into different languages.

The designer doesn't provide built-in translations, but you can easily add your own translations. To do this, you need to create a function that returns the translation for a given key. The function accepts two arguments: the key and the default value. The default value is a default english translation. If you don't provide a translation for a key, the default value should be returned.

const DICTIONARY = {
'controlBar.resetView': 'Reestablecer vista',
'controlBar.zoomIn': 'Reestablecer vista',
'controlBar.zoomOut': 'Disminuir el zoom',
'controlBar.turnOnOffDragAndDrop': 'Activar/desactivar arrastrar y soltar',
'controlBar.deleteSelectedStep': 'Eliminar paso seleccionado',
'controlBar.undo': 'Deshacer',
'controlBar.redo': 'Rehacer',
'smartEditor.toggle': 'Alternar editor',
'toolbox.title': 'Caja de herramientas',
'': 'Buscar',
'': 'Seleccionar',
'contextMenu.unselect': 'Deseleccionar',
'contextMenu.delete': 'Eliminar',
'contextMenu.resetView': 'Reestablecer vista',
'contextMenu.duplicate': 'Duplicar',

function i18n(key: string, defaultValue: string): string {
return DICTIONARY[key] || defaultValue;

Next, you need to pass the i18n function to the designer configuration.

const configuration = {
// ...