> For the complete documentation index, see [llms.txt](https://docs.aitheon.com/creators-studio/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.aitheon.com/creators-studio/new-component-creation-tutorial/component.ht/help-text.md).

# Help Text

When a user selects a component help information appears in the Apps Editor help tab. 

It should contain concise info about what the component does, what properties of input and output messages are available to set up.

![](https://lh3.googleusercontent.com/7vNXIcAvLAQfCMLW9aaQMOV1thOIs5sJNuoLXU6eXDaluYDQ3wqFJ8Vg0n6G_9H-vdUpySr_Odo-ZfuR-DwG9XQysNH7KJkhmr9Kt0O8HJiLRG7JhSvvqxGjOvwSviHCFhmAKXaC)

## Structure

The information in the **help** tab should be structured and formatted for convenient use.

![](https://lh3.googleusercontent.com/8a0ttmMlARpfNV1VppNqCgl7sOdFKXT81KvDXxHhXYEayKZnhMfzwGDfxwgoOWvRf3X2M6NlK08yvZU-rwSbDJo5NXhUS2IHOQcvgh5vh6hoIADOjmMIqCC4t2gJyzp8zTqTD_Oe)

The first **(1)** section is for general component description. It should be no more than 2 or 3 **`<p>`** tags long. The first **`<p>`** will pop up as a tooltip when a user hovers over the component in the palette.

If a component has input, in the **(2)** section should be a description of its\` properties and their expected types. Keep it short, if more information is needed - put it in the **Details**.

If the component has an output put the information about its\` properties in the third **(3)** section. It can be multiple outputs\` descriptions if needed.

The showed instance was made by this part of the HTML file:

![](https://lh4.googleusercontent.com/lj6HaUMfno1D0tGnr8ROFuA0zKtS-MdhSgzWW3u-le-GWMpS5RI4xcysmlvFkUiOTWO1Qk8km88tGgGChtaVXIKcXHrtXsExua5pHDTzSAZeqly9e2UFqim4re2ZK-MonSWWps1K)

You can add details and references if needed:

![](https://lh5.googleusercontent.com/vESPXjNHU_g5YEEUiIWV03_vYoGT0i9to5PHwtUUmHzQsaGJ_KPSVxFn5-poWeRLvrNev0g-vpz0vhNUEpYlr2zFTzd4vjXv_PkmNgYsxSc3vovEGe8zQckS-LisdbrYd9UAaT3c)

The **Details** section **(4)** provides more specific information about inputs and outputs and everything a user needs to know and that can be contained in this short form.

If much larger explanations are needed, place links to them in the **References** section **(5)**.

The part of HTML used for this:

![](https://lh5.googleusercontent.com/z6SjjidoYhpPyOxaOMYp2Oc2jDn74F0QRnVpTaKAReLDG8yBb2EKSHm1nbbwS3gMy6uBvExnN3-6hNRSWcomfow2WpI1lV0eGBek0EfEtyMbVFgkRSCKhmzvY-leQZVsV9F_use2)

## Section Headers

Use **`<h3>`** header marks for each section and **`<h4>`** for subsections.

![](https://lh6.googleusercontent.com/J1CTr6NZrGV7fXwn_KcFMU2tXTQVrxrIpP7EcsUro3Hjqixex7gv6Ed_xLWAsyKaQwxCPMfCeXDLHwPIFWXAnPEip6BXcEm4yaWR-ZdLo2R4hrs1Wu88hb2UnxgSc9DBcL3inG3R)

## Message Properties

The **`<dl>`** list of properties must have the **`message-properties`** class attribute. Each property in the list must consist of the **`<dt>`** and **`<dd>`** tag pairs.

Each **`<dt>`** must contain the property name and, optionally, **`<span class="property-type">`** with the expected type of the property. If the property is optional, it should have the **`optional`** class attribute.

Each **`<dd>`** is a description of the property.

![](https://lh4.googleusercontent.com/-sbfTXgT-eRaZ0KARKn2e2qcqwt496QIiQYwkoUIZX8RsSDuwz-w9k0yPUJo8WmEkry1tk8KgDMBjhwlXeoB95I95NAI9Q7ngmCfCES22XeCXIPQR1CK4KJfwhTZV47L87sQNpEX)

If you describe a property outside the list of properties (in **Details**, for example), make sure you prefixed it with **msg.** and wrapped it in **`<code>`** tags.

![](https://lh4.googleusercontent.com/u98AbH4IfR7lZ1yr1Du1_xavaeMfaCInaDcogNWTm9N0yeRBtKSMH08ZX6R5FLeWrsCG_PDeVogVgLqJJQOvr_84f4mBVxB2DHQ5c5ptHgE2DoOHOy3ffoo9VjGNJKDCreP-jV-X)

## Multiple Outputs

For a single output, it’s enough of the **`<dl>`** list.

But multiple outputs will consist of **`<ol>`** list of **`<dl>`** lists. The **`<ol>`** list must have the **`node-ports`** class attribute.

Each output (aka **`<dl>`** list) must be wrapped in **`<li>`** tags with its short description.&#x20;

![](https://lh6.googleusercontent.com/u597Wmqxo2Z6GQ3P3F4GpASPNF_NSAiNKFCqCQUPKBbTv8wH0F1KWig6K7iELCxHaJfyxjAGcZZGHp78GRm5QQuqyQqd0d0ayGo-VUl2yrtLtCrmk04IqNqWl3hRb2oGY17zqZcZ)

## General Approach

No other styling tags (e.g. **`<b>`**,**`<i>`**) should be used within the help text.

The help text should be useful for a non-experienced user. Remember that Apps Editor is made for codeless experience in the first place.