Skip to content

Guide · Open source

How to use aurelia/framework: setup, components and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

aurelia/framework is the Aurelia 1 entry point, a front-end JavaScript framework for building browser apps that bundles the core Aurelia sub-libraries into one package. This guide explains how Aurelia apps are structured, how the binding syntax works in a small example, and how to decide whether this version fits your project. By the end you will know what to install, what a component looks like, and where to read further.

Aureliaaurelia/framework · ★ 11.7k · MIT

Quick start

  1. 1Decide if Aurelia 1 fits. Confirm that you are maintaining an Aurelia 1 app or have a reason to use this line rather than the current Aurelia version.
  2. 2Get the source. Clone the repository with git clone https://github.com/aurelia/framework, or install the aurelia-framework package with your package manager.
  3. 3Create a component class. Write a JavaScript or TypeScript class that holds the data your view needs, such as the App class in the README example.
  4. 4Write the HTML template. Pair the class with a template that uses binding syntax like value.bind, repeat.for and if.bind.
  5. 5Explore the docs. Read the Binding, Templating and Routing sections on aurelia.io to learn the features you will need next.
  6. 6Scaffold with the CLI. Use the Aurelia CLI, linked from the README, to create, build and test your app.

What aurelia/framework is and who it suits

Aurelia is a front-end JavaScript framework for building browser, mobile, and desktop applications. According to the README, it focuses on aligning closely with web platform specifications, uses convention over configuration, and aims for minimal framework intrusion, so you mostly write your own code without the framework getting in the way.

This repository contains the aurelia-framework library, which brings together the core Aurelia libraries into a ready-to-go application-building platform. It is the Aurelia 1 line, so check the newest Aurelia version before starting a fresh project.

  • Good fit: developers who want to stay close to web standards, and teams already maintaining Aurelia 1 applications.
  • Less suited: people starting a new project who want the current Aurelia line, and beginners who want a large mainstream ecosystem.
  • The README does not compare community size with other frameworks.

Install aurelia/framework with a package manager

The source lists a package-manager install method and no specific prerequisites. The README's install command clones the repository from GitHub. The README also points to the Aurelia CLI as the quickest way to start a project.

The repository's npm package is named aurelia-framework, which you can check on npm before you install.

  • Clone the repository if you want the source locally.
  • Use the Aurelia CLI to scaffold a project, as the README suggests.
git clone https://github.com/aurelia/framework

Build components from a class and an HTML template

Aurelia apps are built by composing simple components. By convention, each component is a vanilla JavaScript or TypeScript class paired with an HTML template. The class holds data, and the template binds to it.

The example below comes from the README. The class defines a welcome message and a list of quests. The template uses value.bind for two-way binding, a debounce of 500 milliseconds on the name field, repeat.for to loop over options, and if.bind to show content conditionally.

//app.js export class App { welcome = "Welcome to Aurelia"; quests = [ "To seek the holy grail", "To take the ring to Mordor", "To rescue princess Leia" ]; } <!-- app.html --> <template> <form> <label for="name-field">What is your name?</label> <input id="name-field" value.bind="name & debounce:500"> <label for="quest-field">What is your quest?</label> <select id="quest-field" value.bind="quest"> <option></option> <option repeat.for="q of quests">${q}</option> </select> </form> <p if.bind="name">${welcome}, ${name}!</p> <p if.bind="quest">Now set forth ${quest.toLowerCase()}!</p> </template>

Learn the rest of the framework in the docs

The README links to documentation sections covering the app model, binding, templating, routing, plugins, integration, testing, server-side rendering, the CLI, and build systems. Start with the Tutorials section if you are new, then move to Binding and Templating for the features used in the example above.

Plugins named in the README include validation, i18n, http, dialog and state management. Questions can go to the Aurelia Discourse forum or to Stack Overflow.

  • Overview and Tutorials: introduction and step-by-step builds.
  • Binding and Templating: the reactive binding engine and template syntax.
  • Routing, Testing and CLI: navigation, tests and project tooling.
  • Build Systems: using Webpack or JSPM without the Aurelia CLI.

Check the version before you commit

This repository is Aurelia 1, and the source's analysis notes that its last push was in January 2023. Before choosing it, look for newer Aurelia releases and confirm that the plugins and build tools you need still work with this line.

If you maintain an existing Aurelia 1 app, this package is the entry point you would expect to use. If you are starting from zero, compare it with the current Aurelia documentation first.

  • Confirm your project needs Aurelia 1 specifically.
  • Check the Discourse forum and blog for current guidance.
  • Review the MIT licence before reuse.

What people use it for

  • Building a browser form with live validation and conditional messages, as in the README's name and quest example.
  • Maintaining an existing Aurelia 1 application and keeping its core libraries in one package.
  • Composing a page from small components, each a class with a matching HTML template.
  • Adding routing, plugins for http or i18n, or a dialog to an Aurelia app using the documented modules.

Frequently asked questions

Is aurelia/framework free to use?

Yes. The README states that Aurelia is MIT licensed, and the repository's license document is named LICENSE. Check that file before reuse or redistribution.

What do I need to install aurelia/framework?

The source does not list specific prerequisites. It lists a package-manager install method and gives a git clone command. For a project setup, the README points to the Aurelia CLI.

Is aurelia/framework the same as the current Aurelia?

No. This repository is the Aurelia 1 entry point. The source notes the last push was January 2023, so check newer Aurelia versions before starting a new project.

What is the difference between Aurelia and React, Vue, Angular or Svelte?

The README does not compare Aurelia with other frameworks. It describes Aurelia's focus on web platform specifications, convention over configuration, and minimal framework intrusion. Compare these against your own project needs.

How do Aurelia components work?

Components are made of a vanilla JavaScript or TypeScript class with a matching HTML template. The template uses binding syntax such as value.bind and repeat.for to display the class's data.

Where can I get help if something breaks?

The README points to the Aurelia Discourse forum at discourse.aurelia.io, and to Stack Overflow searches for aurelia. The documentation sections on aurelia.io also cover testing and integration.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use aurelia/framework if you maintain an existing Aurelia 1 app or want a framework that stays close to web standards and imposes little structure. Pick something else if you are starting a new project that should use the current Aurelia line, or if you want the largest mainstream ecosystem, since this repository's last push was January 2023 and the README does not compare community size.

Install options & downloads