Playground and get started #1240

sfc-gh-dmatthews · 2025-03-05T23:01:14Z

📚 Context

Introduce the Streamlit Playground in Get started.

🧠 Description of Changes

Add another page to setup/installation to introduce the Streamlit Playground.
Add a little color and pizazz to the installation overview page.

Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.

sfc-gh-dmatthews · 2025-03-05T23:02:03Z

TODO: Update URLs. I changed installation to setup, but didn't change the URLs yet, since I'll do that at the end in case of other changes/edits to names.

sfc-gh-tteixeira

I haven't reviewed the new design yet, so not approving yet!

sfc-gh-tteixeira · 2025-03-05T23:59:06Z

content/get-started/installation/_index.md

-</RefCard>
-
-</TileContainer>
+## General setup and installation


FWIW I think the previous wording made it clearer that if you're an expert you don't have to read the rest of these.

I moved the Playground up to highlight it further and added a little explainer blurb to emphasize to completely new or random passersby that the Playground is the easiet way to get a taste before choosing one of the local or cloud setup options below.

sfc-gh-tteixeira · 2025-03-06T00:01:29Z

content/menu.md

    url: /get-started/installation
-  - category: Get started / Installation / Use command line
+  - category: Get started / Setup / LOCAL DEVELOPMENT
+  - category: Get started / Setup / Use Streamlit Playground ✨


Shouldn't this be under CLOUD DEVELOPMENT ?

It uses your machine's local resources, though. It runs in your browser, but uses your own hardware, not a cloud server.

I moved it up to highlight it separately, which brushes the distinction under the rug. :)

Still feels funny...

I think the first thing under the Setup section needs to be how to install locally. Also, I guess the real problem is that it doesn't really feel like the playground belongs in the Setup section.

What if we pulled it out of that menu and renamed the menu to Installation?

Get started

Playground

Installation

LOCAL DEVELOPMENT

Install via command line

Install via Anaconda Distribution

CLOUD DEVELOPMENT

Use GitHub Codespaces

Use Snowflake

Fundamentals

First steps

Develop

Deploy

Knowledge base

sfc-gh-tteixeira · 2025-03-06T00:02:09Z

content/get-started/installation/streamlit-playground.md

+- Start playing with code right away, completely in your browser.
+- No configuration.
+- No command line.
+- No application installations in your OS.


You should make it clear that the playground doesn't support all Streamlit and Python features.

I call this out in the <Note> immediately following the conveniences list. Would making it two bullet points or two paragraphs make it clearer? Or maybe use <Important> instead of <Nonte>?

I did the following:

Switched the <Note> to <Important>.

Moved the warning about local hardware out of the admonition, sprinkling it into the prerequisites and "wait" step.

Added emphasis to limited in the first paragraph.

sfc-gh-dmatthews · 2025-03-06T06:55:50Z

I'm also thinking to cut the bottom margin for InlineCalloutContainer in half. (Some design thoughts shared in the Streamlit docs Slack channel.)

sfc-gh-tteixeira · 2025-03-08T00:27:47Z

content/get-started/installation/streamlit-playground.md

+
+## Prerequisites
+
+Because the Playground runs Streamlit _locally_ in your browser, you should visit the Playground from a personal computer, not a mobile device.


I don't understand this paragraph. The playground should work find on mobile too.

If you don't think there are any performance issues running on mobile devices, I can remove the warning.

I have two concerns about people using mobile devices:

It downloads (perhaps) an unexpected amount of data when visiting the page in order to use the browser itself to run the Streamlit server. This isn't some remote machine running executing the Python code.

They may be a bad user experience without the side-by-side view and a full keyboard (though this is a secondary concern for me relative to the first).

sfc-gh-tteixeira · 2025-03-08T00:29:15Z

content/get-started/installation/streamlit-playground.md

