Support Ukraine Black Lives Matter

A framework for ambitious
web developers.

Ember.js is a productive, battle-tested JavaScript framework for building modern web applications. It includes everything you need to build rich UIs that work on any device.

Read the Tutorial

Build with the teams that never stop shipping.

Some of the best development teams in the world have been iterating on their products for years with Ember. With scalable UI architecture baked-in from the start, you'll be working with the same patterns these organizations use every step of the way.

It's time to start building from the 20th floor.

Netflix, Intercom, Microsoft, Square, CrowdStrike, Apple, LinkedIn, Heroku

Components embrace HTML

Ember components are a superset of HTML - that means <p>Hello World</p> is a fully-fledged Ember Component. Simply wrap your HTML with a <template> tag to make it a reusable component.

Code

<template>
  <p>Hello, World!</p>
</template>

Result

Hello, World!

Simple composability

Ember components accept arguments to make them dynamic. To pass data into components, use the @ symbol along with an argument name.

Code

const Welcome = <template>
  <p>Hello, {{@name}}!</p>
</template>;

<template>
  <Welcome @name="Ember" />
  <p>Components can easily be reused 🚀</p>
</template>

Result

Hello, Ember!

Components can easily be reused 🚀

Delightful reactivity

State can be added to Ember components progressively by wrapping the template in a JavaScript class. The component will automatically rerender when a property decorated with @tracked is changed.

Code

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { on } from '@ember/modifier';

export default class Counter extends Component {
  @tracked count = 0;

  add = () => this.count += 1;

  <template>
    <p>You have clicked {{this.count}} times.</p>
    <button {{on "click" this.add}}>Click</button>
  </template>
}

Result

You have clicked 0 times.

The code examples above use the Template Tag format. It is a powerful, new way to write components in Ember as a single-file format that combines the JavaScript and Glimmer template code. The format is part of the Ember Polaris edition.

Batteries are included

Ember’s out-of-the-box experience has everything you need to start building on day one and keep shipping for years. Benefit from our years of experience to help your team be productive—faster. You'll never have to wire together your own framework ever again!

Build pipeline

Ember CLI is the backbone of modern Ember apps, providing code generators to create new entities and putting the necessary files in the right place, every time. Ember apps come with a built-in development environment with fast rebuilds, auto-reload, and a test runner!

Ready to deploy? That's easy, too! build your app for production with a single command.

Routing

The URL has always been one of the major strengths of the web, and Ember apps respect that. Ember's built-in router is a best-in-class solution that incorporates async data loading with dynamic url segments and query parameters. The Ember router seamlessly supports nested urls with incremental data fetching, nested loading, and error substates.

Data layer

While you can use any data layer for your app, every new Ember app includes a fully-featured data access library called Ember Data.

Ember Data allows you to access data across multiple sources at once, setup asynchronous relationships, and keep models up-to-date across your app.

Testing

Enjoy a fully-featured, modern test harness built into every application by default. Every time an entity is generated in an Ember app, tests are also generated for that same entity. Ember apps support three levels of testing that are handy for testing everything from individual components to acceptance tests that can boot your whole app and interact with it to verify everything is working as it should be.

Tests are also run in the browser, providing that extra peace of mind.

Performance

Ember is built on the Glimmer rendering engine, one of the fastest rendering technologies on the market today, thanks to the way it compiles templates down to a highly-performant virtual machine.

Due to our holistic performance approach, performance upgrades are often free with version upgrades— no extra work necessary!

Easy upgrades

Ember follows a 6-week release cycle, releasing a new minor version every 6 weeks. With a strong commitment to stability, upgrades between minor versions are straightforward and fast. The well-thought-out deprecation mechanism that gives you ample warning of code that would need to change in the next major version, and deprecated or upgraded features often come with codemods that can be run to automatically update your codebase.

If you do happen to get stuck, our friendly community is ready and willing to help!

The Ember Ecosystem

There's never been a better time to be a JavaScript developer, and Ember embraces everything that modern JS has to offer. When you're ready for more, choose from hundreds of high-quality, curated community Ember Addons to super-power your application.

Use the modern JavaScript you know and love

ES6 classes, fat arrow functions, even decorators- it's easy to use the latest and greatest JavaScript features in your app, zero configuration required. Love TypeScript? We've got great support for that too! And tools like Prettier pair perfectly with your Ember app's JavaScript code.

Ember Concurrency is an Ember addon that makes state management a whole lot easier with useful primitives.

Read the docs: http://ember-concurrency.com/

Easy installation: 

> ember install ember-concurrency

Meet Addons: high-quality, curated npm packages that supercharge your app

While Ember CLI makes it easy to add any third-party node module, Ember Addons provide capabilities that go way beyond your typical npm package.

By hooking into Ember CLI's standardized tooling, Addons can modify your app's build steps, help you out with deployment, inline images and more.

With all this power wrapped up into a single install command, and no additional build tool or configuration required, you'll wonder how you could ever go back to wiring up dependencies on your own again.

https://emberobserver.com

Ember Observer: your dependency co-pilot

Tired of wondering if your project's next dependency is well-maintained? Have you ever had to make a choice between multiple packages with no clear guidance about which one's better?

With Ember Observer, you'll never have to assess the quality of your project's dependencies on your own. Up-to-date rankings make it easy to see an addon's position within the community. Metrics like great documentation, recent releases and automated tests across multiple Ember versions mean you can be confident that your next dependency won't become a liability.

A vibrant, welcoming community

Ember's first commit was in 2011, but today our community is more active than ever. Whether it's one of our annual conferences, dozens of Meetup groups, or initiatives like Women Helping Women, we're always working hard to foster a friendly, professional, and welcoming environment for our developers.

Ember core team members gather around the Ember sign at EmberConf
Learn about EmberConf Ember Meetups

Our official communication channels to get in touch with the community

Beyond our official core online channels, you can dig deeper with these additional learning resources from enthusiastic members of our welcoming community!

Looking for your next job? Community members have put together a dedicated platform for matching Ember job seekers with Ember job opportunities.

  • EMBERWORK - jobs board

    Find all the Ember job offers in one single place; a dedicated platform for Ember jobs, curated by community members.

Start shipping today!

If you're ready to dive in, the Quickstart is the fastest way to get going with Ember.js. Are you new to web development or a recent bootcamp grad? The Intro tutorial is a great place to start.

Quickstart Ready to use Ember?

  • Read the Guides

    If you're familiar with JavaScript and web application development, our Guides will teach you everything you need to know to get started building with Ember.

  • Read Our Blog

    Find out about the newest releases and latest work happening in the ecosystem by visiting the official Ember Blog.