solara-ui 1.45.0__py3-none-any.whl

solara/website/pages/documentation/getting_started/content/02-installing.md

@@ -0,0 +1,134 @@
+---
+title: Installing Solara
+description: Installation should be as easy as running pip install Solara. Read on for advanced setups.
+---
+# Installation
+
+## Create a virtual environment
+
+It is best to install Solara into a virtual environment unless you know what you are doing (you already have a virtual environment, or you are using conda or docker).
+
+See also [The Python Packaging User Guide](https://packaging.python.org/en/latest/guides/installing-using-pip-and-virtual-environments/#creating-a-virtual-environment) for more information about virtual environments.
+
+
+### OSX/Unix/Linux
+
+Setting up a virtual environment on OSX/Unix/Linux:
+
+    $ python -m venv solara-env
+    $ source ./solara-env/bin/activate
+
+### Windows
+
+Setting up a virtual environment on Windows:
+
+    > py -m venv solara-env
+    > solara-env\Scripts\activate
+
+
+## Install Solara as a user
+
+Now install Solara using pip:
+
+    $ pip install solara
+
+## Bleeding edge
+
+If you want to install an unreleased version of Solara (e.g. because we just merged a feature you need)
+
+
+```
+$ pip install "solara @ git+https://github.com/widgetti/solara"
+```
+
+Or put the following in your `requirements.txt`:
+
+```
+solara @ https://github.com/widgetti/solara/package/archive/master.tar.gz
+
+```
+
+If you want to do development on Solara, read the [development documentation](/documentation/advanced/development/setup).
+
+## Air-gapped installation / Firewalled network
+
+If you want to have Solara running in an air-gapped environment or where access to a CDN is not possible due to firewall rules, you have two options
+
+
+### Pre-install assets
+
+Normally, Solara fetches assets (CSS, JavaScript and fonts) from a CDN on the fly, if that is not possible, you can pre-install the assets by running
+
+```
+$ pip install "solara[assets]"
+```
+
+### Airgapped install
+
+If you cannot install `solara` or `solara-assets` from pypi because the server is not connected to the internet, you can
+follow the following steps to install Solara:
+
+```bash
+# Download the required wheels from pypi.
+$ pip wheel --wheel-dir solara-air-gapped "solara[assets]"
+# Zip them in a tarball.
+$ tar zcfv solara-air-gapped.tar.gz solara-air-gapped
+# Copy the tarball to your server.
+$ scp solara-air-gapped.tar.gz yourusername@youmachine:~/solara-air-gapped.tar.gz
+# ssh into your server.
+$ ssh yourusername@yourmachine
+...
+#  Unzip the tarball.
+$ tar zxfv solara-air-gapped.tar.gz
+# Install all wheels.
+$ pip install solara-air-gapped/*.whl
+```
+
+## Solara subpackages
+
+The `solara` package is a meta package that installs all the necessary dependencies to get started with Solara. By default, we install:
+
+  * [`pip install "solara-ui[all]"`](https://pypi.org/project/solara-ui)
+  * [`pip install "solara-server[starlette,dev]"`](https://pypi.org/project/solara-ui)
+
+Note that the solara (meta) package will pin exact versions of solara-ui and solara-server, which ensures you always get compatible version of the subpackages.
+For more flexibility, and control over what you install, you can install the subpackages directly.
+
+
+### The `solara-ui` package
+
+This package contains only the UI components, hooks and other utilities. This is the only package you need if you want to use Solara in a Jupyter environment. There are optional dependencies giving you
+more control over what you want to install:
+
+ * `pip install "solara-ui"` - Only the UI components, hooks and other utilities.
+ * `pip install "solara-ui[markdown]"` - The above, with support for markdown rendering.
+ * `pip install "solara-ui[cache]"` - The above, with support for [caching](https://solara.dev/docs/reference/caching)
+ * `solara-ui[all]` - Installs all optional dependencies.
+
+### The `solara-server` package
+
+This will let you run solara applications outside a Jupyter server. See [Understanding Solara Server](https://solara.dev/documentation/advanced/understanding/solara-server) for more details about solara server.
+
+For deployments, we recommend ``pip install "solara-server[starlette]"` which will install the starlette backend for solara server. For development, you can install the `dev` extra to get the development dependencies that enabled hot reloading.
+
+The `solara-server` packages supports the following optional dependencies:
+
+ * `pip install "solara-server"` - Only the solara server code with required dependencies, this in general is not a functional server (it needs starlette or flask to run).
+ * `pip install "solara-server[starlette]"` - The solara server with the starlette backend.
+ * `pip install "solara-server[flask]"` - The solara server with the starlette backend and development dependencies.
+ * `pip install "solara-server[dev]"` - The solara server with dependencies for development for enabling hot reloading.
+ * `pip install "solara-server[all]"` - Installs all optional dependencies.
+
+
+
+
+### The `pytest-ipywidgets` package
+
+This package is a plugin for pytest that lets you test ipywidgets with playwright. It is useful for testing your ipywidgets or solara applications in a (headless) browser.
+See [Our testing documentation](https://solara.dev/documentation/advanced/howto/testing) for more information.
+
+ * `pip install "pytest-ipywidgets"` - Minimal installation for testing ipywidgets.
+ * `pip install "pytest-ipywidgets[voila]"` - The above, with a compatible version of voila.
+ * `pip install "pytest-ipywidgets[jupyterlab]"` - The above, with a compatible version of jupyterlab.
+ * `pip install "pytest-ipywidgets[notebook]"` - The above, with a compatible version of notebook.
+ * `pip install "pytest-ipywidgets[all]"` - Installs all optional dependencies.

solara/website/pages/documentation/getting_started/content/04-tutorials/00-overview.md

@@ -0,0 +1,14 @@
+---
+title: Solara Tutorials
+description: A collection of tutorials for those learning to use Solara, each geared towards a users coming from particular backgrounds, such as data science, or
+    users coming from other frameworks like Streamlit.
+---
+# Tutorials
+
+Instead of having one tutorial, we have tutorials for different audiences.
+
+  * [Jupyter Dashboard](/documentation/getting_started/tutorials/jupyter-dashboard-part1): Learn to create a dashboard in the Jupyter notebook.
+  * [Data science](/documentation/getting_started/tutorials/data-science): In this tutorial, we will introduce Solara from the perspective of a data scientist or when you are thinking of using Solara for a data science app.
+  * [Web app](/documentation/getting_started/tutorials/web-app): You are not a data scientist, but you are interested in using Solara to create a web app using Pure Python.
+  * [IPywidgets user](/documentation/getting_started/tutorials/ipywidgets): If you are already using [ipywidgets](/documentation/advanced/understanding/ipywidgets) you will learn how to use the [Solara server](/documentation/advanced/understanding/solara-server) to render your regular ipywidget applications.
+  * [Streamlit](/documentation/getting_started/tutorials/streamlit): If you are an existing Streamlit user, this might appeal more to you.

solara/website/pages/documentation/getting_started/content/04-tutorials/10_data_science.py

@@ -0,0 +1,13 @@
+from pathlib import Path
+
+import solara
+import solara.components.applayout
+from solara.website.components.notebook import Notebook
+
+HERE = Path(__file__).parent
+
+
+@solara.component
+def Page():
+    # only execute once, other
+    Notebook(HERE / "_data_science.ipynb")

solara/website/pages/documentation/getting_started/content/04-tutorials/20-web-app.md

@@ -0,0 +1,89 @@
+---
+title: Tutorial - Building web apps in python using Solara
+description: In this tutorial, you will learn how to use Solara to create a tiny web app using only Python. You can run these apps using either Solara server,
+    Jupyter lab / notebook, or whatever server infrastructure you prefer.
+---
+# 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](/documentation/getting_started/installing).
+
+## Generate a script file
+The simplest way to get started is to run the command
+
+```bash
+$ 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.
+```solara
+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)
+```
+
+
+## Run the script
+
+Using [Solara server](/documentation/advanced/understanding/solara-server), we can now run our Python script using:
+
+```bash
+$ solara run sol.py
+Solara server is starting at http://localhost:8765
+```
+
+If you open the URL in your browser ([or click here](http://localhost:8765)), 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](/documentation/advanced/understanding/reacton) component. (See the [IPywidget tutorial](/documentation/getting_started/tutorials/ipywidgets) 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:
+
+```diff
+-    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](/documentation/advanced/reference/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"`*)
+
+## What you have learned
+
+   * How to create a Python script `sol.py` by running `solara create button`
+   * How to run the script with Solara server by running `solara run sol.py`
+   * Your script is executed once, which is useful for loading data in the main body of your script only once.
+   * Your script should have a component called `Page`.
+   * Every user has its own state (in the above example, the number of clicks)
+   * If you save your script, Solara will automatically re-execute your script, and all attached users will see the changes directly (hot reloading).

solara/website/pages/documentation/getting_started/content/04-tutorials/30-ipywidgets.md

@@ -0,0 +1,124 @@
+---
+title: Tutorial - Building ipywidgets based apps
+description: Ipywidgets can be used together with Solara to build and quickly get to users your data apps or dashboards.
+---
+# Tutorial: IPywidgets
+
+If you are already using [ipywidgets](/documentation/advanced/understanding/ipywidgets) in the notebook, possibly using [Voila](/documentation/advanced/understanding/voila), you might be pleased to know that you
+can also use the [Solara server](/documentation/advanced/understanding/solara-server) to render your regular ipywidget application.
+
+We recommend you learn how to write applications using [Reacton](/documentation/advanced/understanding/reacton). However, if you have already written an application in
+pure [ipywidgets](/documentation/advanced/understanding/ipywidgets), this approach will let you gradually move from pure ipywidgets to Reacton.
+
+## You should know
+This tutorial will assume you have successfully installed Solara.
+
+If not, please follow the [Installation guide](/documentation/getting_started/installing).
+
+## Your first ipywidget based Solara app
+
+Put the following code in a file called `sol-ipywidgets.py`:
+
+```python
+import ipywidgets as widgets
+
+clicks = 0
+
+print("I get run at startup, and for every page request")
+
+def on_click(button):
+    global clicks
+    clicks += 1
+    button.description = f"Clicked {clicks} times"
+
+
+button = widgets.Button(description="Clicked 0 times")
+button.on_click(on_click)
+```
+
+And run the following command in your shell
+```bash
+$ solara run sol-ipywidgets.py:button
+Solara server is starting at http://localhost:8765
+I get run at startup, and for every page request
+...
+# your browser opens http://localhost:8765
+I get run at startup, and for every page request
+...
+```
+
+The Solara server will execute your script once before any browser connects,
+as demonstrated by the `"I get run at startup, and for every page request"` output.
+
+The `:button` part on the command line tells the Solara server the variable name of
+the widget it should render. The default name for a widget variable Solara will look
+for is `page`.
+
+For every page request (for instance, you open a second tab, or do a page refresh)
+you will see the same text printed out in the terminal.
+This tell you that each "tab" gets its own run, and its own namespace, which means
+that the `clicks` variable is not shared between multiple users.
+
+If you refresh the page, the script is executed again, and the `clicks` is set to
+`0` again.
+
+## Hot reloading
+
+If you edit your script, and save it, Solara server will re-execute it for all connected users without you having to manually refresh your browser.
+
+Try making the following code change (remove the first, add the last), and watch your browser page instantly refresh.
+```diff
+- button = widgets.Button(description="Clicked 0 times")
++ button = widgets.Button(description="Did not click yet!")
+```
+
+## Using Solara components
+
+There are a lot of [valuable components in Solara](/documentation/components), but they are written as [Reacton/Solara components](/documentation/advanced/understanding/reacton-basics), not
+classic ipywidgets.
+
+Use the [.widget(...)](/documentation/api/utilities/widget) method on a component to create a widget that can be used in your existing classic ipywidget application.
+
+```python
+
+import ipywidgets as widgets
+
+import solara
+
+clicks = 0
+
+
+def on_click(button):
+    global clicks
+    clicks += 1
+    button.description = f"Clicked {clicks} times"
+
+
+button = widgets.Button(description="Clicked 0 times")
+button.on_click(on_click)
+
+page = widgets.VBox(
+    [
+        button,
+        # using .widget(..) we can create a classic ipywidget from a solara component
+        solara.FileDownload.widget(data="some text data", filename="solara-demo.txt"),
+    ]
+)
+```
+
+Now we can run this app using:
+```
+$ solara run sol-ipywidgets.py
+```
+
+Note that we did not include the `:page` here, since solara will automatically look for that.
+
+## What you have learned
+
+  * [Solara server](/documentation/advanced/understanding/solara-server) can render [ipywidgets](/documentation/advanced/understanding/ipywidgets).
+  * Running `$ solara run filename.py:variablename` tells Solara which script to execute and which variable name from the script to render.
+  * The script is executed:
+    * Once, when the solara server starts.
+    * On each page request.
+    * For each open browser page/tab, when the script is saved (hot reloading).
+  * Using the [.widget(...)](/documentation/api/utilities/widget) method we can start using Solara components in classic ipywidget app.

solara/website/pages/documentation/getting_started/content/04-tutorials/40-streamlit.md

@@ -0,0 +1,146 @@
+---
+title: Using Solara as a more scalable alternative to Streamlit
+description: If you are coming from Streamlit, it should be simple to adapt to using Solara, and take advantage of partial re-execution, state
+    management, and reusable components.
+---
+# Tutorial: Streamlit
+
+If you are coming from [Streamlit](https://streamlit.io/) you may be happy to know Solara does not re-execute your whole script. We execute components (starting with the `Page` component), and only need to re-execute what needs to.
+
+
+## Streamlit example
+Let us start with a typical streamlit example:
+
+```python
+import streamlit as st
+
+with st.sidebar:
+    st.markdown("## My First Solara tutorial ☀️")
+    x = st.slider("x")
+x_squared = x**2
+st.markdown(f"{x} squared = {x_squared}")
+```
+
+## Translated to Solara
+
+We now translate this to the equivalent in Solara. The largest difference is we need to explicitly create (application) state using [`solara.reactive`](/documentation/api/utilities/reactive). By passing the
+reactive variable to the [SliderInt](/documentation/components/input/slider) via `value=x` we set up a two way binding between the component and the reactive variable. The generated text is passed down to the [Markdown](/documentation/components/output/markdown) component.
+
+
+```solara
+import solara
+
+x = solara.reactive(2)
+
+
+@solara.component
+def Page():
+    x_squared = x.value**2
+
+    with solara.Sidebar():
+        solara.Markdown("## My First Solara app ☀️")
+        solara.SliderInt(label="x", value=x)
+    solara.Markdown(f"{x.value} squared = {x_squared}")
+```
+
+### Running this example using Solara server
+
+If you put this script in a file called `sol.py` and run
+```
+$ solara run sol.py
+```
+You will see:
+![app screenshot](https://dxhl76zpt6fap.cloudfront.net/public/docs/app-squared.webp)
+
+Because we do some styling and because the sidebar is already used up, our preview on this page looks slightly different.
+
+[Navigate to /apps/tutorial-streamlit](/apps/tutorial-streamlit) to see this app fullscreen.
+
+
+### Running this example in the notebook
+
+If you add the above code snippet to your notebook, and include `Page()` at the end of your notebook cell, you should see:
+![app screenshot](https://dxhl76zpt6fap.cloudfront.net/public/docs/app-squared-notebook.webp)
+
+Again, slightly different for a different environment.
+
+## Hot reloading
+
+If you are using [Solara server](/documentation/advanced/understanding/solara-server), try editing `sol.py`, and watch the page reload automatically after you save your file. Notebook users can simply edit and re-run.
+
+(*Note: Upgrade to solara 1.14.0 for a fix in hot reloading using `pip install "solara>=1.14.0"`*)
+
+## How are streamlit and Solara different?
+
+### Execution model
+As the introduction says, Solara does not re-execute your whole script after user interactions.
+The main script is executed only once. With Solara you can use your main script to read large dataframes, or do some pre-calculations without the need for [caching](/documentation/advanced/reference/caching).
+
+When a user navigates to a Solara server, the `Page` component (basically a function) will get executed. The `Page` component will call (lazily) new components like [solara.Markdown](/documentation/components/output/markdown) to build up the page. If state changes due to user input, Solara will trigger a cascade of re-excecutions of components which inputs or state changed, but never your whole script, nor every component.
+
+### State
+With Solara (and [Reacton](/documentation/advanced/understanding/reacton)) state does not live in a UI component (like a slider). Application state created with [`solara.reactive`](/documentation/api/utilities/reactive) lives on its own. Connecting the state to the UI component (in this case a slider) is a separate step, done via `value=x` in the above example. In general we recommend organising your components
+similarly as in the example: [First use_state and other hooks, then calculations, at last the UI components](/documentation/advanced/understanding/anatomy).
+
+For complex situations, it is important to separate the state and the UI. Especially when you need the state of a UI component as input of the UI component itself, you can get stuck with streamlit. In Solara this follows naturally.
+
+
+## Creating a reusable component
+
+
+A big advantage of Solara is that you can create reusable components. A single component can be seen as the equivalent of a single streamlit script. However, in that case, we need to modify our component to have its own state, rather than using global application state, for this you can use the [`use_reactive`](/documentation/api/hooks/use_reactive), or [`use_state`](/documentation/api/hooks/use_state) hook.
+Read more about state management in the [state management](/documentation/getting_started/fundamentals/state-management) section.
+
+```solara
+import solara
+
+
+@solara.component
+def Square(name: str):
+    # x = solara.use_reactive(2)  # another possibility
+    x, set_x = solara.use_state(2)
+    y = x**2
+    with solara.Sidebar():
+        solara.SliderInt(label=name, value=x, on_value=set_x)
+    solara.Markdown(f'{name}: {x} squared = {y}')
+
+
+@solara.component
+def Page():
+    Square('a')
+    Square('b')
+```
+
+In this example, each instance of the `Square` component, calls `use_state`, and therefore has its own private
+x variable. Truly reusable UI components!
+
+In streamlit, this is trickier. While this would work:
+
+```python
+import streamlit as st
+
+
+def square(name):
+    with st.sidebar:
+        x = st.slider(name)
+    x_squared = x**2
+    st.markdown(f"{name}: {x} squared = {x_squared}")
+
+square("x")
+square("y")
+```
+
+Changing that "y" to "x" will lead to an error, however. If this is a problem in practice depends on the situation.
+
+### Long running function
+
+In Streamlit, it is normal for your main script to block execution. In Solara, the functions bodies of your components ([called render functions](/documentation/advanced/understanding/anatomy)) should not block. Functions that block, or take a long time to execute, should be executed in a thread, such that rendering can continue. Using threads may sound scary, but using the
+[use_thread](/documentation/api/hooks/use_thread) hook will help a lot.
+
+## What you have learned
+
+ * Solara will not continuously re-execute your script as Streamlit does.
+ * Solara will re-execute components instead, only what needs to.
+ * State in Solara is separate from the UI components, unlike streamlit, where they are strongly linked.
+ * State can be on the application level (global) for simplicity or on the component level (local) for creating reusable components.
+ * Solara should not block the render loop. Long-running functions should be executed in a thread using [use_thread](/documentation/api/hooks/use_thread).

solara/website/pages/documentation/getting_started/content/04-tutorials/50-dash.md

@@ -0,0 +1,144 @@
+---
+title: Using Solara as an alternative to Dash
+description: If you are familiar with Dash, Solara should be easy to adapt to. In Solara the state is managed and stored on the server, and components are declaratively reusable.
+---
+# Tutorial: Dash users
+
+Dash is quite different from Solara. In Dash, state lives in your browser, and via callbacks your app will change from 1 state to another. In Solara, the state lives on the server, and also state transitions happen at the server.
+
+## Dash example
+To see how Dash and Solara are different, let us start with a typical Dash example:
+
+```python
+from dash import Dash, Input, Output, callback, dcc, html
+
+app = Dash(__name__)
+
+app.layout = html.Div(
+    children=[
+        dcc.Dropdown(id="dropdown", options=["red", "green", "blue", "orange"]),
+        dcc.Markdown(id="markdown", children=["## Hello World"]),
+    ]
+)
+
+
+@callback(
+    Output("markdown", "style"),
+    Input("dropdown", "value"),
+)
+def update_markdown_style(color):
+    return {"color": color}
+
+
+if __name__ == "__main__":
+    app.run_server(debug=True)
+```
+
+*This example is inspired on [a dash example](https://dash.plotly.com/all-in-one-components).*
+
+This small app creates a dropdown (what we call Select in Solara), and some markdown text. The dropdown will trigger the callback at the server, which will update the markdown's style, which will cause the color of the text to change.
+
+## Translated to Solara
+
+In Solara, we need to explicitly create application state using [`solara.reactive`](/documentation/api/utilities/reactive). We wire this up with the [Select][/documentation/components/input/select] via `value=color` and pass the color value down to the [Markdown](/documentation/components/output/markdown) component.
+
+```solara
+import solara
+
+color = solara.reactive("red")
+
+
+@solara.component
+def Page():
+    solara.Select(label="Color", values=["red", "green", "blue", "orange"], value=color)
+    solara.Markdown("## Hello World", style={"color": color.value})
+```
+
+Since this component combines two components, we have to put them together in a [container](/documentation/advanced/understanding/containers) component, here implicitly a [Column](/documentation/components/layout/column).
+
+## Making a reusable component
+
+### In dash
+
+Following the [All in one component documentation](https://dash.plotly.com/all-in-one-components), we get:
+
+```python
+import uuid
+
+from dash import MATCH, Dash, Input, Output, State, callback, dcc, html
+
+
+class MarkdownWithColorAIO(html.Div):
+    class ids:
+        dropdown = lambda aio_id: {"component": "MarkdownWithColorAIO", "subcomponent": "dropdown", "aio_id": aio_id}
+        markdown = lambda aio_id: {"component": "MarkdownWithColorAIO", "subcomponent": "markdown", "aio_id": aio_id}
+
+    ids = ids
+
+    def __init__(self, text, colors=None, markdown_props=None, dropdown_props=None, aio_id=None):
+        colors = colors if colors else ["red", "green", "blue", "orange"]
+
+        if aio_id is None:
+            aio_id = str(uuid.uuid4())
+
+        dropdown_props = dropdown_props.copy() if dropdown_props else {}
+        if "options" not in dropdown_props:
+            dropdown_props["options"] = [{"label": i, "value": i} for i in colors]
+        dropdown_props["value"] = dropdown_props["options"][0]["value"]
+
+        markdown_props = markdown_props.copy() if markdown_props else {}
+        if "style" not in markdown_props:
+            markdown_props["style"] = {"color": dropdown_props["value"]}
+        if "children" not in markdown_props:
+            markdown_props["children"] = text
+        super().__init__([dcc.Dropdown(id=self.ids.dropdown(aio_id), **dropdown_props), dcc.Markdown(id=self.ids.markdown(aio_id), **markdown_props)])
+
+    @callback(
+        Output(ids.markdown(MATCH), "style"),
+        Input(ids.dropdown(MATCH), "value"),
+        State(ids.markdown(MATCH), "style"),
+    )
+    def update_markdown_style(color, existing_style):
+        existing_style["color"] = color
+        return existing_style
+
+
+app = Dash(__name__)
+
+app.layout = html.Div(
+    children=[
+        MarkdownWithColorAIO("## Hello World1"),
+        MarkdownWithColorAIO("## Hello World2"),
+    ]
+)
+
+if __name__ == "__main__":
+    app.run_server(debug=True)
+
+```
+
+### In Solara
+
+A big advantage of Solara is that components are reusable by default. However, we need to modify our component to have its own state, rather than using global application state. Creating local component state with [`use_reactive`](/documentation/api/hooks/use_reactive), or [`use_state`](/documentation/api/hooks/use_state) hook. Read more about state management in the [state management](/documentation/getting_started/fundamentals/state-management) section.
+
+We will rename (from `Page` to `MarkdownWithColor`) the component, add local state, and put in the markdown text as an argument.
+
+```solara
+import solara
+
+
+@solara.component
+def MarkdownWithColor(markdown_text : str):
+    # color = solara.use_reactive()  # another possibility
+    color, set_color = solara.use_state("red")  # local state
+    solara.Select(label="Color",values=["red", "green", "blue", "orange"],
+                    value=color, on_value=set_color)
+    solara.Markdown(markdown_text, style={"color": color})
+
+
+@solara.component
+def Page():
+    with solara.Columns():
+        MarkdownWithColor("## Reuse is simple")
+        MarkdownWithColor("## With solara")
+```