To install ember-tml, please run following command from within application folder:

ember install ember-tml  


To complete configuration please copy your project key and token inside tml initialization script inside Ember ENV dictionary under config/environment.js

// config/environment.js
module.exports = function(environment) {  
  var ENV = {
    tml: {
      key: "YOUR_PROJECT_KEY"

Content Security Policy

For content security policy, you'll need to add the translationexchange domain to allow loading of remote scripts.

In config/environment.js, add this to the ENV hash (modify as necessary):

// config/environment.js
contentSecurityPolicy: {  
  'default-src': "'none'",
  'script-src': "'self' *.translationexchange.com",
  'font-src': "'self'",
  'connect-src': "'self' *.translationexchange.com",
  'frame-src': "'self' *.translationexchange.com",
  'img-src': "'self' *",
  'style-src': "'self' 'unsafe-inline' *.translationexchange.com",
  'media-src': "'self' *"


Above steps complete setup of TML, to start wrapping application text Ember TML provides a few helpers.

{{tr}} Helper

tr is the basic translate function, it takes 3 parameters:

  • label is only required parameter
  • description optional parameter but very useful to provide description for phrase
  • tokens is an optional parameter that contains a hash of token values to be substituted in the label.

Here is an example on how tr helper function should be used in template files

<div>{{tr "Hello World" }}</div>  
<div>{{tr "Invite" "Link to invite your friends"}}</div>  
<div>{{tr "Welcome {user}!" user=userName}}</div>  
<div>{{tr "You have {count || message}" count=1}}</div>  
<div>{{tr "You have {count || message}" count=5}}</div>  
{{trl}} Helper

trl works the same as tr but should be used for attribute values.

<img src="..." title={{trl "Hello World"}} />  
{{input placeholder=(trl "Enter email address")}}

You can find more information about TML and it's usage at TML Sample Document

Language Selector