Step 02

Download Step 2 Download the entire code

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

Taipy uses different ways to create pages: Markdown, HTML or Python code. You can choose which you want to learn in the code snippets below.

Taipy uses the visual element concept to bring interactivity to the application. 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 complete list here.

Every visual element follows a similar syntax:

<|{variable}|visual_element_name|param_1=param_1|param_2=param_2| ... |>
tgb.visual_element_name("{variable}", param_1=param_1, param_2=param_2, ...)

The inclusion of variable within "{...}" tells Taipy to show and use the real-time value of variable. Rather than re-executing the entire script, Taipy intelligently adjusts only the necessary elements of the GUI to reflect changes, ensuring a responsive and performance-optimized user experience.

For example, a slider is written this way :

<|{variable}|slider|min=min_value|max=max_value|>
tgb.slider("{variable}", min=min_value, max=max_value, ...)

For example, at the beginning of the page, if you want to display:

  • a Python variable text

  • an input that "visually" modifies the value of text.

Here is the overall syntax:

<|{text}|>
<|{text}|input|>
tgb.text("{text}")
tgb.input("{text}")

Here is the combined code:

from taipy.gui import Gui

if __name__ == "__main__":
    text = "Original text"

    page = """
    # Getting started with Taipy GUI

    My text: <|{text}|>

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

    Gui(page).run(debug=True)
from taipy.gui import Gui
import taipy.gui.builder as tgb

if __name__ == "__main__":
    text = "Original text"

    with tgb.Page() as page:
        tgb.text("# Getting started with Taipy GUI", mode="md")
        tgb.text("My text: {text}")

        tgb.input("{text}")

    Gui(page).run(debug=True)

Visual Elements