Top Bar▶ Run, ⏹ Stop, Clear, Validate, Share — your main controls. Also shows your license tier and the AI Explain button.
Left PanelThe Block Palette — every block you can use, organized by category. Drag blocks from here onto the canvas.
Canvas (center)Where you build your program. Drag blocks here, snap them together, and arrange your scripts.
Output PanelShows what your program prints, says, or does when it runs. Scrolls automatically as your program executes.
StageThe drawing canvas where sprites move, draw trails, and show speech bubbles.
Sprite PanelAdd and switch between sprites. Each sprite has its own scripts. (Starter+ plans.)
Code ViewToggle between visual blocks and text code. Great for seeing the logic behind your program.
💡
The palette on the left groups blocks by what they do — scroll down to find Drawing, Sound, Lists, and more. Hover any block for a quick description!
🚀
Your First Program
Build and run something in under 2 minutes
1
Find the green Start block at the top of the palette and drag it onto the canvas.
2
Find the orange Say block. Drag it below Start until you see it snap into place.
3
Click the white box inside the Say block and type: Hello, World!
4
Drag a gold Repeat block below Say, then drop another Say block inside it. Set the repeat count to 3.
5
Press ▶ Run and watch the Output panel on the right!
Example — Hello World
🟢 Start
💬 Say
🔁 Repeat times
💬 Say
🎉
Congratulations — you just wrote a real program with a loop! It prints "Hello, World!" once, then "I can code!" three times.
🧱
Block Reference
What every block does and when to use it
💬 Say
Say
Print a message to the Output panel
The most common block. Whatever you type appears in the Output panel when the program runs. You can say words, numbers, or snap in a Reporter block to print a calculated value.
Tip: Snap a Reporter block (like a variable or math expression) into the Say slot to print calculated values.
💭 Say Bubble
Say Bubble
Show a speech bubble above your sprite on the Stage
Shows a speech bubble above the active sprite. Great for making characters talk in your drawing programs. The bubble stays visible for about 2 seconds.
❓ Ask
Ask
Pause and prompt the user for input
Pauses the program and shows a pop-up asking the user to type something. The answer is saved in the variable you name in the first box. Then use say $name to greet them!
Example: ask answer What is your name? then say $answer.
⏳ Wait seconds
Wait
Pause the program for a set time
Pauses your program for the number of seconds you choose (max 60). Perfect for adding drama between steps, or slowing down a loop so you can watch it run.
🔁 Repeat times
blocks go here
Repeat
Run blocks a set number of times
Blocks dropped inside the Repeat run over and over the number of times you set. A special variable $count tells you which repetition you're on (1, 2, 3…).
Use say $count inside a Repeat to print the loop counter. Great for counting games!
♾ Forever
blocks go here
Forever
Loop continuously until you press Stop
Runs the blocks inside it over and over forever — until you click ⏹ Stop. Great for animations that keep going, or programs that keep asking questions.
Always put a Wait inside Forever — otherwise it runs so fast it can freeze the browser!
🔀 If then
TRUE branch
else
FALSE branch
If / Else
Make decisions in your program
Tests a condition. If it's true, runs the top branch. If false, runs the else branch. Conditions use $variable names with comparisons: >, <, =.
Set creates or assigns a variable. Change adds a number to it (use negative to subtract). Use $variableName anywhere to read the value. Good habit: always Set your variables to 0 at the start.
🎵 Sound Hz for s
Sound
Play a musical tone
Plays a tone at the frequency (Hz) and duration (seconds) you choose. Use a number like 440, or a note name like C4, G4, A5. Program waits for the tone to finish before continuing.
Notes: C3–C6 supported. Middle C = C4 (261 Hz). Play C4, E4, G4 in sequence for a major chord!
🚶 Move steps
↩ Turn degrees
📍 Go to x: y:
Motion Blocks
Move your sprite around the Stage
Move steps forward (negative = backward). Turn rotates clockwise in degrees (90 = right, -90 = left, 180 = around). Go To teleports to exact coordinates — center is (0, 0).
Repeat 4 × (Move 100 + Turn 90) draws a perfect square on the Stage!
✏ Pen Down
✋ Pen Up
🎨 Set Color
📏 Set Pen Size
🧹 Clear Stage
Drawing Blocks
Draw on the Stage as your sprite moves
Pen Down starts drawing a trail. Pen Up stops it. Set Color accepts color names (red, blue) or hex codes (#ff6600). Set Pen Size controls thickness. Clear Stage wipes all drawings.
👁 Show Sprite
🙈 Hide Sprite
Show / Hide Sprite
Toggle sprite visibility on the Stage
Show and Hide control whether the sprite appears on the Stage. Hidden sprites still run their code — they just can't be seen. Use for reveal effects or multi-sprite animations.
🔧 Define
your blocks here
📞 Call
Define & Call
Create and reuse your own commands
Define creates a named function — a group of blocks you can run by name anywhere. Call runs it. Use the same name in both. Functions keep programs organized and let you reuse logic without copying blocks.
Define drawSquare with Move+Turn×4 inside. Then Call drawSquare anywhere you want a square!
📋 List Add
🔍 List Get # into
✏ List Set # to
🗑 List Clear
List Blocks
Store and manage collections of values
Add appends an item to a list. Get reads item at a position (1-based) into a variable. Set replaces an item. Clear empties the list. Combine with Repeat and $count to loop through all items.
Pattern: List Add items first, then Repeat + List Get with $count to process each one.
🚩 When Flag Clicked
⌨ When Key Pressed
🖱 When Sprite Clicked
📡 When I Receive
📢 Broadcast
Event Blocks
Start scripts when something happens Starter+
Event blocks sit at the top of a script and trigger it when something happens. When Flag Clicked starts when ▶ is pressed. When Key reacts to keyboard input (try: space, left, right, up, down). Broadcast / Receive lets sprites talk to each other.
One sprite broadcasts "start" when clicked — another sprite's "When I Receive start" begins an animation!
🧱
Advanced Constructs
Building blocks for real-world programming — gated by tier as you grow
//
Comment Free
Leave a note in your code — skipped when the program runs
Comments help you (and others) understand what your code does. They are completely ignored at runtime. Writing comments is a professional habit — every real language has them: // C#, // JavaScript, // Java.
Example: // increase score when player collects a coin
🔒 Const =
Const Starter
A value that never changes
Const creates a named value that cannot be changed later. If you try to use Set on it, you get a warning. This teaches one of the most important habits in real programming: locking values that should never change. In C# and JS this is the const keyword.
Use UPPERCASE names for constants: MAX_LIVES, GRAVITY, PLAYER_NAME
🔄 While do
blocks go here
While Starter
Loop as long as a condition is true
Unlike Repeat (which counts a fixed number of times), While keeps running until a condition becomes false. This is the most common loop in real languages — while (lives > 0) is valid C, C#, and JavaScript.
Always make sure something inside the loop will eventually make the condition false — otherwise it runs forever! Use Break to exit early.
⛔ Break
Break Starter
Exit the current loop immediately
Stops a Repeat, While, Forever, or For loop immediately, no matter how many iterations are left. The program continues with whatever comes after the loop. break is identical in C, C#, and JavaScript.
Example: keep asking for a password with Forever, then Break when it's correct.
🔢 For from to
blocks go here — use $i
For Loop Builder
Count a variable from one number to another
The For loop counts a named variable (like $i) from a start value to an end value, running the inner blocks each time. This is the most commonly taught loop in computer science and maps directly to for (int i = 1; i <= 10; i++) in C#.
Use $i inside the loop to access the current count. Works forwards and backwards!
↩️ Return
Return Builder
Send a value back from a function
Exits the current function and sends a value back to wherever it was called. This is how functions become useful — instead of just doing things, they produce answers. In C# and JavaScript, return is the same keyword.
Example: define double n → return $n * 2. Then call double 5 gives you 10.
⏭ Continue
Continue Builder
Skip to the next loop iteration
Skips the rest of the current loop body and jumps straight to the next iteration. Useful for skipping over certain values without breaking out of the loop entirely. Identical to continue in C, C#, and JavaScript.
Example: loop from 1 to 10, use Continue inside an If to skip even numbers — print only the odd ones.
🛡 Try
risky code here
catch
error handling — use $err
Try / Catch Pro
Handle errors gracefully
Runs the Try section and watches for errors. If something goes wrong, instead of crashing, the program jumps to the Catch section where you can handle it gracefully. The error message is stored in the variable you name (e.g. $err). This is identical to try { } catch (Exception err) { } in C# and try { } catch (err) { } in JavaScript.
Real programs always wrap risky operations (file reads, network calls, user input parsing) in Try/Catch. This is one of the hallmarks of professional code.
🔢
Reporter Blocks
Oval blocks that snap into slots to supply values Starter+
Reporter blocks are the oval-shaped blocks at the bottom of the palette. They don't run on their own — they snap inside other blocks to supply a calculated value instead of a plain typed word.
➕
Math
[ ] + [ ][ ] - [ ]
[ ] × [ ][ ] ÷ [ ]
random [ ] to [ ]
⚖
Comparisons
[ ] = [ ][ ] > [ ][ ] < [ ]
Return true or false — snap into an If/Else condition!
🔗
Text
join [ ] [ ]
Joins two words or values together. Snap a variable on one side and a word on the other to build sentences!
📍
Sprite Info
x positiony position
direction
Read where your sprite is right now.
💡
To use a reporter: drag it from the palette and drop it directly onto the white input box of another block. The slot highlights when you hover over it!
🐱
Sprites
Characters that move and draw on the Stage Starter+
A sprite is a character on the Stage that can move, draw, show speech bubbles, and react to events. Each sprite has its own independent set of scripts.
Adding a Sprite
Click the + button in the Sprite Panel. Each sprite gets an emoji and a name. Click a sprite in the panel to select it and edit its scripts.
Switching Between Sprites
Click any sprite in the Sprite Panel to make it active. The canvas shows that sprite's blocks only. Changes to one sprite don't affect others.
Sprites Talking to Each Other
Use Broadcast and When I Receive to coordinate sprites. One sprite sends a message; another reacts when it receives it.
Position & Direction
Each sprite has its own x/y position and direction. Use Go To to reset position, and Move / Turn to navigate the stage.
🎭
Project idea: Make Sprite 1 draw a square while Sprite 2 draws a circle at the same time. Use "When Flag Clicked" on both sprites and press ▶ Run!
🎨
The Stage
Your 480×360 drawing canvas
The Stage is where sprites live and drawing happens. The center is (0, 0). X increases to the right (max +240), Y increases upward (max +180).
🐱
y = +180
y = -180
-240
+240
(0, 0)
🎨
Circle trick: Pen Down → Repeat 36 × (Move 10 + Turn 10) draws a circle! Bigger steps = bigger circle.
📝
Code View
See the text behind your blocks
Every block program has an equivalent text code version. Click the Code ↔ tab to switch views. You can edit the text and click Build Blocks to turn it back into visual blocks.
Text Code Example
start
set score to 0
repeat 5
change score by 10
say $score
end
if $score > 30
say You win!
else
say Keep trying!
end
💡
Code View updates automatically as you drag blocks. It's a great way to learn what real programming looks like — the logic is identical to the blocks!
🤖
AI Explain
Ask Claude to explain what your program does
1
Build some blocks on the canvas (at least a Start block and a few others).
2
Click the 🤖 Explain button in the top bar.
3
Claude AI reads your code and writes a friendly plain-English explanation of what it does.
🤖
AI Explain is available on all plans. If you hit a rate limit, just wait a minute and try again — it's shared fairly among all users.
🌍
Community Gallery
Share your programs and explore what others built Starter+
Sharing a Program
Click Share in the top bar. Give your program a title and a short description, then submit. It appears in the Community Gallery for anyone to see.
Browsing the Gallery
Visit the Community page to see programs from other coders. Filter by newest or most-liked. Click any program to load and remix it!
Liking Programs
Found a program you love? Click ♥ to like it. The creator sees their like count grow — a great way to encourage fellow coders!
Remixing
Load any community program into the editor, change it, and share your remix. This is how great programs evolve over time!
🛡
Your program title and description go through a safety check before publishing to keep the gallery friendly for everyone.
💬
Live Chat
Talk to other coders while you build Starter+
The chat drawer lets you send messages to other Playground users in real time — great for getting help, sharing ideas, or cheering each other on!
1
Click the 💬 button in the top bar to open the chat drawer.
2
Pick a display name and a group code. Your group code is like a chat room — share it with friends so you can talk privately.
3
Type a message and press Enter. Messages appear instantly for everyone in your group.
🔒
Chat messages go through a safety filter. Be kind and respectful — the Playground is for everyone!
To activate a plan, click the version badge in the top-right corner of the editor and enter your license key. Keys are available at Pricing.
💡
Tips & Tricks
Work faster, debug smarter
🗑
Delete a block: Drag it back toward the palette — a trash zone appears at the bottom of the canvas while dragging.
✅
Validate before Run: Click Validate to catch empty inputs and mismatched blocks before you run — saves time debugging!
💾
Auto-saved in your browser. Programs stay even if you close the tab — but clearing browser data will erase them. Share to the Gallery to keep them safe!
🔄
Toggle Code View after building blocks to see the text equivalent — a great bridge to learning real programming languages!
🐛
Debugging tip: Add Say blocks between steps to print variable values. say $score showing 0 when you expect 5 tells you exactly where the bug is.
🎯
$count is free inside Repeat — it tracks which loop iteration you're on (1, 2, 3…). No need to create a counter variable yourself!
Appendix — cheat sheet and starter songs for the Play Song and Fast Fill blocks
The ⚡ Fast Fill and 🎶 Play Song blocks (in the Lists and Sound palettes)
let you load an array of note names and play them back with a single wait time between each note.
This makes it easy to program real songs without any complicated loops.
📖
How it works in two blocks: listfill notes E4 D4 C4 D4 E4 — loads those notes into an array called notes. playsong notes 0.4 — plays each note one after another with a 0.4 second gap.
📌 Note Names Cheat Sheet
C3130 Hz
D3147 Hz
E3165 Hz
F3175 Hz
G3196 Hz
A3220 Hz
B3247 Hz
C4262 Hz
D4294 Hz
E4330 Hz
F4349 Hz
G4392 Hz
A4440 Hz
B4494 Hz
C5523 Hz
D5587 Hz
E5659 Hz
F5699 Hz
G5784 Hz
A5880 Hz
B5988 Hz
💡
Notes are written as a letter (A–G) followed by an octave number (3, 4, or 5).
C4–B4 is the middle octave — the sweet spot for most songs.
Lower numbers (C3) sound deeper; higher numbers (C5, C6) sound brighter.
You can also use a plain frequency number like 440 instead of a note name.
🎼 Starter Songs
🎵 Mary Had a Little LambEasy · 3 notes · perfect first song
💡 Open the Editor → paste into the Code panel → click ⬅ Build Blocks to convert to blocks → press ▶ Run
🎯
Make it yours! Try changing the wait time — smaller numbers (0.2) play faster like
an upbeat tune; bigger numbers (0.6) slow it down. You can also chain two
Fill blocks into different lists and play them one after another for verse + chorus.
🚀
Quick start: In the editor, click 🎵 Songs in the top bar to open the
Song Book panel — every song has a one-click copy button that pastes straight into the Code panel.