Skip to content

Property Editors

Every tool property is assigned a property editor which is a UI control used by the user to modify the property value.

Built-In Editors

Following is a list of built-in property editors available and their value formats.


Text Input

Text Property Editor

Default Value

String

HTML Input

HTML Property Editor

Default Value

String

Color Picker

Color Property Editor

Default Value

String

Valid Values

  • HEX Format #FFF000
  • RGB Format rgba(0,0,0,0.5)

Text Alignment

Alignment Property Editor

Default Value

String

Valid Values

  • left
  • center
  • right

Border

Border Property Editor

Default Value

JSON

Valid Value

{
  borderTopWidth: "0px",
  borderTopStyle: "solid",
  borderTopColor: "#CCC",
  borderLeftWidth: "0px",
  borderLeftStyle: "solid",
  borderLeftColor: "#CCC",
  borderRightWidth: "0px",
  borderRightStyle: "solid",
  borderRightColor: "#CCC",
  borderBottomWidth: "0px",
  borderBottomStyle: "solid",
  borderBottomColor: "#CCC"
}

Counter

Counter Property Editor

Default Value

String

Example Values 10 25 50 etc


Image Uploader

Image Property Editor

Default Value

JSON

Valid Value

{
  url: "http://via.placeholder.com/350x150"
}

Toggle

Toggle Property Editor

Default Value

Boolean

Valid Values

  • true
  • false

Link Property Editor

Default Value

JSON

Valid Values

{
  url: "http://google.com",
  target: "_blank"
}

Link Property Editor

The dropdown editor needs options to be passed as data. Click the following link to learn how to pass the options.

Passing Data to Property Editors


Custom Editor

If you're looking for some other type of property editor or something more advanced, please contact us and we'll be happy to work with you on that.


Passing Data to Editors

Some property editors need data from your application. For example, the dropdown editor needs a list of options to be passed to it. You can pass this data during the initialization.

Dropdown Example

Let's say your custom tool has a property that needs to use the dropdown property editor. You can use the following example to pass options to the dropdown property editor.

Replace SLUG with your tool's slug and PROPERTY-NAME with the property's name. For example, if your tool's slug is video and property name is url, you will use custom#video as the slug and url as the property name.

unlayer.init({
  ...
  tools: {
    'custom#SLUG': {
      properties: {
        PROPERTY-NAME: {
          editor: {
            data: {
              options: [
                {label: "Option 1", value: "option1"},
                {label: "Option 2", value: "option2"},
                {label: "Option 3", value: "option3"}
              ]
            }
          }  
        }
      }
    }
  }
});