Learn Aurelia - 10 Code Examples & CST Typing Practice Test

Aurelia is a modern, open-source, front-end framework focused on clean architecture, minimal boilerplate, and standards-based development. It emphasizes unobtrusive conventions and powerful data binding.

View all 10 Aurelia code examples →

Aurelia Simple Counter Aurelia Counter with Step Aurelia Counter with Max/Min Aurelia Counter with Double Increment Aurelia Counter with History Aurelia Counter with Auto Increment Aurelia Counter with Limits and Step Aurelia Counter with Even/Odd Indicator Aurelia Counter with Double Click Increment Aurelia Counter with Color Themes

Learn AURELIA with Real Code Examples

Updated Nov 21, 2025

Explain

Aurelia promotes a highly modular, standards-first approach.

It features a powerful, extensible two-way binding system.

Aurelia avoids unnecessary abstractions by leveraging modern ECMAScript directly.

Core Features

Bindable view-models

Custom elements and attributes

Dependency injection

Routing with hierarchical navigation

Binding behaviors and value converters

Basic Concepts Overview

Views and ViewModels

Bindable properties

Custom attributes/elements

Routing with configureRouter

Dependency injection usage

Project Structure

src/app.html - root view

src/app.js - root ViewModel

src/resources/ - shared components

src/routes/ - route components

aurelia_project/ - build and tooling config

Building Workflow

Generate project with Aurelia CLI

Define ViewModels with standard classes

Bind data and events in HTML templates

Create reusable custom elements

Bundle and deploy using CLI build pipeline

Difficulty Use Cases

Beginner: simple data binding

Intermediate: custom elements and DI

Advanced: complex routing and modules

Expert: plugin development or Aurelia 2 migration

Community: contributing to Aurelia core

Comparisons

More standard-based than Angular or Ember

Less popular but cleaner architecture

More flexible than Ember, more structured than React

More modern binding system than Knockout

Lightweight alternative to Angular with DI included

Versioning Timeline

2015 - Aurelia 1 initial release

2017 - CLI and plugin ecosystem expansion

2020 - Aurelia 2 announced

2022 - New rendering pipeline updates

2025 - Ongoing Aurelia 2 adoption

Glossary

ViewModel: Class controlling a view

Binding: Data sync between view and model

DI Container: Injects services

Custom Element: Reusable UI component

Binding Behavior: Enhances binding logic

Code Sample Descriptions

Aurelia Simple Counter

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch to ${isDark ? 'Light' : 'Dark'} Theme</button>
</div>

A basic counter with increment, decrement, reset, and theme toggle.

Let’s Try →

Aurelia Counter with Step

export class Counter {
    count = 0;
    step = 5;
    isDark = false;

