Playground

Playground is a collection of interactive examples showcasing Aurelia's capabilities. You can edit the examples and see the changes in real time.

Hello, world!

The message “Hello, world!” is defined in the src/my-app.ts file and then rendered in the src/my-app.html file.

Character Counter

The character counter is defined in the src/character-counter.ts file and then rendered in the src/character-counter.html file. Showcasing the use of form element binding, computed getters, and UI rendering.

Weather App

The weather app is defined in the src/weather-component.ts file and then rendered in the src/weather-component.html file.

Real Time Clock

The clock is defined in the src/real-time-clock.ts file and then rendered in the src/real-time-clock.html file. Styles for the clock are defined in the src/real-time-clock.css file. This example demonstrates Aurelia’s ability to update the UI in real time.

Particle System

The particle system is defined in the src/particle-system.ts file and then rendered in the src/particle-system.html file. Styles for the particle system are defined in the src/particle-system.css file. This example demonstrates Aurelia’s ability to render complex UI elements and animate them in real time.

Whack a Mole Game

The whack a mole game is defined in the src/whack-a-mole.ts file and then rendered in the src/whack-a-mole.html file. Styles for the whack a mole game are defined in the src/whack-a-mole.css file. This example demonstrates Aurelia’s ability to build simple games.