home
  • Blog
1.13
  • Getting Started
  • The Object Model
  • Templates
  • Routing
  • Components
  • Controllers
  • Models
  • Testing
  • Ember Inspector
  • Configuring Ember.js
    • Disabling Prototype Extensions
    • Embedding Applications
    • Feature Flags
  • Understanding Ember.js
  • Contributing to Ember.js
Old Guides - You are viewing the guides for Ember v1.13.0.
Go to v5.0.0

Embedding Applications

Edit pencil

In most cases, your application's entire UI will be created by templates that are managed by the router.

But what if you have an Ember.js app that you need to embed into an existing page, or run alongside other JavaScript frameworks?

Changing the Root Element

By default, your application will render the application template and attach it to the document's body element.

You can tell the application to append the application template to a different element by specifying its rootElement property:

app/app.js
export default Ember.Application.extend({
  rootElement: '#app'
});

This property can be specified as either an element or a jQuery-compatible selector string.

Disabling URL Management

You can prevent Ember from making changes to the URL by changing the router's location to none:

config/environment.js
var ENV = {
  locationType: 'none'
};
export default ENV;
left arrow
Disabling Prototype Extensions
Feature Flags
right arrow
On this page

  • Changing the Root Element
  • Disabling URL Management
Team Sponsors Security Legal Branding Community Guidelines
Twitter GitHub Discord Mastodon

If you want help you can contact us by email, open an issue, or get realtime help by joining the Ember Discord.

© Copyright 2023 - Tilde Inc.
Ember.js is free, open source and always will be.


Ember is generously supported by
blue