Skip to main content
Version: 0.10

Playpens

Playpens are sharable snippets of code written in Play, a lightweight online development environment for rapid exploration with Blocks. Learn more about Play.

Click any of the examples below to open them in Play and start experimenting.

Drawable canvas

Drawable Canvas

This playpen uses useState to manage the state of the canvas. It allows the user to draw on the canvas by tapping on an interactive grid of squares. The square's onPress handler is used to update the state of the canvas.

Open in Play

Polls

Polls

A progress bar that can be incremented and decremented by user input. Uses useState to manage the state of the progress bar.

Open in Play

Progress bar

Progress bar

A progress bar that can be incremented and decremented by user input. Uses useState to manage the state of the progress bar.

Open in Play

In-app navigation

In-App Navigation

A pattern for in-app navigation using a switch statement to render different components based on the current state. The current page is tracked with useState.

Open in Play

Football field

Football field

This playpen uses Blocks to create a simple football field interactive visualization.

Open in Play

Pixel font

Pixel font

A pixel font created from passing an svg literal to the <image> element.

Open in Play