# Text Property Editor

## Overview

The Text Property Editor in Servoy is a versatile tool used across multiple components to customize text properties. This editor allows developers to set plain text, i18n (internationalization) keys, and HTML markup for various properties like tab titles, tooltips, column headers, and more. The Text Property Editor is accessible through components such as [Accordion Panel](/guides/develop/application-design/forms/form-containers/accordion-panel.md#customize-the-tabs), [TabPanel](/guides/develop/application-design/forms/form-containers/tab-panel.md#customizing-the-tabs), [TextBoxGroup](/guides/develop/application-design/ui-components/input-controls/textboxgroup.md#setting-the-placeholdertext), [Label](/guides/develop/application-design/ui-components/buttons-and-text/label.md#setting-a-tooltip-message), [Data Label](/guides/develop/application-design/ui-components/buttons-and-text/data-label.md#setting-a-tooltip-message), [Data Grid](/guides/develop/application-design/ui-components/grids/data-grid_new.md#setting-column-header), [Power Grid](/guides/develop/application-design/ui-components/grids/power-grid.md#setting-column-header) and [Table](/guides/develop/application-design/ui-components/grids/table.md#setting-column-header).

## How to Use the Text Property Editor

The **Text Property Editor** consists of three tabs: **Text**, **i18n**, and **HTML Preview**.

### Text Tab:

<figure><img src="/files/7tIE4XxpsdQq4YlYEHYd" alt=""><figcaption><p>Tab text - plain text</p></figcaption></figure>

Allows you to enter plain text or use tags to include dynamic content from data providers like table columns, form variables, and scope variables. ***Example:*** Entering *Product details* will display this static text.

### i18n Tab:

<figure><img src="/files/aYg23C6qWVLtjout3OW8" alt=""><figcaption><p>I18N tab - Text tab</p></figcaption></figure>

Enables the selection of internationalization keys for locale-specific text. You can filter and choose the appropriate i18n key that corresponds to the desired text. ***Example:*** Selecting the key i18n:products will display the localized value for *products*.

### HTML Preview Tab:

<figure><img src="/files/isX8CIZ9ob8MJWTkq2SV" alt=""><figcaption><p>HTML Preview tab</p></figcaption></figure>

Allows you to enter and preview HTML markup to customize the display of text. Useful for incorporating HTML elements such as spans, divs, and other tags to format the text. ***Example:*** Entering *Product details* will display the text with the specified HTML styling.

## Steps to Use the Text Property Editor

### Accessing the Editor:

Double-click the text property field of the component you want to edit, or select the property and click the button to open the Text Property Editor.

### Editing Text:

In the Text Tab, enter plain text or dynamic tags as needed. This can include direct text input or placeholders for dynamic content from your application's data providers.

### Using i18n Keys:

Switch to the i18n Tab to select internationalization keys. Use the filter to find the desired key and select it to apply locale-specific text to your component.

### Adding HTML Markup:

Use the HTML Preview Tab to enter and preview HTML markup. This is useful for applying custom styling or adding HTML elements to format the text. Ensure the HTML is valid and correctly formatted for the desired output. Saving Changes:

Once you have finished editing, click **OK** to save your changes and apply them to the component.

By following these steps, you can effectively use the Text Property Editor to customize and enhance the text properties of various components in your Servoy applications.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoy-developer/object-editors/text-property-editor.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.