    increment() { this.count += this.step; }
    decrement() { this.count -= this.step; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+ ${step}</button>
        <button click.delegate="decrement()">- ${step}</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch Theme</button>
</div>

Counter that increments/decrements by a custom step value.

Let’s Try →

Aurelia Counter with Max/Min

export class Counter {
    count = 0;
    min = 0;
    max = 10;
    isDark = false;

    increment() { if(this.count < this.max) this.count++; }
    decrement() { if(this.count > this.min) this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that respects maximum and minimum limits.

Let’s Try →

Aurelia Counter with Double Increment

export class Counter {
    count = 1;
    isDark = false;

    increment() { this.count *= 2; }
    decrement() { this.count = Math.floor(this.count / 2); }
    reset() { this.count = 1; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">Double</button>
        <button click.delegate="decrement()">Half</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

A counter that doubles the value on increment.

Let’s Try →

Aurelia Counter with History

export class Counter {
    count = 0;
    history = [];
    isDark = false;

    increment() { this.count++; this.history.push(this.count); }
    decrement() { this.count--; this.history.push(this.count); }
    reset() { this.count = 0; this.history.push(this.count); }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <p>History: <span repeat.for="value of history">${value} </span></p>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that keeps a history of values.

Let’s Try →

Aurelia Counter with Auto Increment

export class Counter {
    count = 0;
    auto = false;
    isDark = false;

    autoToggle() {
        this.auto = !this.auto;
        if(this.auto) this.timer = setInterval(() => this.count++, 1000);
        else clearInterval(this.timer);
    }

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
        <button click.delegate="autoToggle()">${auto ? 'Stop Auto' : 'Start Auto'}</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that can auto-increment every second.

Let’s Try →

Aurelia Counter with Limits and Step

export class Counter {
    count = 0;
    min = 0;
    max = 50;
    step = 5;
    isDark = false;

    increment() { if(this.count + this.step <= this.max) this.count += this.step; }
    decrement() { if(this.count - this.step >= this.min) this.count -= this.step; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+ ${step}</button>
        <button click.delegate="decrement()">- ${step}</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter with min, max, and custom step value.

Let’s Try →

Aurelia Counter with Even/Odd Indicator

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }

    get parity() { return this.count % 2 === 0 ? 'Even' : 'Odd'; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count} (${parity})</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that indicates if current count is even or odd.

Let’s Try →

Aurelia Counter with Double Click Increment

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    doubleIncrement() { this.count += 2; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()" dblclick.delegate="doubleIncrement()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter increments faster on double click.

Let’s Try →

Aurelia Counter with Color Themes

export class Counter {
    count = 0;
    theme = 'light';

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() {
        this.theme = this.theme === 'light' ? 'dark' : this.theme === 'dark' ? 'blue' : 'light';
    }
}

<div class.bind="theme + '-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch Theme</button>
</div>

Counter supporting multiple color themes.

Let’s Try →

Frequently Asked Questions about Aurelia

What is Aurelia?

What are the primary use cases for Aurelia?

Enterprise-grade SPA development. Modular, maintainable business applications. Highly data-bound interfaces. Standards-based ES module projects. Custom framework/tooling integrations

What are the strengths of Aurelia?

Clean, standards-oriented approach. Low boilerplate, minimal framework footprint. Highly extensible and modular. Powerful and efficient binding system. Excellent for large, well-structured teams

What are the limitations of Aurelia?

Smaller community than React, Vue, or Angular. Fewer third-party plugins and libraries. Learning curve for DI and binding internals. Less mainstream adoption in startups. Documentation can be fragmented for Aurelia 2

How can I practice Aurelia typing speed?

CodeSpeedTest offers 10+ real Aurelia code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Aurelia Simple Counter

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch to ${isDark ? 'Light' : 'Dark'} Theme</button>
</div>

A basic counter with increment, decrement, reset, and theme toggle.

Let’s Try →

Aurelia Counter with Step

export class Counter {
    count = 0;
    step = 5;
    isDark = false;

    increment() { this.count += this.step; }
    decrement() { this.count -= this.step; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+ ${step}</button>
        <button click.delegate="decrement()">- ${step}</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch Theme</button>
</div>

Counter that increments/decrements by a custom step value.

Let’s Try →

Aurelia Counter with Max/Min

export class Counter {
    count = 0;
    min = 0;
    max = 10;
    isDark = false;

    increment() { if(this.count < this.max) this.count++; }
    decrement() { if(this.count > this.min) this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that respects maximum and minimum limits.

Let’s Try →

Aurelia Counter with Double Increment

export class Counter {
    count = 1;
    isDark = false;

    increment() { this.count *= 2; }
    decrement() { this.count = Math.floor(this.count / 2); }
    reset() { this.count = 1; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">Double</button>
        <button click.delegate="decrement()">Half</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

A counter that doubles the value on increment.

Let’s Try →

Aurelia Counter with History

export class Counter {
    count = 0;
    history = [];
    isDark = false;

    increment() { this.count++; this.history.push(this.count); }
    decrement() { this.count--; this.history.push(this.count); }
    reset() { this.count = 0; this.history.push(this.count); }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <p>History: <span repeat.for="value of history">${value} </span></p>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that keeps a history of values.

Let’s Try →

Aurelia Counter with Auto Increment

export class Counter {
    count = 0;
    auto = false;
    isDark = false;

    autoToggle() {
        this.auto = !this.auto;
        if(this.auto) this.timer = setInterval(() => this.count++, 1000);
        else clearInterval(this.timer);
    }

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
        <button click.delegate="autoToggle()">${auto ? 'Stop Auto' : 'Start Auto'}</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that can auto-increment every second.

Let’s Try →

Aurelia Counter with Limits and Step

export class Counter {
    count = 0;
    min = 0;
    max = 50;
    step = 5;
    isDark = false;

    increment() { if(this.count + this.step <= this.max) this.count += this.step; }
    decrement() { if(this.count - this.step >= this.min) this.count -= this.step; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+ ${step}</button>
        <button click.delegate="decrement()">- ${step}</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter with min, max, and custom step value.

Let’s Try →

Aurelia Counter with Even/Odd Indicator

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }

    get parity() { return this.count % 2 === 0 ? 'Even' : 'Odd'; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count} (${parity})</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter that indicates if current count is even or odd.

Let’s Try →

Aurelia Counter with Double Click Increment

export class Counter {
    count = 0;
    isDark = false;

    increment() { this.count++; }
    doubleIncrement() { this.count += 2; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() { this.isDark = !this.isDark; }
}

<div class.bind="isDark ? 'dark-theme' : 'light-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()" dblclick.delegate="doubleIncrement()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Toggle Theme</button>
</div>

Counter increments faster on double click.

Let’s Try →

Aurelia Counter with Color Themes

export class Counter {
    count = 0;
    theme = 'light';

    increment() { this.count++; }
    decrement() { this.count--; }
    reset() { this.count = 0; }
    toggleTheme() {
        this.theme = this.theme === 'light' ? 'dark' : this.theme === 'dark' ? 'blue' : 'light';
    }
}

<div class.bind="theme + '-theme'">
    <h2>Counter: ${count}</h2>
    <div>
        <button click.delegate="increment()">+</button>
        <button click.delegate="decrement()">-</button>
        <button click.delegate="reset()">Reset</button>
    </div>
    <button click.delegate="toggleTheme()">Switch Theme</button>
</div>

Counter supporting multiple color themes.

Let’s Try →

Frequently Asked Questions about Aurelia

What is Aurelia?

What are the primary use cases for Aurelia?

Enterprise-grade SPA development. Modular, maintainable business applications. Highly data-bound interfaces. Standards-based ES module projects. Custom framework/tooling integrations

What are the strengths of Aurelia?

Clean, standards-oriented approach. Low boilerplate, minimal framework footprint. Highly extensible and modular. Powerful and efficient binding system. Excellent for large, well-structured teams

What are the limitations of Aurelia?

How can I practice Aurelia typing speed?

CodeSpeedTest offers 10+ real Aurelia code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Aurelia - 10 Code Examples & CST Typing Practice Test

Learn AURELIA with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons

Versioning Timeline

Glossary

Installation Setup

Environment Setup

Config Files

Cli Commands

Internationalization

Accessibility

Ui Styling

State Management

Data Management

Architecture

Rendering Model

Architectural Patterns

Real World Architectures

Design Principles

Scalability Guide

Migration Guide

Performance Notes

Security Notes

Monitoring Analytics

Code Quality

Practical Examples

Troubleshooting

Testing Guide

Deployment Options

Tools Ecosystem

Integrations

Productivity Tips

Challenges

Learning Path

Skill Improvement Plan

Interview Questions

Cheat Sheet

Books

Tutorials

Official Docs

Community Links

Community Support

Monetization

Future Roadmap

When Not To Use

Final Summary

Faq

Code Sample Descriptions

Aurelia Simple Counter

Aurelia Counter with Step

Aurelia Counter with Max/Min

Aurelia Counter with Double Increment

Aurelia Counter with History

Aurelia Counter with Auto Increment

Aurelia Counter with Limits and Step

Aurelia Counter with Even/Odd Indicator

Aurelia Counter with Double Click Increment

Aurelia Counter with Color Themes

Frequently Asked Questions about Aurelia

What is Aurelia?

What are the primary use cases for Aurelia?

What are the strengths of Aurelia?

What are the limitations of Aurelia?

How can I practice Aurelia typing speed?

Learn Other Programming Languages

Learn Aurelia - 10 Code Examples & CST Typing Practice Test

Learn AURELIA with Real Code Examples

Explain

Core Features

Basic Concepts Overview

Project Structure

Building Workflow

Difficulty Use Cases

Comparisons