Update hello app

README.md

@@ -2,6 +2,6 @@
 
 This is the app you get when you run `streamlit hello`, extracted as its own app.
 
-Edit [Hello.py](./Hello.py) to customize this app to your heart's desire. ❤️
+Edit [streamlit_app.py](./streamlit_app.py) to customize this app to your heart's desire. ❤️
 
 Check it out on [Streamlit Community Cloud](https://st-hello-app.streamlit.app/)

pages/0_Animation_Demo.py → animation_demo.py

@@ -1,4 +1,4 @@
-# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -21,7 +21,6 @@
 
 
 def animation_demo() -> None:
-
     # Interactive Streamlit elements, like these sliders, return their value.
     # This gives you an extremely simple interaction model.
     iterations = st.sidebar.slider("Level of detail", 2, 20, 10, 1)
@@ -58,7 +57,7 @@ def animation_demo() -> None:
             N[M] = i
 
         # Update the image placeholder by calling the image() function on it.
-        image.image(1.0 - (N / N.max()), use_column_width=True)
+        image.image(1.0 - (N / N.max()), use_container_width=True)
 
     # We clear elements by calling empty on them.
     progress_bar.empty()
@@ -67,18 +66,17 @@ def animation_demo() -> None:
     # Streamlit widgets automatically run the script from top to bottom. Since
     # this button is not connected to any other logic, it just causes a plain
     # rerun.
-    st.button("Re-run")
+    st.button("Rerun")
 
 
-st.set_page_config(page_title="Animation Demo", page_icon="📹")
-st.markdown("# Animation Demo")
-st.sidebar.header("Animation Demo")
+st.set_page_config(page_title="Animation demo", page_icon=":material/animation:")
+st.title("Animation demo")
 st.write(
-    """This app shows how you can use Streamlit to build cool animations.
-It displays an animated fractal based on the the Julia Set. Use the slider
-to tune different parameters."""
+    """
+    This app shows how you can use Streamlit to build cool animations.
+    It displays an animated fractal based on the the Julia Set. Use the slider
+    to tune different parameters.
+    """
 )
-
 animation_demo()
-
 show_code(animation_demo)

pages/3_DataFrame_Demo.py → dataframe_demo.py

@@ -1,4 +1,4 @@
-# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -38,7 +38,8 @@ def get_UN_data():
         else:
             data = df.loc[countries]
             data /= 1000000.0
-            st.write("### Gross Agricultural Production ($B)", data.sort_index())
+            st.subheader("Gross agricultural production ($B)")
+            st.dataframe(data.sort_index())
 
             data = data.T.reset_index()
             data = pd.melt(data, id_vars=["index"]).rename(
@@ -55,23 +56,16 @@ def get_UN_data():
             )
             st.altair_chart(chart, use_container_width=True)
     except URLError as e:
-        st.error(
-            """
-            **This demo requires internet access.**
-            Connection error: %s
-        """
-            % e.reason
-        )
+        st.error(f"This demo requires internet access. Connection error: {e.reason}")
 
 
-st.set_page_config(page_title="DataFrame Demo", page_icon="📊")
-st.markdown("# DataFrame Demo")
-st.sidebar.header("DataFrame Demo")
+st.set_page_config(page_title="DataFrame demo", page_icon=":material/table:")
+st.title("DataFrame demo")
 st.write(
-    """This demo shows how to use `st.write` to visualize Pandas DataFrames.
-(Data courtesy of the [UN Data Explorer](http://data.un.org/Explorer.aspx).)"""
+    """
+    This demo shows how to use `st.dataframe` to visualize a Pandas DataFrame.
+    Data courtesy of the [UN Data Explorer](http://data.un.org/Explorer.aspx).
+    """
 )
-
 data_frame_demo()
-
 show_code(data_frame_demo)

hello.py

@@ -0,0 +1,37 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+import streamlit as st
+
+st.set_page_config(page_title="Hello", page_icon=":material/waving_hand:")
+st.title("Welcome to Streamlit! 👋")
+st.write(
+    """
+    Streamlit is an open-source app framework built specifically for
+    machine learning and data science projects.
+    **👈 Select a demo from the sidebar** to see some examples
+    of what Streamlit can do!
+
+    ### Want to learn more?
+    - Check out [streamlit.io](https://streamlit.io)
+    - Jump into our [documentation](https://docs.streamlit.io)
+    - Ask a question in our [community
+      forums](https://discuss.streamlit.io)
+
+    ### See more complex demos
+    - Use a neural net to [analyze the Udacity Self-driving Car Image
+      Dataset](https://github.com/streamlit/demo-self-driving)
+    - Explore a [New York City rideshare dataset](https://github.com/streamlit/demo-uber-nyc-pickups)
+    """
+)

pages/2_Mapping_Demo.py → mapping_demo.py

@@ -1,4 +1,4 @@
-# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -32,7 +32,7 @@ def from_data_file(filename):
 
     try:
         ALL_LAYERS = {
-            "Bike Rentals": pdk.Layer(
+            "Bike rentals": pdk.Layer(
                 "HexagonLayer",
                 data=from_data_file("bike_rental_stats.json"),
                 get_position=["lon", "lat"],
@@ -41,15 +41,15 @@ def from_data_file(filename):
                 elevation_range=[0, 1000],
                 extruded=True,
             ),
-            "Bart Stop Exits": pdk.Layer(
+            "Bart stop exits": pdk.Layer(
                 "ScatterplotLayer",
                 data=from_data_file("bart_stop_stats.json"),
                 get_position=["lon", "lat"],
                 get_color=[200, 30, 0, 160],
                 get_radius="[exits]",
                 radius_scale=0.05,
             ),
-            "Bart Stop Names": pdk.Layer(
+            "Bart stop names": pdk.Layer(
                 "TextLayer",
                 data=from_data_file("bart_stop_stats.json"),
                 get_position=["lon", "lat"],
@@ -58,7 +58,7 @@ def from_data_file(filename):
                 get_size=10,
                 get_alignment_baseline="'bottom'",
             ),
-            "Outbound Flow": pdk.Layer(
+            "Outbound flow": pdk.Layer(
                 "ArcLayer",
                 data=from_data_file("bart_path_stats.json"),
                 get_source_position=["lon", "lat"],
@@ -72,7 +72,7 @@ def from_data_file(filename):
                 width_max_pixels=30,
             ),
         }
-        st.sidebar.markdown("### Map Layers")
+        st.sidebar.subheader("Map layers")
         selected_layers = [
             layer
             for layer_name, layer in ALL_LAYERS.items()
@@ -103,15 +103,12 @@ def from_data_file(filename):
         )
 
 
-st.set_page_config(page_title="Mapping Demo", page_icon="🌍")
-st.markdown("# Mapping Demo")
-st.sidebar.header("Mapping Demo")
+st.set_page_config(page_title="Mapping demo", page_icon=":material/public:")
+st.title("Mapping demo")
 st.write(
-    """This demo shows how to use
-[`st.pydeck_chart`](https://docs.streamlit.io/library/api-reference/charts/st.pydeck_chart)
-to display geospatial data."""
+    """
+    This demo shows how to use `st.pydeck_chart` to display geospatial data.
+    """
 )
-
 mapping_demo()
-
 show_code(mapping_demo)

pages/1_Plotting_Demo.py → plotting_demo.py

@@ -1,4 +1,4 @@
-# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -28,7 +28,7 @@ def plotting_demo():
 
     for i in range(1, 101):
         new_rows = last_rows[-1, :] + np.random.randn(5, 1).cumsum(axis=0)
-        status_text.text("%i%% Complete" % i)
+        status_text.text(f"{i}% complete")
         chart.add_rows(new_rows)
         progress_bar.progress(i)
         last_rows = new_rows
@@ -39,18 +39,17 @@ def plotting_demo():
     # Streamlit widgets automatically run the script from top to bottom. Since
     # this button is not connected to any other logic, it just causes a plain
     # rerun.
-    st.button("Re-run")
+    st.button("Rerun")
 
 
-st.set_page_config(page_title="Plotting Demo", page_icon="📈")
-st.markdown("# Plotting Demo")
-st.sidebar.header("Plotting Demo")
+st.set_page_config(page_title="Plotting demo", page_icon=":material/show_chart:")
+st.title("Plotting demo")
 st.write(
-    """This demo illustrates a combination of plotting and animation with
-Streamlit. We're generating a bunch of random numbers in a loop for around
-5 seconds. Enjoy!"""
+    """
+    This demo illustrates a combination of plotting and animation with
+    Streamlit. We're generating a bunch of random numbers in a loop for around
+    5 seconds. Enjoy!
+    """
 )
-
 plotting_demo()
-
 show_code(plotting_demo)

streamlit_app.py

@@ -0,0 +1,55 @@
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+
+from pathlib import Path
+
+import streamlit as st
+
+dir_path = Path(__file__).parent
+
+
+# Note that this needs to be in a method so we can have an e2e playwright test.
+def run():
+    page = st.navigation(
+        [
+            st.Page(
+                dir_path / "hello.py", title="Hello", icon=":material/waving_hand:"
+            ),
+            st.Page(
+                dir_path / "dataframe_demo.py",
+                title="DataFrame demo",
+                icon=":material/table:",
+            ),
+            st.Page(
+                dir_path / "plotting_demo.py",
+                title="Plotting demo",
+                icon=":material/show_chart:",
+            ),
+            st.Page(
+                dir_path / "mapping_demo.py",
+                title="Mapping demo",
+                icon=":material/public:",
+            ),
+            st.Page(
+                dir_path / "animation_demo.py",
+                title="Animation demo",
+                icon=":material/animation:",
+            ),
+        ]
+    )
+    page.run()
+
+
+if __name__ == "__main__":
+    run()

utils.py

@@ -1,4 +1,4 @@
-# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022)
+# Copyright (c) Streamlit Inc. (2018-2022) Snowflake Inc. (2022-2025)
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.