Docs
API Docs

Text Design

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.

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.

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

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.

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",
          },
        },
      },
    },
  },
});

Custom Colors

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

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" },
    ]
  },
  ...,
})