2 - Visual elements

You can download the code for Step 2 or all the steps here.

For Notebooks

The Notebook is available here. In Taipy GUI, the process to execute a Jupyter Notebook is different from executing a Python Script.

Step 2: Visual elements

You can incorporate various visual elements into the basic code demonstrated in Step 1. In this step, we will illustrate how to utilize visual elements such as charts, sliders, tables, and more within the graphical interface.

Visual elements

When using the Mardown syntax, Taipy augments it with the concept of visual elements. A visual element is a Taipy graphical object displayed on the client. It can be a slider, a chart, a table, an input, a menu, etc. Check the list here.

Every visual element follows a similar syntax:

<|{variable}|visual_element_name|param_1=param_1|param_2=param_2| ... |>.

For example, a slider is written this way :

<|{variable}|slider|min=min_value|max=max_value|>.

To include each visual element you want in your web page, you should incorporate the syntax mentioned above within your markdown string, which represents your page. For example, at the beginning of the page, if you want to display:

• a Python variable text

• an input that will "visually" modify the value of text.

Here is the overall syntax:

<|{text}|>
<|{text}|input|>

Here is the combined code:

from taipy.gui import Gui

text = "Original text"

page = """
# Getting started with Taipy GUI

My text: <|{text}|>

<|{text}|input|>
"""

Gui(page).run()