Playground and get started #1240
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| --- | ||
| title: Use Streamlit Playground in your browser | ||
| slug: /get-started/installation/streamlit-playground | ||
| --- | ||
|
|
||
| # Use Streamlit Playground in your browser | ||
|
|
||
| The fastest way to try out Streamlit is to try out our Playground! Streamlit Playground runs in your browser. Just visit the Playground, and a _limited_ version of Streamlit loads as browser scripts. | ||
|
|
||
| Enjoy the following conveniences: | ||
|
|
||
| - Start playing with code right away, completely in your browser. | ||
| - No configuration. | ||
| - No command line. | ||
| - No application installations in your OS. | ||
|
There was a problem hiding this comment. You should make it clear that the playground doesn't support all Streamlit and Python features. There was a problem hiding this comment. I call this out in the There was a problem hiding this comment. I did the following:
|
||
|
|
||
| <Important> | ||
| Although the Playground has everything you need to get started, it doesn't contain the full version of Streamlit. To access the full awesomeness of Streamlit, see [Install Streamlit using command line](/get-started/installation/command-line) or [Install Streamlit using Anaconda Distribution](/get-started/installation/anaconda-distribution). | ||
| </Important> | ||
|
|
||
| ## Prerequisites | ||
|
|
||
| Because the Playground runs Streamlit _locally_ in your browser, you should visit the Playground from a personal computer, not a mobile device. | ||
|
There was a problem hiding this comment. I don't understand this paragraph. The playground should work find on mobile too. There was a problem hiding this comment. 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:
|
||
|
|
||
| ## Go to the Playground | ||
|
|
||
| 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. | ||
|
There was a problem hiding this comment. I don't think you should mention stlite here. It's just confusing to the user. Instead just say something like: |
||
|
|
||
| This can take as little as a few seconds. The setup time can vary depending on your machine and internet connection. When Streamlit is done loading, an example app is displayed in the right panel. | ||
|
|
||
|  | ||
|
|
||
| ## Create a `Hello World` app | ||
|
There was a problem hiding this comment. Maybe tell users to click on different example apps and play with them first? |
||
|
|
||
| 1. From the "EXAMPLES" list, select "**Blank**." | ||
|
|
||
| 1. On the left, update the contents of the code editor to contain the following code: | ||
|
|
||
| ```python | ||
| import streamlit as st | ||
|
|
||
| st.write("Hello World") | ||
| ``` | ||
|
|
||
| A second or two after typing or pasting the code into the editor, the right panel will display the updated app. The code editor saves your edits whenever you pause from typing. Therefore, if you pause between keystrokes as you type a new line of code, you may see an error on the right because Streamlit executed an incomplete line. If this happens, just keep typing to complete the line(s) you are writing. When you pause again at the end of the line, Streamlit reruns the app. | ||
|
|
||
| 1. On the left, change `st.write` to `st.title` so the code editor has the following code: | ||
|
|
||
| ```python | ||
| import streamlit as st | ||
|
|
||
| st.title("Hello World") | ||
| ``` | ||
|
|
||
| A second after you stop typing, Streamlit reruns the app and updates the display on the right. | ||
|
|
||
| 1. Keep making changes! Watch as your edits are automatically saved and the new result is displayed on the right. | ||
|
|
||
| ## What's next? | ||
|
|
||
| Read about our [Basic concepts](/get-started/fundamentals/main-concepts) and try out more commands in your app. | ||
|
There was a problem hiding this comment. I think "what's next" should point people toward installing Streamlit. Maybe something like: What's next?At this point you have two options:
|
||
|
|
||
| When you use the Streamlit Playground to work through the basic concepts, you can skip over any instructions to save your file or to select "**Rerun on save**." Streamlit Playground automatically saves your code when you pause from editing, as described above. Also, it is already configured to rerun on save. | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.) 😁