App Inventor Simulator

Interactive web-based simulator that mimics MIT App Inventor's block-based programming environment. Includes 12 progressive examples with both a working mobile phone preview and authentic-looking colored code blocks.

Features

Live phone preview that lets you interact with the app like a real Android device.

Authentic block design with the same colors, shapes, and layout as MIT App Inventor.

Draggable blocks that can be moved around the workspace.

Working audio playback for the Pause vs Stop comparison, powered by the Web Audio API.

Twelve examples covering the core App Inventor concepts.

Examples

Example 1 - CheckBox and Image, single-selection logic.

Example 2 - List operations, add and search with duplicate detection.

Example 3 - Player Pause, resume from where it stopped.

Example 4 - Player Stop, restart from the beginning.

Example 5 - Spinner and ListView, anthem player with an if and else-if chain.

Example 6 - Notifier, the simplest possible greeting alert.

Example 7 - Split text, filename parsing with split and join.

Example 8 - Slider multiplier, globals with round and join.

Example 9 - Procedures, refactoring with parameters and the DRY principle.

Example 10 - For each and any Button, loops, every Button getter, and dynamic component access.

Example 11 - Calculator, return-value procedure with error handling.

Example 12 - Shopping list, multiple procedures with categories.

Usage

Open app_inventor_simulator_v2.html in any modern browser. There is no build step and no dependencies.

Purpose

Built as a study tool for a Mobile App Development course. Useful for learning App Inventor concepts without installing the IDE, reviewing block colors and categories before exams, and showing classmates how blocks translate to actual app behavior.

Tech Stack

HTML5, CSS3, and vanilla JavaScript. Web Audio API is used for music playback simulation. No frameworks and no build step.