diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 3d26ca1f805..85fd02c80f8 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,19 +1,19 @@
-{{head-layout}}
+<HeadLayout />
 
 {{title "crates.io: Rust Package Registry" separator=' - ' prepend=true}}
-{{google-jsapi}}
+<GoogleJsapi />
 
 <nav id="header">
-  {{#link-to "index" tabindex="-1"}}
+  <LinkTo @route="index" @tabindex="-1">
     <img src="/assets/Cargo-Logo-Small.png" id="logo"
          height="100" width="100" alt="Cargo Logo">
-  {{/link-to}}
-  {{#link-to "index"}}
+  </LinkTo>
+  <LinkTo @route="index">
     <h1>
       crates.io
       <span class="subtitle">Rust Package Registry</span>
     </h1>
-  {{/link-to}}
+  </LinkTo>
 
   <form class='search' action='/search' {{ action "search" on="submit" }} data-test-search-form>
     <input type="text" class="search" name="q" id="cargo-desktop-search"
@@ -30,17 +30,17 @@
   </form>
 
   <div class='nav'>
-    {{#link-to "crates" (query-params letter=null page=1) data-test-all-crates-link}}
+    <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>
       Browse All Crates
-    {{/link-to}}
+    </LinkTo>
     <span class="sep">|</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle class="dropdown"}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle class="dropdown">
         Docs
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" id="doc-links" class="dropdown"}}
+      <RlDropdown @tagName="ul" @id="doc-links" class="dropdown">
         <li><a href='https://doc.rust-lang.org/cargo/getting-started/'>Getting Started</a></li>
         <li><a href='https://doc.rust-lang.org/cargo/guide/'>Guide</a></li>
         <li><a href='https://doc.rust-lang.org/cargo/reference/specifying-dependencies.html'>Specifying Dependencies</a></li>
@@ -53,52 +53,52 @@
         <li><a href='https://doc.rust-lang.org/cargo/reference/environment-variables.html'>Environment Variables</a></li>
         <li><a href='https://doc.rust-lang.org/cargo/reference/source-replacement.html'>Source Replacement</a></li>
         <li><a href='https://doc.rust-lang.org/cargo/reference/external-tools.html'>External Tools</a></li>
-        <li>{{#link-to 'policies'}}Policies{{/link-to}}</li>
-        <li>{{#link-to 'category-slugs'}}List of category slugs{{/link-to}}</li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+        <li><LinkTo @route="policies">Policies</LinkTo></li>
+        <li><LinkTo @route="category-slugs">List of category slugs</LinkTo></li>
+      </RlDropdown>
+    </RlDropdownContainer>
     <span class="sep">|</span>
     {{#if session.currentUser}}
-      {{#rl-dropdown-container class="dropdown-container"}}
-        {{#rl-dropdown-toggle class="dropdown"}}
-          {{user-avatar user=session.currentUser size='small'}}
+      <RlDropdownContainer class="dropdown-container">
+        <RlDropdownToggle class="dropdown">
+          <UserAvatar @user={{session.currentUser}} @size="small" />
           {{ session.currentUser.name }}
           <span class='arrow'></span>
-        {{/rl-dropdown-toggle}}
+        </RlDropdownToggle>
 
-        {{#rl-dropdown tagName="ul" class="dropdown current-user-links"}}
-          <li>{{#link-to 'dashboard'}}Dashboard{{/link-to}}</li>
-          <li>{{#link-to 'me'}}Account Settings{{/link-to}}</li>
-          <li>{{#link-to 'me.pending-invites'}}Owner Invites{{/link-to}}</li>
-          <li class='last'>{{#link-to 'logout'}}Sign Out{{/link-to}}</li>
-        {{/rl-dropdown}}
-      {{/rl-dropdown-container}}
+        <RlDropdown @tagName="ul" class="dropdown current-user-links">
+          <li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
+          <li><LinkTo @route="me">Account Settings</LinkTo></li>
+          <li><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></li>
+          <li class='last'><LinkTo @route="logout">Sign Out</LinkTo></li>
+        </RlDropdown>
+      </RlDropdownContainer>
     {{else}}
-      {{#link-to "login" data-test-login-link}}
+      <LinkTo @route="login" data-test-login-link>
         {{svg-jar "lock"}}
         Log in with GitHub
-      {{/link-to}}
+      </LinkTo>
     {{/if}}
   </div>
 
   <div class='menu'>
-    {{#rl-dropdown-container class='dropdown-container'}}
-      {{#rl-dropdown-toggle class='dropdown'}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle class="dropdown">
         Menu
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
-      {{#rl-dropdown tagName='ul' class='dropdown current-user-links'}}
-        <li>{{#link-to "crates"}}Browse All Crates{{/link-to}}</li>
+      </RlDropdownToggle>
+      <RlDropdown @tagName="ul" class="dropdown current-user-links">
+        <li><LinkTo @route="crates">Browse All Crates</LinkTo></li>
         {{#if session.currentUser}}
-          <li>{{#link-to 'dashboard'}}Dashboard{{/link-to}}</li>
-          <li>{{#link-to 'me'}}Account Settings{{/link-to}}</li>
-          <li>{{#link-to 'me.pending-invites'}}Owner Invites{{/link-to}}</li>
-          <li class='last'>{{#link-to 'logout'}}Sign Out{{/link-to}}</li>
+          <li><LinkTo @route="dashboard">Dashboard</LinkTo></li>
+          <li><LinkTo @route="me">Account Settings</LinkTo></li>
+          <li><LinkTo @route="me.pending-invites">Owner Invites</LinkTo></li>
+          <li class='last'><LinkTo @route="logout">Sign Out</LinkTo></li>
         {{else}}
-          <li>{{#link-to "login"}}Log in with GitHub{{/link-to}}</li>
+          <li><LinkTo @route="login">Log in with GitHub</LinkTo></li>
         {{/if}}
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 
   <div class='links'>
@@ -116,7 +116,7 @@
 </form>
 
 <main id="main" class='inner-content'>
-  {{flash-message}}
+  <FlashMessage />
 
   {{outlet}}
 </main>
@@ -134,7 +134,7 @@
   <span class="sep">|</span>
   <a href='https://www.rust-lang.org/policies/privacy'>Privacy notice</a>
   <span class="sep">|</span>
-  {{#link-to 'policies'}}Policies{{/link-to}}
+  <LinkTo @route="policies">Policies</LinkTo>
 </footer>
 
 <a href='https://github.com/rust-lang/crates.io' class='fork-me'>
diff --git a/app/templates/catch-all.hbs b/app/templates/catch-all.hbs
index 328486844a3..277a59b51a4 100644
--- a/app/templates/catch-all.hbs
+++ b/app/templates/catch-all.hbs
@@ -3,9 +3,12 @@
 <p id='p404'>
   Perhaps a search of the site may help?
 
-  {{input type="text" class="search"
-          placeholder="Search"
-          value=search
-          enter=(action "search")
-          required=true}}
+  <Input
+    @type="text"
+    class="search"
+    placeholder="Search"
+    @value={{search}}
+    @enter={{action "search"}}
+    required={{true}}
+  />
 </p>
diff --git a/app/templates/categories.hbs b/app/templates/categories.hbs
index 84541644726..e89957e8722 100644
--- a/app/templates/categories.hbs
+++ b/app/templates/categories.hbs
@@ -16,26 +16,26 @@
 
   <div class='sort' data-test-categories-sort>
     <span class='small'>Sort by</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params sort="alpha")}}
+          <LinkTo @query={{hash sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="crates")}}
+          <LinkTo @query={{hash sort="crates"}}>
             # Crates
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
@@ -44,7 +44,7 @@
     <div class='row' data-test-category={{category.slug}}>
       <div class='desc'>
         <div class='info'>
-          {{link-to category.category "category" category.slug}}
+          <LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo>
           <span class='small' data-test-crate-count>
             {{ pluralize (format-num category.crates_cnt) "crate" }}
           </span>
@@ -60,13 +60,13 @@
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+    <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/category/index.hbs b/app/templates/category/index.hbs
index a5dc2aa3ca0..f47c50b15cd 100644
--- a/app/templates/category/index.hbs
+++ b/app/templates/category/index.hbs
@@ -1,9 +1,9 @@
 {{ title category.category ' - Categories' }}
 
 <div id='crates-heading'>
-  {{#link-to "categories" (html-attributes aria-label="Categories")}}{{svg-jar "crate"}}{{/link-to}}
+  <LinkTo @route="categories" aria-label="Categories">{{svg-jar "crate"}}</LinkTo>
   <h1>
-    {{#each category.parent_categories as |parent|}}{{link-to parent.category "category" parent.slug}}::{{/each}}
+    {{#each category.parent_categories as |parent|}}<LinkTo @route="category" @model={{parent.slug}}>{{parent.category}}</LinkTo>::{{/each}}
     {{~ category.category }}
   </h1>
 </div>
@@ -20,7 +20,7 @@
         <div class='row'>
           <div class='desc'>
             <div class='info'>
-              {{link-to subcategory.category "category" subcategory.slug}}
+              <LinkTo @route="category" @model={{subcategory.slug}}>{{subcategory.category}}</LinkTo>
               <span class='small'>
                 {{ pluralize (format-num subcategory.crates_cnt) "crate" }}
               </span>
@@ -49,53 +49,53 @@
 
   <div class='sort' data-test-category-sort>
     <span class='small'>Sort by</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params sort="alpha")}}
+          <LinkTo @query={{hash sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="downloads")}}
+          <LinkTo @query={{hash sort="downloads"}}>
             All-Time Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="recent-downloads")}}
+          <LinkTo @query={{hash sort="recent-downloads"}}>
             Recent Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="recent-updates")}}
+          <LinkTo @query={{hash sort="recent-updates"}}>
             Recent Updates
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
 <div id='crates' class='white-rows'>
   {{#each model as |crate|}}
-    {{crate-row crate=crate}}
+    <CrateRow @crate={{crate}} />
   {{/each}}
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+    <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/components/api-token-row.hbs b/app/templates/components/api-token-row.hbs
index 03ad410e751..504824bba12 100644
--- a/app/templates/components/api-token-row.hbs
+++ b/app/templates/components/api-token-row.hbs
@@ -1,15 +1,14 @@
 <div class={{if api_token.isNew "row create-token" "row"}}>
   <div class='name'>
     {{#if api_token.isNew}}
-      {{input
-          type="text"
-          placeholder="New token name"
-          disabled=api_token.isSaving
-          value=api_token.name
-          autofocus="autofocus"
-          enter="saveToken"
-          data-test-focused-input=true
-      }}
+      <Input
+        @type="text" placeholder="New token name"
+        @disabled={{api_token.isSaving}}
+        @value={{api_token.name}}
+        @autofocus="autofocus"
+        @enter="saveToken"
+        data-test-focused-input
+      />
     {{else}}
       {{ api_token.name }}
     {{/if}}
diff --git a/app/templates/components/category-list.hbs b/app/templates/components/category-list.hbs
index d1c092b2c6d..985ab43c528 100644
--- a/app/templates/components/category-list.hbs
+++ b/app/templates/components/category-list.hbs
@@ -1,12 +1,12 @@
 <ul>
   {{#each categories as |category|}}
     <li>
-      {{#link-to 'category' category.slug class='name'}}
+      <LinkTo @route="category" @model={{category.slug}} class="name">
         <span>{{ category.category }} ({{ format-num category.crates_cnt }})</span>
         <div class='arrow-in-list'>
           {{svg-jar "right-arrow"}}
         </div>
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ul>
diff --git a/app/templates/components/crate-downloads-list.hbs b/app/templates/components/crate-downloads-list.hbs
index 69f7341e952..00c6027b1c9 100644
--- a/app/templates/components/crate-downloads-list.hbs
+++ b/app/templates/components/crate-downloads-list.hbs
@@ -1,13 +1,13 @@
 <ul>
   {{#each crates as |crate|}}
     <li>
-      {{#link-to 'crate' crate.id class='name'}}
+      <LinkTo @route="crate" @model={{crate.id}} class="name">
         {{ crate.name }} ({{ crate.max_version }})
         <div class='right'>
           {{svg-jar "download-clear-back"}}
           {{ format-num crate.downloads }}
         </div>
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ul>
diff --git a/app/templates/components/crate-list.hbs b/app/templates/components/crate-list.hbs
index 50a474d7210..471ad905ee1 100644
--- a/app/templates/components/crate-list.hbs
+++ b/app/templates/components/crate-list.hbs
@@ -1,12 +1,12 @@
 <ol>
   {{#each crates as |crate index|}}
     <li>
-      {{#link-to 'crate' crate.id class='name' data-test-crate-link=index}}
+      <LinkTo @route="crate" @model={{crate.id}} class="name" data-test-crate-link={{index}}>
         <span>{{ crate.name }} ({{ crate.max_version }})</span>
         <div class='arrow-in-list'>
           {{svg-jar "right-arrow"}}
         </div>
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ol>
diff --git a/app/templates/components/crate-row.hbs b/app/templates/components/crate-row.hbs
index 14913360f99..a3dbc2bb232 100644
--- a/app/templates/components/crate-row.hbs
+++ b/app/templates/components/crate-row.hbs
@@ -1,8 +1,8 @@
 <div class='desc'>
   <div class='info'>
-    {{#link-to 'crate' crate.id data-test-crate-link}}{{ crate.name }}{{/link-to}}
-    {{crate-toml-copy copyText=crateTomlText}}
-    {{crate-badge crate=crate}}
+    <LinkTo @route="crate" @model={{crate.id}} data-test-crate-link>{{ crate.name }}</LinkTo>
+    <CrateTomlCopy @copyText={{crateTomlText}} />
+    <CrateBadge @crate={{crate}} />
     {{#each crate.annotated_badges as |badge|}}
       {{component badge.component_name badge=badge data-test-badge=badge.badge_type}}
     {{/each}}
diff --git a/app/templates/components/crate-toml-copy.hbs b/app/templates/components/crate-toml-copy.hbs
index bce598c24ff..bf381b3cbb5 100644
--- a/app/templates/components/crate-toml-copy.hbs
+++ b/app/templates/components/crate-toml-copy.hbs
@@ -1,4 +1,4 @@
-{{#copy-button clipboardText=copyText success=(action 'copySuccess') error=(action 'copyError') title="Copy Cargo.toml snippet to clipboard"}}
+<CopyButton @clipboardText={{copyText}} @success={{action "copySuccess"}} @error={{action "copyError"}} @title="Copy Cargo.toml snippet to clipboard">
   {{svg-jar "copy" alt="Copy Cargo.toml snippet to clipboard"}}
   <div class="copy-notification {{if showSuccess "copy-success" "copy-failure"}}">
     {{#if showNotification}}
@@ -9,4 +9,4 @@
       {{/if}}
     {{/if}}
   </div>
-{{/copy-button}}
+</CopyButton>
diff --git a/app/templates/components/email-input.hbs b/app/templates/components/email-input.hbs
index 8944bd52397..6b0127d28fc 100644
--- a/app/templates/components/email-input.hbs
+++ b/app/templates/components/email-input.hbs
@@ -13,7 +13,7 @@
       <dt>Email</dt>
     </div>
     <form class='email-form' {{action 'saveEmail' on='submit'}}>
-      {{input type=type value=value placeholder='Email' class='form-control space-right'}}
+      <Input @type={{type}} @value={{value}} placeholder="Email" class="form-control space-right" />
       {{#if notValidEmail }}
         <div class='error'>
           <p class='small-text error'>Whoops, that email format is invalid</p>
diff --git a/app/templates/components/keyword-list.hbs b/app/templates/components/keyword-list.hbs
index aa9d91a5b5b..db3c832465e 100644
--- a/app/templates/components/keyword-list.hbs
+++ b/app/templates/components/keyword-list.hbs
@@ -1,12 +1,12 @@
 <ul>
   {{#each keywords as |keyword|}}
     <li>
-      {{#link-to 'keyword' keyword class='name'}}
+      <LinkTo @route="keyword" @model={{keyword}} class="name">
         <span>{{ keyword.id }} ({{ format-num keyword.crates_cnt }})</span>
         <div class='arrow-in-list'>
           {{svg-jar "right-arrow"}}
         </div>
-      {{/link-to}}
+      </LinkTo>
     </li>
   {{/each}}
 </ul>
diff --git a/app/templates/components/link-to-dep.hbs b/app/templates/components/link-to-dep.hbs
index 641b6f4a445..6f87dd048b6 100644
--- a/app/templates/components/link-to-dep.hbs
+++ b/app/templates/components/link-to-dep.hbs
@@ -1,6 +1,6 @@
-{{#link-to 'crate' dep.crate_id}}
+<LinkTo @route="crate" @model={{dep.crate_id}}>
   {{ dep.crate_id }} {{ format-req dep.req }}
-{{/link-to}}
+</LinkTo>
 {{#if dep.optional}}
   <span class='optional'>optional</span>
 {{/if}}
diff --git a/app/templates/components/owned-crate-row.hbs b/app/templates/components/owned-crate-row.hbs
index d5c1cc24e03..cf15839c470 100644
--- a/app/templates/components/owned-crate-row.hbs
+++ b/app/templates/components/owned-crate-row.hbs
@@ -1,11 +1,11 @@
-{{input
-    type="checkbox"
-    name=controlId
-    id=controlId
-    checked=emailNotifications
-    change=(action "toggleEmailNotifications")
-    class="form-control"
-  }}
+<Input
+  @type="checkbox"
+  @name={{controlId}}
+  @id={{controlId}}
+  @checked={{emailNotifications}}
+  @change={{action "toggleEmailNotifications"}}
+  class="form-control"
+/>
 <label for="{{ controlId }}">
   {{ name }}
 </label>
diff --git a/app/templates/components/pending-owner-invite-row.hbs b/app/templates/components/pending-owner-invite-row.hbs
index 10ec86830ed..76ac69d33af 100644
--- a/app/templates/components/pending-owner-invite-row.hbs
+++ b/app/templates/components/pending-owner-invite-row.hbs
@@ -2,28 +2,28 @@
   {{#if isAccepted }}
     <p>
       Success! You've been added as an owner of crate
-      {{#link-to 'crate' invite.crate_name}}{{invite.crate_name}}{{/link-to}}.
+      <LinkTo @route="crate" @model={{invite.crate_name}}>{{invite.crate_name}}</LinkTo>.
     </p>
   {{else if isDeclined}}
     <p>
       Declined. You have not been added as an owner of crate
-      {{#link-to 'crate' invite.crate_name}}{{invite.crate_name}}{{/link-to}}.
+      <LinkTo @route="crate" @model={{invite.crate_name}}>{{invite.crate_name}}</LinkTo>.
     </p>
   {{else}}
     <div class='info'>
       <div class='name'>
         <h3>
-          {{#link-to 'crate' invite.crate_name}}
+          <LinkTo @route="crate" @model={{invite.crate_name}}>
             {{invite.crate_name}}
-          {{/link-to}}
+          </LinkTo>
         </h3>
       </div>
       <div class='invite'>
         <p>
           Invited by:
-          {{#link-to 'user' invite.invited_by_username}}
+          <LinkTo @route="user" @model={{invite.invited_by_username}}>
             {{invite.invited_by_username}}
-          {{/link-to}}
+          </LinkTo>
         </p>
       </div>
       <div class='sent'>
diff --git a/app/templates/components/validated-input.hbs b/app/templates/components/validated-input.hbs
index 592e8f4887a..63efe0d5bdc 100644
--- a/app/templates/components/validated-input.hbs
+++ b/app/templates/components/validated-input.hbs
@@ -1,5 +1,5 @@
 <div class='form-group'>
-  {{input type=type value=value placeholder=placeholder class='form-control' name=valuePath}}
+  <Input @type={{type}} @value={{value}} placeholder={{placeholder}} class="form-control" @name={{valuePath}} />
   {{#if isValid}}
     <span class='valid-input fa fa-check'></span>
   {{/if}}
diff --git a/app/templates/crate/owners.hbs b/app/templates/crate/owners.hbs
index 66246307592..dfd49884e71 100644
--- a/app/templates/crate/owners.hbs
+++ b/app/templates/crate/owners.hbs
@@ -14,7 +14,7 @@
       <label class="label" for='new-owner-username'>
         Username
       </label>
-      {{input type='text' id='new-owner-username' value=username placeholder='Username' class='form-control space-right' name='username'}}
+      <Input @type="text" @id="new-owner-username" @value={{username}} placeholder="Username" class="form-control space-right" @name="username" />
 
       {{#if error}}
         <div class='error'>
@@ -47,14 +47,14 @@
   {{#each crate.owner_user as |user|}}
     <div class='crate row'>
       <div>
-        {{#link-to user.kind user.login}}
-          {{user-avatar user=user size='medium-small'}}
-        {{/link-to}}
+        <LinkTo @route={{user.kind}} @model={{user.login}}>
+          <UserAvatar @user={{user}} @size="medium-small" />
+        </LinkTo>
       </div>
       <div>
-        {{#link-to user.kind user.login}}
+        <LinkTo @route={{user.kind}} @model={{user.login}}>
           {{ user.name }}
-        {{/link-to}}
+        </LinkTo>
       </div>
       <div class='stats'>
         {{#if user.email}}
diff --git a/app/templates/crate/reverse-dependencies.hbs b/app/templates/crate/reverse-dependencies.hbs
index 157cbdfbf5d..4fe3108e1f3 100644
--- a/app/templates/crate/reverse-dependencies.hbs
+++ b/app/templates/crate/reverse-dependencies.hbs
@@ -1,5 +1,5 @@
 <div class='all-versions-back'>
-  {{#link-to 'crate' crate.id}}&#11013; Back to {{ crate.name }}{{/link-to}}
+  <LinkTo @route="crate" @model={{crate.id}}>&#11013; Back to {{ crate.name }}</LinkTo>
 </div>
 
 <div id='results'>
@@ -17,7 +17,7 @@
   {{#each model as |dependency|}}
     <div class='crate row'>
       <div>
-        {{#link-to 'crate' dependency.version.crateName}}{{dependency.version.crateName}}{{/link-to}} requires {{dependency.req}}
+        <LinkTo @route="crate" @model={{dependency.version.crateName}}>{{dependency.version.crateName}}</LinkTo> requires {{dependency.req}}
       </div>
       <div class='stats downloads'>
         {{svg-jar "download-clear-back"}}
@@ -28,15 +28,15 @@
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class='prev'}}
+  <LinkTo @query={{hash page=prevPage}} class="prev">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}
+    <LinkTo @query={{hash page=page}}>
       {{ page }}
-    {{/link-to}}
+    </LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class='next'}}
+  <LinkTo @query={{hash page=nextPage}} class="next">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/crate/version.hbs b/app/templates/crate/version.hbs
index 6003d45683a..da1cf1f90a9 100644
--- a/app/templates/crate/version.hbs
+++ b/app/templates/crate/version.hbs
@@ -43,9 +43,9 @@
         <li><a href="{{crate.repository}}">Repository</a></li>
       {{/if}}
       <li>
-        {{#link-to 'crate.reverse-dependencies' (query-params dependency=crate.crate_id) data-test-reverse-deps-link=true}}
+        <LinkTo @route="crate.reverse-dependencies" @query={{hash dependency=crate.crate_id}} data-test-reverse-deps-link>
           Dependent crates
-        {{/link-to}}
+        </LinkTo>
       </li>
     </ul>
   </div>
@@ -59,7 +59,7 @@
         may be depending on it.
       </p>
       <p>
-        You may wish to {{#link-to 'crate.versions' crate}}view all versions{{/link-to}} to find
+        You may wish to <LinkTo @route="crate.versions" @model={{crate}}>view all versions</LinkTo> to find
         one that has not been yanked.
       </p>
     {{else}}
@@ -67,12 +67,12 @@
         <div class='action'>Cargo.toml</div>
         <code id="crate-toml">{{ crateTomlText }}</code>
         {{#if (is-clipboard-supported)}}
-          {{crate-toml-copy copyText=crateTomlText}}
+          <CrateTomlCopy @copyText={{crateTomlText}} />
         {{/if}}
       </div>
       {{#if crate.readme}}
         <section class="crate-readme" aria-label="Readme">
-          {{crate-readme rendered=crate.readme}}
+          <CrateReadme @rendered={{crate.readme}} />
         </section>
       {{else}}
         {{#if crate.description}}
@@ -128,7 +128,7 @@
               <h3>Keywords</h3>
               <ul class='keywords'>
                 {{#each keywords as |keyword|}}
-                  <li>{{link-to keyword.id 'keyword' keyword}}</li>
+                  <li><LinkTo @route="keyword" @model={{keyword}}>{{keyword.id}}</LinkTo></li>
                 {{/each}}
               </ul>
             </div>
@@ -141,7 +141,7 @@
               <h3>Categories</h3>
               <ul class='categories'>
                 {{#each categories as |category|}}
-                  <li>{{link-to category.category 'category' category.slug}}</li>
+                  <li><LinkTo @route="category" @model={{category.slug}}>{{category.category}}</LinkTo></li>
                 {{/each}}
               </ul>
             </div>
@@ -153,26 +153,26 @@
 
           {{#if isOwner}}
             <p>
-              {{#link-to 'crate.owners' crate}}
+              <LinkTo @route="crate.owners" @model={{crate}}>
                 Manage owners
-              {{/link-to}}
+              </LinkTo>
             </p>
           {{/if}}
 
           <ul class='owners' data-test-owners>
             {{#each crate.owner_team as |team|}}
               <li>
-                {{#link-to team.kind team.login data-test-team-link=team.login}}
-                  {{user-avatar user=team size='medium-small'}}
-                {{/link-to}}
+                <LinkTo @route={{team.kind}} @model={{team.login}} data-test-team-link={{team.login}}>
+                  <UserAvatar @user={{team}} @size="medium-small" />
+                </LinkTo>
               </li>
             {{/each}}
 
             {{#each crate.owner_user as |user|}}
               <li>
-                {{#link-to user.kind user.login data-test-user-link=user.login}}
-                  {{user-avatar user=user size='medium-small'}}
-                {{/link-to}}
+                <LinkTo @route={{user.kind}} @model={{user.login}} data-test-user-link={{user.login}}>
+                  <UserAvatar @user={{user}} @size="medium-small" />
+                </LinkTo>
               </li>
             {{/each}}
           </ul>
@@ -183,9 +183,9 @@
           <ul>
             {{#each smallSortedVersions as |version|}}
               <li>
-                {{#link-to 'crate.version' version.num data-test-version-link=version.num}}
+                <LinkTo @route="crate.version" @model={{version.num}} data-test-version-link={{version.num}}>
                   {{ version.num }}
-                {{/link-to}}
+                </LinkTo>
                 <span class='date'>{{moment-format version.created_at 'll'}}</span>
                 {{#if version.yanked}}
                   <span class='yanked'>yanked</span>
@@ -195,9 +195,9 @@
           </ul>
           <span class='small'>
             {{#if hasMoreVersions}}
-              {{#link-to 'crate.versions' crate data-test-all-versions-link=true}}
+              <LinkTo @route="crate.versions" @model={{crate}} data-test-all-versions-link>
                 show all {{ crate.versions.length }} versions
-              {{/link-to}}
+              </LinkTo>
             {{/if}}
           </span>
         </div>
@@ -206,7 +206,7 @@
           <h3>Dependencies</h3>
           <ul>
             {{#each currentDependencies as |dep|}}
-              {{link-to-dep tagName="li" dep=dep}}
+              <LinkToDep @tagName="li" @dep={{dep}} />
             {{else}}
               {{#if (is-pending currentDependencies)}}
                 <li>Loading…</li>
@@ -222,7 +222,7 @@
             <h3>Build-Dependencies</h3>
             <ul>
               {{#each currentBuildDependencies as |dep|}}
-                {{link-to-dep tagName="li" dep=dep}}
+                <LinkToDep @tagName="li" @dep={{dep}} />
               {{/each}}
             </ul>
           </div>
@@ -233,7 +233,7 @@
             <h3>Dev-Dependencies</h3>
             <ul>
               {{#each currentDevDependencies as |dep|}}
-                {{link-to-dep tagName="li" dep=dep}}
+                <LinkToDep @tagName="li" @dep={{dep}} />
               {{/each}}
             </ul>
           </div>
@@ -264,7 +264,7 @@
     </div>
     <div class='graph'>
       <h4>Downloads over the last 90 days</h4>
-      {{download-graph data=downloadData}}
+      <DownloadGraph @data={{downloadData}} />
     </div>
   </div>
 {{/unless}}
diff --git a/app/templates/crate/versions.hbs b/app/templates/crate/versions.hbs
index fa35bc571d3..60dc6988e2a 100644
--- a/app/templates/crate/versions.hbs
+++ b/app/templates/crate/versions.hbs
@@ -1,5 +1,5 @@
 <div class='all-versions-back'>
-  {{#link-to 'crate' model}}&#11013; Back to Main Page{{/link-to}}
+  <LinkTo @route="crate" @model={{model}}>&#11013; Back to Main Page</LinkTo>
 </div>
 
 <div class='info'>
@@ -14,16 +14,16 @@
   {{#each model.versions as |version|}}
     <div class='row'>
       <div>
-        {{#link-to 'crate.version' version.num}}{{ version.num }}{{/link-to}}
+        <LinkTo @route="crate.version" @model={{version.num}}>{{ version.num }}</LinkTo>
 
         <span class='small'>{{moment-format version.created_at 'LL'}}</span>
         {{#if version.yanked}}
           <span class='yanked'>yanked</span>
         {{/if}}
       </div>
-      {{#link-to 'crate.version' version.num class='arrow'}}
+      <LinkTo @route="crate.version" @model={{version.num}} class="arrow">
         {{svg-jar "right-arrow"}}
-      {{/link-to}}
+      </LinkTo>
     </div>
   {{/each}}
 </div>
diff --git a/app/templates/crates.hbs b/app/templates/crates.hbs
index c9d2f7d77fc..110e2b5185d 100644
--- a/app/templates/crates.hbs
+++ b/app/templates/crates.hbs
@@ -12,17 +12,17 @@
 
 <div id='selection'>
   {{#each alphabet as |letter|}}
-    {{#link-to (query-params letter=letter page=1)}}
+    <LinkTo @query={{hash letter=letter page=1}}>
       {{ letter }}
-    {{/link-to}}
+    </LinkTo>
   {{/each}}
 
-  {{#x-select value=letter action=(action (mut letter)) as |xs|}}
+  <XSelect @value={{letter}} @action={{action (mut letter)}} as |xs|>
     <option>Filter by the letter...</option>
     {{#each alphabet as |letter|}}
-      {{#xs.option value=letter}}{{ letter }}{{/xs.option}}
+      <xs.option @value={{letter}}>{{ letter }}</xs.option>
     {{/each}}
-  {{/x-select}}
+  </XSelect>
 </div>
 
 <div id='results'>
@@ -37,59 +37,59 @@
   <div class='sort' data-test-crates-sort>
     <span class='small'>Sort by</span>
 
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params page=1 sort="alpha")}}
+          <LinkTo @query={{hash page=1 sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params page=1 sort="downloads")}}
+          <LinkTo @query={{hash page=1 sort="downloads"}}>
             All-Time Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params page=1 sort="recent-downloads")}}
+          <LinkTo @query={{hash page=1 sort="recent-downloads"}}>
             Recent Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params page=1 sort="recent-updates")}}
+          <LinkTo @query={{hash page=1 sort="recent-updates"}}>
             Recent Updates
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
 <div id='crates' class='white-rows'>
   {{#each model as |crate index|}}
-    {{crate-row crate=crate data-test-crate-row=index}}
+    <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
   {{/each}}
 </div>
 
 <nav class='pagination' aria-label="Pagination navigation">
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page" data-test-pagination-prev=true}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page" data-test-pagination-prev>
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   <ol>
     {{#each pages as |page|}}
       <li>
-        {{#link-to (query-params page=page) title=(concat "Go to page " page)}}
+        <LinkTo @query={{hash page=page}} @title={{concat "Go to page " page}}>
           {{ page }}
-        {{/link-to}}
+        </LinkTo>
       </li>
     {{/each}}
   </ol>
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page" data-test-pagination-next=true}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page" data-test-pagination-next>
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </nav>
diff --git a/app/templates/dashboard.hbs b/app/templates/dashboard.hbs
index 5264b55cd83..6761221d2e4 100644
--- a/app/templates/dashboard.hbs
+++ b/app/templates/dashboard.hbs
@@ -24,11 +24,11 @@
 
         {{#if hasMoreCrates}}
           <span class='small'>
-            {{link-to 'Show all' 'me.crates'}}
+            <LinkTo @route="me.crates">Show all</LinkTo>
           </span>
         {{/if}}
       </div>
-      {{crate-downloads-list crates=visibleCrates}}
+      <CrateDownloadsList @crates={{visibleCrates}} />
     </div>
     <div id='my-following'>
       <div class='header'>
@@ -39,11 +39,11 @@
 
         {{#if hasMoreFollowing}}
           <span class='small'>
-            {{link-to 'Show all' 'me.following'}}
+            <LinkTo @route="me.following">Show all</LinkTo>
           </span>
         {{/if}}
       </div>
-      {{crate-downloads-list crates=visibleFollowing}}
+      <CrateDownloadsList @crates={{visibleFollowing}} />
     </div>
   </div>
 
@@ -57,10 +57,10 @@
       {{#each myFeed as |version|}}
         <div class='row'>
           <div class='info'>
-            {{#link-to 'crate.version' version.crateName version.num}}
+            <LinkTo @route="crate.version" @models={{array version.crateName version.num}}>
               {{ version.crateName }}
               <span class='small'>{{ version.num }}</span>
-            {{/link-to}}
+            </LinkTo>
             <span class='date small'>
               {{moment-from-now version.created_at}}
             </span>
diff --git a/app/templates/data-access.hbs b/app/templates/data-access.hbs
index eb5d5ee0892..14beb51e026 100644
--- a/app/templates/data-access.hbs
+++ b/app/templates/data-access.hbs
@@ -26,7 +26,7 @@
   </li>
   <li>
     <b>Crawl the crates.io API.</b> This should be used as a last resort, and
-    doing so is subject to our {{#link-to 'policies'}}crawling policy{{/link-to}}.
+    doing so is subject to our <LinkTo @route="policies">crawling policy</LinkTo>.
     If the index and the database dumps do not satisfy your needs, we're happy to
     discuss solutions that don't require you to crawl the registry.
     You can email us at <a href="mailto:help@crates.io">help@crates.io</a>.
diff --git a/app/templates/head.hbs b/app/templates/head.hbs
index da525985c2f..2f1010578b8 100644
--- a/app/templates/head.hbs
+++ b/app/templates/head.hbs
@@ -1,2 +1,2 @@
 <title>{{ model.title }}</title>
-{{ head-tags headTags=model.headTags }}
+<HeadTags @headTags={{model.headTags}} />
diff --git a/app/templates/index.hbs b/app/templates/index.hbs
index d1e06ab38d9..1d5743516ef 100644
--- a/app/templates/index.hbs
+++ b/app/templates/index.hbs
@@ -38,26 +38,26 @@
 <div id='home-crates' class='crate-lists'>
   <section id='new-crates' data-test-new-crates aria-busy="{{dataTask.isRunning}}">
     <h2>New Crates</h2>
-    {{crate-list crates=model.new_crates}}
+    <CrateList @crates={{model.new_crates}} />
   </section>
   <section id='most-downloaded' data-test-most-downloaded aria-busy="{{dataTask.isRunning}}">
     <h2>Most Downloaded</h2>
-    {{crate-list crates=model.most_downloaded}}
+    <CrateList @crates={{model.most_downloaded}} />
   </section>
   <section id='just-updated' data-test-just-updated aria-busy="{{dataTask.isRunning}}">
     <h2>Just Updated</h2>
-    {{crate-list crates=model.just_updated}}
+    <CrateList @crates={{model.just_updated}} />
   </section>
   <section id='most-recently-downloaded' data-test-most-recently-downloaded aria-busy="{{dataTask.isRunning}}">
     <h2>Most Recent Downloads</h2>
-    {{crate-list crates=model.most_recently_downloaded}}
+    <CrateList @crates={{model.most_recently_downloaded}} />
   </section>
   <section id='keywords' data-test-keywords aria-busy="{{dataTask.isRunning}}">
-    <h2>Popular Keywords {{#link-to 'keywords'}}(see all){{/link-to}}</h2>
-    {{keyword-list keywords=model.popular_keywords}}
+    <h2>Popular Keywords <LinkTo @route="keywords">(see all)</LinkTo></h2>
+    <KeywordList @keywords={{model.popular_keywords}} />
   </section>
   <section id='categories' data-test-categories aria-busy="{{dataTask.isRunning}}">
-    <h2>Popular Categories {{#link-to 'categories'}}(see all){{/link-to}}</h2>
-    {{category-list categories=model.popular_categories}}
+    <h2>Popular Categories <LinkTo @route="categories">(see all)</LinkTo></h2>
+    <CategoryList @categories={{model.popular_categories}} />
   </section>
 </div>
diff --git a/app/templates/keyword/index.hbs b/app/templates/keyword/index.hbs
index f6a4f69f276..17c6033cb65 100644
--- a/app/templates/keyword/index.hbs
+++ b/app/templates/keyword/index.hbs
@@ -17,53 +17,53 @@
 
   <div class='sort' data-test-keyword-sort>
     <span class='small'>Sort by</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params sort="alpha")}}
+          <LinkTo @query={{hash sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="downloads")}}
+          <LinkTo @query={{hash sort="downloads"}}>
             All-Time Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="recent-downloads")}}
+          <LinkTo @query={{hash sort="recent-downloads"}}>
             Recent Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="recent-updates")}}
+          <LinkTo @query={{hash sort="recent-updates"}}>
             Recent Updates
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
 <div id='crates' class='white-rows'>
   {{#each model as |crate|}}
-    {{crate-row crate=crate}}
+    <CrateRow @crate={{crate}} />
   {{/each}}
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+    <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/keywords.hbs b/app/templates/keywords.hbs
index 3e6ec64ea9e..283e7fbea49 100644
--- a/app/templates/keywords.hbs
+++ b/app/templates/keywords.hbs
@@ -16,26 +16,26 @@
 
   <div class='sort' data-test-keywords-sort>
     <span class='small'>Sort by</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params sort="alpha")}}
+          <LinkTo @query={{hash sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="crates")}}
+          <LinkTo @query={{hash sort="crates"}}>
             # Crates
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
@@ -43,7 +43,7 @@
   {{#each model as |keyword|}}
     <div class='row'>
       <div class='info'>
-        {{link-to keyword.id "keyword" keyword}}
+        <LinkTo @route="keyword" @model={{keyword}}>{{keyword.id}}</LinkTo>
         <span class='vers small'>
           {{ pluralize (format-num keyword.crates_cnt) "crate" }}
         </span>
@@ -53,13 +53,13 @@
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+    <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/me/crates.hbs b/app/templates/me/crates.hbs
index 526b4441532..eaeb99825a0 100644
--- a/app/templates/me/crates.hbs
+++ b/app/templates/me/crates.hbs
@@ -18,53 +18,53 @@
 
   <div class='sort'>
     <span class='small'>Sort by</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown"}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown">
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params sort="alpha")}}
+          <LinkTo @query={{hash sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="downloads")}}
+          <LinkTo @query={{hash sort="downloads"}}>
             All-Time Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="recent-downloads")}}
+          <LinkTo @query={{hash sort="recent-downloads"}}>
             Recent Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="recent-updates")}}
+          <LinkTo @query={{hash sort="recent-updates"}}>
             Recent Updates
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
 <div id='crates' class='white-rows'>
   {{#each model as |crate|}}
-    {{crate-row crate=crate}}
+    <CrateRow @crate={{crate}} />
   {{/each}}
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+    <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/me/following.hbs b/app/templates/me/following.hbs
index 3ba95f6d3d6..c23421ab5e0 100644
--- a/app/templates/me/following.hbs
+++ b/app/templates/me/following.hbs
@@ -16,43 +16,43 @@
 
   <div class='sort'>
     <span class='small'>Sort by</span>
-    {{#rl-dropdown-container class="dropdown-container"}}
-      {{#rl-dropdown-toggle tagName="a" class="dropdown"}}
+    <RlDropdownContainer class="dropdown-container">
+      <RlDropdownToggle @tagName="a" class="dropdown">
         {{svg-jar "sort"}}
         {{ currentSortBy }}
         <span class='arrow'></span>
-      {{/rl-dropdown-toggle}}
+      </RlDropdownToggle>
 
-      {{#rl-dropdown tagName="ul" class="dropdown"}}
+      <RlDropdown @tagName="ul" class="dropdown">
         <li>
-          {{#link-to (query-params sort="alpha")}}
+          <LinkTo @query={{hash sort="alpha"}}>
             Alphabetical
-          {{/link-to}}
+          </LinkTo>
         </li>
         <li>
-          {{#link-to (query-params sort="downloads")}}
+          <LinkTo @query={{hash sort="downloads"}}>
             Downloads
-          {{/link-to}}
+          </LinkTo>
         </li>
-      {{/rl-dropdown}}
-    {{/rl-dropdown-container}}
+      </RlDropdown>
+    </RlDropdownContainer>
   </div>
 </div>
 
 <div id='crates' class='white-rows'>
   {{#each model as |crate|}}
-    {{crate-row crate=crate}}
+    <CrateRow @crate={{crate}} />
   {{/each}}
 </div>
 
 <div class='pagination'>
-  {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+  <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
     {{svg-jar "left-pag"}}
-  {{/link-to}}
+  </LinkTo>
   {{#each pages as |page|}}
-    {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+    <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
   {{/each}}
-  {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+  <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
     {{svg-jar "right-pag"}}
-  {{/link-to}}
+  </LinkTo>
 </div>
diff --git a/app/templates/me/index.hbs b/app/templates/me/index.hbs
index 9dd412e668c..0b3f3fb260d 100644
--- a/app/templates/me/index.hbs
+++ b/app/templates/me/index.hbs
@@ -9,7 +9,7 @@
   <h2>Profile Information</h2>
 
   <div class='info'>
-    {{#user-link user=model.user }} {{user-avatar user=model.user size='medium'}} {{/user-link}}
+    <UserLink @user={{model.user}}> <UserAvatar @user={{model.user}} @size="medium" /> </UserLink>
 
     <dl>
       <dt>Name</dt>
@@ -22,7 +22,7 @@
 
 <div id='me-email'>
   <h2>User Email</h2>
-  {{email-input type='email' value=model.user.email user=model.user}}
+  <EmailInput @type="email" @value={{model.user.email}} @user={{model.user}} />
 </div>
 
 <form id='me-email-notifications' {{ action 'saveEmailNotifications' on='submit' }} >
@@ -46,7 +46,7 @@
   <div class='row'>
     <ul>
       {{#each ownedCrates as |ownedCrate|}}
-        {{owned-crate-row ownedCrate=ownedCrate}}
+        <OwnedCrateRow @ownedCrate={{ownedCrate}} />
       {{/each}}
     </ul>
   </div>
@@ -88,7 +88,7 @@
 
   <div id='tokens'>
     {{#each sortedTokens as |api_token|}}
-      {{api-token-row api_token=api_token}}
+      <ApiTokenRow @api_token={{api_token}} />
     {{/each}}
   </div>
 </div>
diff --git a/app/templates/me/pending-invites.hbs b/app/templates/me/pending-invites.hbs
index dd30d42cb98..8748702b5b9 100644
--- a/app/templates/me/pending-invites.hbs
+++ b/app/templates/me/pending-invites.hbs
@@ -8,7 +8,7 @@
 <div id='my-invites'>
   <div class='white-rows'>
     {{#each model as |invite|}}
-      {{pending-owner-invite-row invite=invite}}
+      <PendingOwnerInviteRow @invite={{invite}} />
     {{else}}
       <p>You don't seem to have any pending invitations.</p>
     {{/each}}
diff --git a/app/templates/policies.hbs b/app/templates/policies.hbs
index 3f24f3cc560..74e0a483964 100644
--- a/app/templates/policies.hbs
+++ b/app/templates/policies.hbs
@@ -113,7 +113,7 @@
 
 <p>
   Before resorting to crawling crates.io, please read
-  {{#link-to 'data-access'}}Accessing the Crates.io Data{{/link-to}}.
+  <LinkTo @route="data-access">Accessing the Crates.io Data</LinkTo>.
 </p>
 
 <p>
diff --git a/app/templates/search.hbs b/app/templates/search.hbs
index 35ba03851b0..e6adf8160e7 100644
--- a/app/templates/search.hbs
+++ b/app/templates/search.hbs
@@ -29,36 +29,36 @@
     <div class='sort' data-test-search-sort>
       <span class='small'>Sort by </span>
 
-      {{#rl-dropdown-container class="dropdown-container"}}
-        {{#rl-dropdown-toggle tagName="a" class="dropdown" data-test-current-order=true}}
+      <RlDropdownContainer class="dropdown-container">
+        <RlDropdownToggle @tagName="a" class="dropdown" data-test-current-order>
           {{svg-jar "sort"}}
           {{ currentSortBy }}
           <span class='arrow'></span>
-        {{/rl-dropdown-toggle}}
+        </RlDropdownToggle>
 
-        {{#rl-dropdown tagName="ul" class="dropdown"}}
+        <RlDropdown @tagName="ul" class="dropdown">
           <li>
-            {{#link-to (query-params page=1 sort="relevance")}}
+            <LinkTo @query={{hash page=1 sort="relevance"}}>
               Relevance
-            {{/link-to}}
+            </LinkTo>
           </li>
           <li>
-            {{#link-to (query-params page=1 sort="downloads")}}
+            <LinkTo @query={{hash page=1 sort="downloads"}}>
               All-Time Downloads
-            {{/link-to}}
+            </LinkTo>
           </li>
           <li>
-            {{#link-to (query-params page=1 sort="recent-downloads")}}
+            <LinkTo @query={{hash page=1 sort="recent-downloads"}}>
               Recent Downloads
-            {{/link-to}}
+            </LinkTo>
           </li>
           <li>
-            {{#link-to (query-params page=1 sort="recent-updates")}}
+            <LinkTo @query={{hash page=1 sort="recent-updates"}}>
               Recent Updates
-            {{/link-to}}
+            </LinkTo>
           </li>
-        {{/rl-dropdown}}
-      {{/rl-dropdown-container}}
+        </RlDropdown>
+      </RlDropdownContainer>
     </div>
   </div>
 
@@ -66,29 +66,29 @@
     {{#each model as |crate index|}}
       {{#if crate.exact_match}}
         <div class='exact-match'>
-          {{#link-to "crate" crate}}
+          <LinkTo @route="crate" @model={{crate}}>
             <h1>Exact Match</h1>
-          {{/link-to}}
-          {{crate-row crate=crate data-test-crate-row=index}}
+          </LinkTo>
+          <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
         </div>
       {{else}}
         <div>
-          {{crate-row crate=crate data-test-crate-row=index}}
+          <CrateRow @crate={{crate}} data-test-crate-row={{index}} />
         </div>
       {{/if}}
     {{/each}}
   </div>
 
   <div class='pagination'>
-    {{#link-to (query-params page=prevPage) class='prev'}}
+    <LinkTo @query={{hash page=prevPage}} class="prev">
       {{svg-jar "left-pag"}}
-    {{/link-to}}
+    </LinkTo>
     {{#each pages as |page|}}
-      {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+      <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
     {{/each}}
-    {{#link-to (query-params page=nextPage) class='next'}}
+    <LinkTo @query={{hash page=nextPage}} class="next">
       {{svg-jar "right-pag"}}
-    {{/link-to}}
+    </LinkTo>
   </div>
 {{else}}
   <div id="no-results">
diff --git a/app/templates/team.hbs b/app/templates/team.hbs
index cddc243c0f4..98a691bb80f 100644
--- a/app/templates/team.hbs
+++ b/app/templates/team.hbs
@@ -1,7 +1,7 @@
 <div id='crates-heading' data-test-heading>
   <div class="wide">
     <div class='info'>
-      {{user-avatar user=model.team size='medium' data-test-avatar=true}}
+      <UserAvatar @user={{model.team}} @size="medium" data-test-avatar />
       <div class='team-info'>
         <h1 data-test-org-name>
           {{ model.team.org_name }}
@@ -10,9 +10,9 @@
           {{ model.team.name }}
         </h2>
       </div>
-      {{#user-link user=model.team data-test-github-link=true}}
+      <UserLink @user={{model.team}} data-test-github-link>
         <img alt="GitHub profile" title="GitHub profile" src="/assets/GitHub-Mark.svg">
-      {{/user-link}}
+      </UserLink>
     </div>
   </div>
 </div>
@@ -32,55 +32,55 @@
 
       <div class='sort'>
         <span class='small'>Sort by</span>
-        {{#rl-dropdown-container class="dropdown-container"}}
-          {{#rl-dropdown-toggle tagName="a" class="dropdown"}}
+        <RlDropdownContainer class="dropdown-container">
+          <RlDropdownToggle @tagName="a" class="dropdown">
             {{svg-jar "sort"}}
             {{ currentSortBy }}
             <span class='arrow'></span>
-          {{/rl-dropdown-toggle}}
+          </RlDropdownToggle>
 
-          {{#rl-dropdown tagName="ul" class="dropdown"}}
+          <RlDropdown @tagName="ul" class="dropdown">
             <li>
-              {{#link-to (query-params sort="alpha")}}
+              <LinkTo @query={{hash sort="alpha"}}>
                 Alphabetical
-              {{/link-to}}
+              </LinkTo>
             </li>
             <li>
-              {{#link-to (query-params sort="downloads")}}
+              <LinkTo @query={{hash sort="downloads"}}>
                 All-Time Downloads
-              {{/link-to}}
+              </LinkTo>
             </li>
             <li>
-              {{#link-to (query-params sort="recent-downloads")}}
+              <LinkTo @query={{hash sort="recent-downloads"}}>
                 Recent Downloads
-              {{/link-to}}
+              </LinkTo>
             </li>
             <li>
-              {{#link-to (query-params sort="recent-updates")}}
+              <LinkTo @query={{hash sort="recent-updates"}}>
                 Recent Updates
-              {{/link-to}}
+              </LinkTo>
             </li>
-          {{/rl-dropdown}}
-        {{/rl-dropdown-container}}
+          </RlDropdown>
+        </RlDropdownContainer>
       </div>
     </div>
 
     <div id='crates' class='white-rows'>
       {{#each model.crates as |crate|}}
-        {{crate-row crate=crate}}
+        <CrateRow @crate={{crate}} />
       {{/each}}
     </div>
 
     <div class='pagination'>
-      {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+      <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
         {{svg-jar "left-pag"}}
-      {{/link-to}}
+      </LinkTo>
       {{#each pages as |page|}}
-        {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+        <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
       {{/each}}
-      {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+      <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
         {{svg-jar "right-pag"}}
-      {{/link-to}}
+      </LinkTo>
     </div>
   </div>
 </div>
diff --git a/app/templates/user.hbs b/app/templates/user.hbs
index b61f30f6e0c..953065b2ead 100644
--- a/app/templates/user.hbs
+++ b/app/templates/user.hbs
@@ -1,11 +1,11 @@
 <div id='crates-heading' data-test-heading>
-  {{user-avatar user=model.user size='medium' data-test-avatar=true}}
+  <UserAvatar @user={{model.user}} @size="medium" data-test-avatar />
   <h1 data-test-username>
     {{ model.user.login }}
   </h1>
-  {{#user-link user=model.user data-test-user-link=true}}
+  <UserLink @user={{model.user}} data-test-user-link>
     <img alt="GitHub profile" title="GitHub profile" src="/assets/GitHub-Mark.svg">
-  {{/user-link}}
+  </UserLink>
 </div>
 
 <div id='user-profile'>
@@ -23,55 +23,55 @@
 
       <div class='sort'>
         <span class='small'>Sort by</span>
-        {{#rl-dropdown-container class="dropdown-container"}}
-          {{#rl-dropdown-toggle tagName="a" class="dropdown"}}
+        <RlDropdownContainer class="dropdown-container">
+          <RlDropdownToggle @tagName="a" class="dropdown">
             {{svg-jar "sort"}}
             {{ currentSortBy }}
             <span class='arrow'></span>
-          {{/rl-dropdown-toggle}}
+          </RlDropdownToggle>
 
-          {{#rl-dropdown tagName="ul" class="dropdown"}}
+          <RlDropdown @tagName="ul" class="dropdown">
             <li>
-              {{#link-to (query-params sort="alpha")}}
+              <LinkTo @query={{hash sort="alpha"}}>
                 Alphabetical
-              {{/link-to}}
+              </LinkTo>
             </li>
             <li>
-              {{#link-to (query-params sort="downloads")}}
+              <LinkTo @query={{hash sort="downloads"}}>
                 All-Time Downloads
-              {{/link-to}}
+              </LinkTo>
             </li>
             <li>
-              {{#link-to (query-params sort="recent-downloads")}}
+              <LinkTo @query={{hash sort="recent-downloads"}}>
                 Recent Downloads
-              {{/link-to}}
+              </LinkTo>
             </li>
             <li>
-              {{#link-to (query-params sort="recent-updates")}}
+              <LinkTo @query={{hash sort="recent-updates"}}>
                 Recent Updates
-              {{/link-to}}
+              </LinkTo>
             </li>
-          {{/rl-dropdown}}
-        {{/rl-dropdown-container}}
+          </RlDropdown>
+        </RlDropdownContainer>
       </div>
     </div>
 
     <div id='crates' class='white-rows'>
       {{#each model.crates as |crate|}}
-        {{crate-row crate=crate}}
+        <CrateRow @crate={{crate}} />
       {{/each}}
     </div>
 
     <div class='pagination'>
-      {{#link-to (query-params page=prevPage) class="prev" rel="prev" title="previous page"}}
+      <LinkTo @query={{hash page=prevPage}} class="prev" @rel="prev" @title="previous page">
         {{svg-jar "left-pag"}}
-      {{/link-to}}
+      </LinkTo>
       {{#each pages as |page|}}
-        {{#link-to (query-params page=page)}}{{ page }}{{/link-to}}
+        <LinkTo @query={{hash page=page}}>{{ page }}</LinkTo>
       {{/each}}
-      {{#link-to (query-params page=nextPage) class="next" rel="next" title="next page"}}
+      <LinkTo @query={{hash page=nextPage}} class="next" @rel="next" @title="next page">
         {{svg-jar "right-pag"}}
-      {{/link-to}}
+      </LinkTo>
     </div>
   </div>
 </div>