+
+1. Go to [streamlit.io/playground](https://streamlit.io/playground).
+
+1. Wait for [`stlite`](https://github.com/whitphx/stlite) &mdash; a browser-based version of Streamlit &mdash; to load in your browser.


I don't think you should mention stlite here. It's just confusing to the user.

Instead just say something like: Wait for the playground to load. Behind the scenes this downloads a version of Python and Streamlit that your browser can run, so this may take a bit of time.

sfc-gh-tteixeira · 2025-03-08T00:29:53Z

content/get-started/installation/streamlit-playground.md

+
+   ![Streamlit Playground is fully loaded and ready to accept code edits](/images/get-started/Playground-1-loaded.png)
+
+## Create a `Hello World` app


Maybe tell users to click on different example apps and play with them first?

sfc-gh-tteixeira · 2025-03-08T00:37:29Z

content/get-started/installation/streamlit-playground.md

+
+## What's next?
+
+Read about our [Basic concepts](/get-started/fundamentals/main-concepts) and try out more commands in your app.


I think "what's next" should point people toward installing Streamlit. Maybe something like:

What's next?

At this point you have two options:

You can continue learning Streamlit through the playground -- great for learning and quick snippets.

Or get started for real by installing Streamlit on your machine or the cloud.

sfc-gh-tteixeira · 2025-03-08T00:43:20Z

content/menu.md

    url: /get-started/installation
-  - category: Get started / Installation / Use command line
+  - category: Get started / Setup / LOCAL DEVELOPMENT
+  - category: Get started / Setup / Use Streamlit Playground ✨


Still feels funny...

I think the first thing under the Setup section needs to be how to install locally. Also, I guess the real problem is that it doesn't really feel like the playground belongs in the Setup section.

What if we pulled it out of that menu and renamed the menu to Installation?

Get started

Playground

Installation

LOCAL DEVELOPMENT

Install via command line

Install via Anaconda Distribution

CLOUD DEVELOPMENT

Use GitHub Codespaces

Use Snowflake

Fundamentals

First steps

Develop

Deploy

Knowledge base

sfc-gh-tteixeira · 2025-03-08T00:44:27Z

content/get-started/installation/_index.md

+
+There are many ways to get started coding with Streamlit. If you're brand new to Streamlit or just passing through on a random internet walk, we recommend using the Streamlit Playground for your first hands-on experience. It's quick and ready to go in your browser. After you experience the awesomeness of Streamlit, we're confident you'll want to come back and set up a full development environment, which you can do locally or in the cloud, as described in the options below.
+
+<InlineCalloutContainer>


You're doing heroic work, but I think we need a design pass here.

I can take a pass directly in the code and share it with you. Or we can meet and do it live. LMK what you prefer.

I love our pair programming sessions and I think that will be faster. I was trying to mostly work within the components I already have, but I also have vague design ideas to go a little further. We can also talk about user journeys here. (Like whether someone might use the playground to walk through Basics or not.) 😁

sfc-gh-dmatthews added 2 commits March 5, 2025 14:43

Add Playground to Get started

27d66b5

Use titles and quoted text

5d653dc

sfc-gh-dmatthews requested a review from sfc-gh-tteixeira March 5, 2025 23:02

sfc-gh-tteixeira reviewed Mar 6, 2025

View reviewed changes

sfc-gh-dmatthews added 3 commits March 5, 2025 22:07

Show quotes inline with platform

6e5902a

Rework the limitation notes for Playground

1964d5f

Further highlight playground

aae3137

Consitent Hello world example for Playground

374fcce

sfc-gh-tteixeira reviewed Mar 8, 2025

View reviewed changes

sfc-gh-tteixeira force-pushed the playground-and-get-started branch from 374fcce to 6798014 Compare March 8, 2025 06:23

sfc-gh-dmatthews force-pushed the playground-and-get-started branch from 6798014 to 374fcce Compare March 9, 2025 00:22

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Playground and get started #1240

Playground and get started #1240

sfc-gh-dmatthews commented Mar 5, 2025

sfc-gh-dmatthews commented Mar 5, 2025

sfc-gh-tteixeira left a comment

sfc-gh-tteixeira Mar 5, 2025

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-tteixeira Mar 6, 2025

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-dmatthews Mar 6, 2025

sfc-gh-tteixeira Mar 8, 2025 •

edited

Loading

sfc-gh-tteixeira Mar 6, 2025

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-dmatthews Mar 6, 2025

sfc-gh-dmatthews commented Mar 6, 2025

sfc-gh-tteixeira Mar 8, 2025

sfc-gh-dmatthews Mar 8, 2025

sfc-gh-tteixeira Mar 8, 2025

sfc-gh-tteixeira Mar 8, 2025

sfc-gh-tteixeira Mar 8, 2025

sfc-gh-tteixeira Mar 8, 2025 •

edited

Loading

sfc-gh-tteixeira Mar 8, 2025

sfc-gh-dmatthews Mar 8, 2025


		## Prerequisites

		Because the Playground runs Streamlit _locally_ in your browser, you should visit the Playground from a personal computer, not a mobile device.


		1. Go to [streamlit.io/playground](https://streamlit.io/playground).

		1. Wait for [`stlite`](https://github.com/whitphx/stlite) — a browser-based version of Streamlit — to load in your browser.


		![Streamlit Playground is fully loaded and ready to accept code edits](/images/get-started/Playground-1-loaded.png)

		## Create a `Hello World` app


		## What's next?

		Read about our [Basic concepts](/get-started/fundamentals/main-concepts) and try out more commands in your app.


		There are many ways to get started coding with Streamlit. If you're brand new to Streamlit or just passing through on a random internet walk, we recommend using the Streamlit Playground for your first hands-on experience. It's quick and ready to go in your browser. After you experience the awesomeness of Streamlit, we're confident you'll want to come back and set up a full development environment, which you can do locally or in the cloud, as described in the options below.

		<InlineCalloutContainer>

Playground and get started #1240

Are you sure you want to change the base?

Playground and get started #1240

Conversation

sfc-gh-dmatthews commented Mar 5, 2025

📚 Context

🧠 Description of Changes

sfc-gh-dmatthews commented Mar 5, 2025

sfc-gh-tteixeira left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sfc-gh-dmatthews Mar 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sfc-gh-dmatthews Mar 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sfc-gh-tteixeira Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sfc-gh-dmatthews Mar 6, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sfc-gh-dmatthews commented Mar 6, 2025

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

What's next?

sfc-gh-tteixeira Mar 8, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-tteixeira Mar 8, 2025 •

edited

Loading

sfc-gh-dmatthews Mar 6, 2025 •

edited

Loading

sfc-gh-tteixeira Mar 8, 2025 •

edited

Loading