Playground

These pages are full of tiny programs, each running live and each editable in place. Change the code, run it again, and see what happens. Nothing you do here can break anything, and reloading the page resets every demo.

The playground is for tinkering, so there are no walkthroughs and very little prose, and each demo focuses on a single idea. When a demo makes you want the full story, it links out to the page that tells it.

Collections

• Basics covers hello pages, counters, and connecting pages.
• Forms demonstrates every core input type in miniature.
• Lists and tables shows ways to display collections of data.
• Styling puts themes, helpers, keywords, and CSS side by side.
• Images and media works with pictures, plots, sound, and video.
• Interactive explores events, fragments, and timers.
• Camera, location, and sound uses device features, so its demos ask for permissions.

A note on speed

All the demos on one page share a single Python runtime, so the first demo you run pays the startup cost and the rest are quick. If a page has many demos, give the first click a moment.

How to tinker well

1. Predict before you run. Say what you expect out loud, then check.
2. Change one thing at a time. When a change surprises you, that is the interesting part.
3. Break things on purpose. Misspell a route name, remove a str(), and read the error you get. Errors met on purpose are easier to fix when they arrive by accident, and the error index explains the common ones.