Ember.js Cheat Sheet

A reference for Ember's CLI commands, Glimmer components, tracked properties, and route/model conventions for building web apps.

2 PagesIntermediateMar 12, 2026

Ember CLI Commands

Scaffolding and running an Ember application.

bash

ember new my-appember generate component my-component   # shorthand: ember g component my-componentember generate route posts              # shorthand: ember g route postsember serveember build --environment=productionember test

Glimmer Component

The modern component class using tracked properties and actions.

javascript

// app/components/counter.jsimport Component from '@glimmer/component';import { tracked } from '@glimmer/tracking';import { action } from '@ember/object';export default class CounterComponent extends Component {  @tracked count = 0;  @action  increment() {    this.count++;  }}/* app/components/counter.hbs<button {{on "click" this.increment}}>  Count: {{this.count}}</button>*/

Core Concepts

The conventions and building blocks Ember apps rely on.

@tracked- decorator marking a property as reactive; templates auto-update when it changes
@action- decorator that binds 'this' correctly for a method used as a template event handler
Ember Data- the built-in ORM-like library for modeling, fetching, and caching API records
Route- defines what model to load and which template to render for a URL
{{outlet}}- template placeholder where a route's nested child template renders
Glimmer components- the modern lightweight component class, replacing classic Ember components
Ember CLI- the official build tool and scaffolding CLI (ember generate, ember serve, ember build)

Routes & Models

Mapping URLs to routes and loading data for them.

javascript

// app/router.jsRouter.map(function () {  this.route('posts', function () {    this.route('show', { path: '/:post_id' });  });});// app/routes/posts/show.jsimport Route from '@ember/routing/route';export default class PostsShowRoute extends Route {  model(params) {    return this.store.findRecord('post', params.post_id);  }}

Pro Tip

Ember favors convention over configuration -- file location determines behavior (app/routes/posts/show.js maps to the posts.show route), so learning the folder conventions is more valuable than memorizing individual APIs.

Was this cheat sheet helpful?

SolidJS Cheat Sheet

Backbone.js Cheat Sheet