Skip to main content

Text Design

The Text Design Tool merges input text with typography, creating stunning designs for a multitude of use-cases.

Text Design tool

The text design tool merges input text with typography, creating stunning designs for a multitude of use-cases. The tool lays out input text according to recipes crafted by professional designers upon a single tap. Furthermore, the creative can then be fine-tuned by choosing from 15 different text colors or by using the randomize functionality that shuffles the fonts, alignments and decorations. It’s even possible to create a mask that lets the background image shine through.

Specifying the available text design#

This example shows the default text design tool configuration. In order to enable or disable specific text design layouts, simply pass the items option to the text design tool configuration. The items will be displayed in the order mentioned by the configuration. Here is the list of default text design items.

JavaScript
const editor = await PhotoEditorSDKUI.init({
textdesign: {
items: [
{ identifier: 'imgly_text_design_blocks' },
{ identifier: 'imgly_text_design_rotated' },
{ identifier: 'imgly_text_design_blocks_light' },
{ identifier: 'imgly_text_design_equal_width' },
{ identifier: 'imgly_text_design_masked' },
{ identifier: 'imgly_text_design_celebrate' },
{ identifier: 'imgly_text_design_sunshine' },
{ identifier: 'imgly_text_design_masked_badge' },
{ identifier: 'imgly_text_design_blocks_condensed' },
{ identifier: 'imgly_text_design_celebrate_simple' },
{ identifier: 'imgly_text_design_equal_width_fat' },
{ identifier: 'imgly_text_design_watercolor' },
{ identifier: 'imgly_text_design_particles' },
{ identifier: 'imgly_text_design_masked_speech_bubble' },
{ identifier: 'imgly_text_design_masked_speech_bubble_comic' },
{ identifier: 'imgly_text_design_multiline' },
],
},
});

Specific text options#

Maximum Character Limit#

With maxCharacterLimit, you can limit the amount of text which can be entered in the text design tool.

JavaScript
const editor = await PhotoEditorSDKUI.init({
textdesign: {
maxCharacterLimit: 250, // number
},
});

Custom Default Color#

You can override the defalt color used in textdesign tool using the defaultColor option

JavaScript
await PhotoEditorSDKUI.init({
...,
textdesign: {
// color is represented as a number array which encodes
// as a RGBA tuple of floating point values where
// each channel is defined in the range of `[0, 1]
defaultColor: [1.00, 1.00, 1.00, 1],
},
...,
})

Custom Colors#

You can override all the colors used in textdesign tool using the colors array

JavaScript
await PhotoEditorSDKUI.init({
...,
textdesign: {
colors: [
{
// color is represented as a number array which encodes
// as a RGBA tuple of floating point values where
// each channel is defined in the range of `[0, 1]
color: [1.00, 1.00, 1.00, 1],
// name must be unique
name: "white",
},
{ color: [0.49, 0.49, 0.49, 1], name: "gray" },
{ color: [0.00, 0.00, 0.00, 1], name: "black" },
{ color: [0.40, 0.80, 1.00, 1], name: "light blue" },
{ color: [0.40, 0.53, 1.00, 1], name: "blue" },
{ color: [0.53, 0.40, 1.00, 1], name: "purple" },
{ color: [0.87, 0.40, 1.00, 1], name: "orchid" },
{ color: [1.00, 0.40, 0.80, 1], name: "pink" },
{ color: [0.90, 0.31, 0.31, 1], name: "red" },
{ color: [0.95, 0.53, 0.33, 1], name: "orange" },
{ color: [1.00, 0.80, 0.40, 1], name: "gold" },
{ color: [1.00, 0.97, 0.39, 1], name: "yellow" },
{ color: [0.80, 1.00, 0.40, 1], name: "olive" },
{ color: [0.33, 1.00, 0.53, 1], name: "green" },
{ color: [0.33, 1.00, 0.92, 1], name: "aquamarin" },
]
},
...,
})

Prevent default text#

The textdesign tool will automatically add a default text design to the canvas if it is opened. This option lets you disable this behavior.

JavaScript
await PhotoEditorSDKUI.init({
textdesign: {
addDefaultTextOnEnter: false;
},
})

Toolbar Customization#

This option allows you to reorder or remove items from the ToolControlBar in the AdvancedUI.

You can find more information on this option in our Toolbar Customization section.

Typescript
const editor = await PhotoEditorSDKUI.init({
textdesign: {
advancedUIToolControlBarOrder: [
AdvancedTextDesignControlBarItem.NewTextDesignButton,
AdvancedTextDesignControlBarItem.ShuffleLayoutButton,
AdvancedTextDesignControlBarItem.TextDesignColorList,
AdvancedTextDesignControlBarItem.Separator,
AdvancedTextDesignControlBarItem.Items,
],
},
});
JavaScript
const editor = await PhotoEditorSDKUI.init({
textdesign: {
advancedUIToolControlBarOrder: [
'newTextDesignButton',
'shuffleLayoutButton',
'textDesignColorList',
'separator',
'items',
],
},
});

Localization#

You can override all the labels used in text design tool using the custom.languages object in configuration, below are the default text design localization lables.

JavaScript
await PhotoEditorSDKUI.init({
// ...,
custom: {
languages: {
en: {
// ...,
textdesign: {
title: 'Text Design',
controls: {
buttonNew: 'New Text Design',
buttonShuffle: 'Shuffle Text Design',
selectColor: 'Text Color',
tabColor: 'Color',
tabShuffle: 'Shuffle',
},
canvasControls: {
placeholderText: 'Write Something',
buttonSave: 'Done',
buttonClose: 'Schließen',
inputText: 'Text Input',
},
canvasActions: {
buttonEdit: 'Edit',
buttonInvert: 'Text as Mask',
buttonDelete: 'Delete',
buttonBringToFront: 'Move to top',
buttonDuplicate: 'Duplicate',
},
history: {
add: 'Text design',
edit: 'Text design edit',
resize: 'Text design resize',
position: 'Text design position',
color: 'Text design color',
shuffle: 'Text design shuffle',
invert: 'Text design invert',
padding: 'Text design padding',
order: 'Text design order',
delete: 'Text design delete',
},
},
},
},
},
});