Skip to content

Scratch Editor Overview

Run the Scratch Editor Overview MicroSim Fullscreen
Edit in the p5.js Editor

About This MicroSim

This MicroSim is an interactive, labeled diagram of the Scratch editor's layout, showing where the Stage, Blocks Palette, Code Area, Sprite Pane, Tabs, and Toolbar sit relative to one another and how they connect. It helps students build a mental map of the real Scratch editor before they start dragging blocks in the actual application.

How to Use

  • Hover over any labeled region (Stage, Blocks Palette, Sprite Pane, Code Area, Tabs, or Toolbar) to highlight it.
  • Click a region to pin its name and description in a side panel; click it again to unpin.
  • Use the Show Labels and Show Connections checkboxes to toggle the region name labels and the orange arrows showing how the panels work together (for example, "Drag blocks" from the Blocks Palette to the Code Area).
  • Click Reset Highlights to clear any pinned selection.

Iframe Embed Code

You can add this MicroSim to any web page by adding this to your HTML:

<iframe src="https://dmccreary.github.io/scratch-textbook/sims/editor-overview/main.html"
        height="520px"
        width="100%"
        scrolling="no"></iframe>

Lesson Plan

Grade Level

Grades 3-6 (ages 8-12)

Duration

10-15 minutes

Prerequisites

None beyond basic computer skills (using a mouse or trackpad to hover and click). This MicroSim is designed as the very first interactive activity in the course, meant to be used before students open the real Scratch editor for the first time.

Activities

  1. Exploration (5 min): Students hover over each labeled region — Stage, Blocks Palette, Sprite Pane, Code Area, Tabs, and Toolbar — and read the description that pops up for each one.
  2. Guided Practice (5 min): As a class, click each region to pin its name and description, then turn on Show Connections to trace how blocks travel from the Blocks Palette into the Code Area, and how the Code Area drives what happens on the Stage.
  3. Assessment (5 min): Open the real Scratch editor at scratch.mit.edu and have students point out the same six regions live, matching them to what they just explored in the diagram.

Assessment

A student is ready to move on when they can point to (or name) the Stage, Blocks Palette, Code Area, Sprite Pane, and Tabs in the real Scratch editor without help, and can explain in their own words that blocks are dragged from the palette into the code area to build a script.

References

  1. Chapter 1: Welcome to Scratch — the chapter where this diagram appears, with the full tour of the Scratch editor.