Tutorial: Web app

In this tutorial, you will learn how to use Solara to create a tiny web app using only Python.

You should know

This tutorial will assume you have successfully installed Solara.

If not, please follow the Installation guide.

Generate a script file

The simplest way to get started is to run the command

$ solara create button
Wrote:  /Users/maartenbreddels/github/widgetti/solara/sol.py
Run as:
         $ solara run /Users/maartenbreddels/github/widgetti/solara/sol.py

This will create the sol.py file with the following content.

import solara

clicks = solara.reactive(0)


@solara.component
def Page():
    color = "green"
    if clicks.value >= 5:
        color = "red"

    def increment():
        clicks.value += 1
        print("clicks", clicks)

    solara.Button(label=f"Clicked: {clicks}", on_click=increment, color=color)

Live output

Run the script

Using Solara server, we can now run our Python script using:

$ solara run sol.py
Solara server is starting at http://localhost:8765

If you open the URL in your browser (or click here), you should see the same example as above.

Solara will run your script once, and will look for the Page component. Solara expects this component to exist and be a Reacton component. (See the IPywidget tutorial to learn how to render a regular ipywidget).

Since your script is only run once, you could put in the main body of your script code that only needs to run once (e.g. loading data from disk)

Every browser/user that connects will get an independent version of the state (in this case the number of clicks), so you do not share the number of clicks with other people.

Modify the script

Lets modify the script a little bit, possibly in this way:

-    solara.Button(label=f"Clicked: {clicks}", on_click=increment, color=color)
+    label = "Not clicked yet" if clicks.value == 0 else f"Clicked: {clicks}"
+    solara.Button(label=label, on_click=increment, color=color)

If we save the script, Solara will automatically reload your script and update your browser (we call this feature hot reloading).

Note that Solara will remember your state (e.g., the number of buttons clicked) when the app reloads.

(Note: Upgrade to solara 1.14.0 for a fix in hot reloading using pip install "solara>=1.14.0")