diff --git a/cypress/integration/search-ui.spec.js b/cypress/integration/search-ui.spec.js
index 4bba28aa..ce9300ef 100644
--- a/cypress/integration/search-ui.spec.js
+++ b/cypress/integration/search-ui.spec.js
@@ -42,6 +42,20 @@ describe(`${playground} playground test`, () => {
     cy.get(HIT_ITEM_CLASS).eq(0).contains('9.99 $')
   })
 
+  it('Sort by recommendationCound ascending', () => {
+    const select = `.ais-SortBy-select`
+    cy.get(select).select('steam-video-games:recommendationCount:asc')
+    cy.wait(1000)
+    cy.get(HIT_ITEM_CLASS).eq(0).contains('Rag Doll Kung Fu')
+  })
+
+  it('Sort by default relevancy', () => {
+    const select = `.ais-SortBy-select`
+    cy.get(select).select('steam-video-games')
+    cy.wait(1000)
+    cy.get(HIT_ITEM_CLASS).eq(0).contains('Counter-Strike')
+  })
+
   it('click on facets', () => {
     const checkbox = `.ais-RefinementList-list .ais-RefinementList-checkbox`
     cy.get(checkbox).eq(1).click()
diff --git a/package.json b/package.json
index ec0b95aa..080e855e 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "test:e2e:all": "sh scripts/e2e.sh",
     "test:e2e:watch": "concurrently --kill-others -s first \"NODE_ENV=test yarn playground:javascript\" \"cypress open --env playground=javascript\"",
     "test:all": "yarn test:e2e:all && yarn test && test:build",
+    "cy:open": "cypress open",
     "playground:vue": "yarn --cwd ./playgrounds/vue && yarn --cwd ./playgrounds/vue serve",
     "playground:react": "yarn --cwd ./playgrounds/react && yarn --cwd ./playgrounds/react start",
     "playground:javascript": "yarn --cwd ./playgrounds/javascript && yarn --cwd ./playgrounds/javascript start",
diff --git a/playgrounds/angular/src/app/app.component.html b/playgrounds/angular/src/app/app.component.html
index 3ea37be5..4f62caa7 100644
--- a/playgrounds/angular/src/app/app.component.html
+++ b/playgrounds/angular/src/app/app.component.html
@@ -10,6 +10,19 @@ <h1 class="header-title">MeiliSearch + Angular InstantSearch</h1>
     <div class="search-panel">
       <div class="search-panel__filters">
         <ais-clear-refinements></ais-clear-refinements>
+        <ais-sort-by
+          [items]="[
+          { value: 'steam-video-games', label: 'Relevant' },
+          {
+            value: 'steam-video-games:recommendationCount:desc',
+            label: 'Most Recommended'
+          },
+          {
+            value: 'steam-video-games:recommendationCount:asc',
+            label: 'Least Recommended'
+          }
+          ]"
+        ></ais-sort-by>
         <ais-configure [searchParameters]="{ hitsPerPage: 6 }"></ais-configure>
         <h2>Genres</h2>
         <ais-refinement-list attribute="genres" ></ais-refinement-list>
@@ -40,8 +53,9 @@ <h2>Misc</h2>
                 <div class="hit-description">
                   <ais-highlight attribute="description" [hit]="hit"></ais-highlight>
                 </div>
-                <div class="hit-info">${{hit.price}}</div>
-                <div class="hit-info">{{hit.releaseDate}}</div>
+                <div class="hit-info">price: ${{hit.price}}</div>
+                <div class="hit-info">Release date: {{hit.releaseDate}}</div>
+                <div class="hit-info">Recommendation: {{hit.recommendationCount}}</div>
               </li>
             </ol>
           </ng-template>
diff --git a/playgrounds/angular/src/app/app.component.ts b/playgrounds/angular/src/app/app.component.ts
index 58310951..054ddbad 100644
--- a/playgrounds/angular/src/app/app.component.ts
+++ b/playgrounds/angular/src/app/app.component.ts
@@ -2,8 +2,8 @@ import { Component } from '@angular/core'
 import { instantMeiliSearch } from '../../../../src'
 
 const searchClient = instantMeiliSearch(
-  'https://ms-9060336c1f95-106.saas.meili.dev',
-  '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66'
+  'https://demo-steam.meilisearch.com/',
+  '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c'
 )
 
 @Component({
diff --git a/playgrounds/html/public/index.html b/playgrounds/html/public/index.html
index 894e4ce1..4e535289 100644
--- a/playgrounds/html/public/index.html
+++ b/playgrounds/html/public/index.html
@@ -25,10 +25,10 @@
       const search = instantsearch({
           indexName: "steam-video-games",
           searchClient: instantMeiliSearch(
-            'https://ms-9060336c1f95-106.saas.meili.dev',
-            '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
+            'https://demo-steam.meilisearch.com',
+            '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
           )
-          });
+      });
       search.addWidgets([
         instantsearch.widgets.searchBox({
             container: "#searchbox",
diff --git a/playgrounds/javascript/index.html b/playgrounds/javascript/index.html
index 547eda71..474a85d1 100644
--- a/playgrounds/javascript/index.html
+++ b/playgrounds/javascript/index.html
@@ -29,7 +29,7 @@ <h2>Search in Steam video games 🎮</h2>
 
       <div class="left-panel">
         <div id="clear-refinements"></div>
-
+        <div id="sort-by"></div>
         <h2>Genres</h2>
         <div id="genres-list"></div>
         <h2>Players</h2>
diff --git a/playgrounds/javascript/src/app.js b/playgrounds/javascript/src/app.js
index 739f77c6..9d01f27f 100644
--- a/playgrounds/javascript/src/app.js
+++ b/playgrounds/javascript/src/app.js
@@ -3,8 +3,8 @@ import { instantMeiliSearch } from '../../../src/index'
 const search = instantsearch({
   indexName: 'steam-video-games',
   searchClient: instantMeiliSearch(
-    'https://ms-9060336c1f95-106.saas.meili.dev',
-    '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
+    'https://demo-steam.meilisearch.com',
+    '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
     {
       limitPerRequest: 30,
     }
@@ -12,6 +12,20 @@ const search = instantsearch({
 })
 
 search.addWidgets([
+  instantsearch.widgets.sortBy({
+    container: '#sort-by',
+    items: [
+      { value: 'steam-video-games', label: 'Relevant' },
+      {
+        value: 'steam-video-games:recommendationCount:desc',
+        label: 'Most Recommended',
+      },
+      {
+        value: 'steam-video-games:recommendationCount:asc',
+        label: 'Least Recommended',
+      },
+    ],
+  }),
   instantsearch.widgets.searchBox({
     container: '#searchbox',
   }),
@@ -32,6 +46,7 @@ search.addWidgets([
   }),
   instantsearch.widgets.configure({
     hitsPerPage: 6,
+    attributesToSnippet: ['description:150'],
   }),
   instantsearch.widgets.refinementList({
     container: '#misc-list',
@@ -51,6 +66,7 @@ search.addWidgets([
           </div>
           <div class="hit-info">price: {{price}}</div>
           <div class="hit-info">release date: {{releaseDate}}</div>
+          <div class="hit-info">Recommendation: {{recommendationCount}}</div>
         </div>
       `,
     },
diff --git a/playgrounds/react/src/App.js b/playgrounds/react/src/App.js
index 5b538aff..0d5cd59e 100644
--- a/playgrounds/react/src/App.js
+++ b/playgrounds/react/src/App.js
@@ -9,13 +9,16 @@ import {
   ClearRefinements,
   RefinementList,
   Configure,
+  SortBy,
+  Snippet,
 } from 'react-instantsearch-dom'
+
 import './App.css'
 import { instantMeiliSearch } from '../../../src/index'
 
 const searchClient = instantMeiliSearch(
-  'https://ms-9060336c1f95-106.saas.meili.dev',
-  '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66',
+  'https://demo-steam.meilisearch.com/',
+  '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c',
   {
     paginationTotalHits: 60,
     primaryKey: 'id',
@@ -39,6 +42,20 @@ const App = () => (
       <Stats />
       <div className="left-panel">
         <ClearRefinements />
+        <SortBy
+          defaultRefinement="steam-video-games"
+          items={[
+            { value: 'steam-video-games', label: 'Relevant' },
+            {
+              value: 'steam-video-games:recommendationCount:desc',
+              label: 'Most Recommended',
+            },
+            {
+              value: 'steam-video-games:recommendationCount:asc',
+              label: 'Least Recommended',
+            },
+          ]}
+        />
         <h2>Genres</h2>
         <RefinementList attribute="genres" />
         <h2>Players</h2>
@@ -47,7 +64,11 @@ const App = () => (
         <RefinementList attribute="platforms" />
         <h2>Misc</h2>
         <RefinementList attribute="misc" />
-        <Configure hitsPerPage={6} />
+        <Configure
+          hitsPerPage={6}
+          attributesToSnippet={['description:50']}
+          snippetEllipsisText={'...'}
+        />
       </div>
       <div className="right-panel">
         <SearchBox />
@@ -57,18 +78,27 @@ const App = () => (
   </div>
 )
 
-const Hit = ({ hit }) => (
-  <div key={hit.id}>
-    <div className="hit-name">
-      <Highlight attribute="name" hit={hit} />
-    </div>
-    <img src={hit.image} align="left" alt={hit.name} />
-    <div className="hit-name">
-      <Highlight attribute="description" hit={hit} />
+const Hit = ({ hit }) => {
+  return (
+    <div key={hit.id}>
+      <div className="hit-name">
+        <Highlight attribute="name" hit={hit} />
+      </div>
+      <img src={hit.image} align="left" alt={hit.name} />
+      <div className="hit-name">
+        <Snippet attribute="description" hit={hit} />
+      </div>
+      <div className="hit-info">
+        <b>price:</b> {hit.price}
+      </div>
+      <div className="hit-info">
+        <b>release date:</b> {hit.releaseDate}
+      </div>
+      <div className="hit-info">
+        <b>Recommended:</b> {hit.recommendationCount}
+      </div>
     </div>
-    <div className="hit-info">price: {hit.price}</div>
-    <div className="hit-info">release date: {hit.releaseDate}</div>
-  </div>
-)
+  )
+}
 
 export default App
diff --git a/playgrounds/vue/src/App.vue b/playgrounds/vue/src/App.vue
index 589019c7..949fa0ac 100644
--- a/playgrounds/vue/src/App.vue
+++ b/playgrounds/vue/src/App.vue
@@ -17,6 +17,19 @@
           <ais-clear-refinements>
             <span slot="resetLabel">Clear all filters</span>
           </ais-clear-refinements>
+          <ais-sort-by
+            :items="[
+              { value: 'steam-video-games', label: 'Relevant' },
+              {
+                value: 'steam-video-games:recommendationCount:desc',
+                label: 'Most Recommended',
+              },
+              {
+                value: 'steam-video-games:recommendationCount:asc',
+                label: 'Least Recommended',
+              },
+            ]"
+          />
           <h2>Genres</h2>
           <ais-refinement-list attribute="genres" />
           <h2>Players</h2>
@@ -40,8 +53,11 @@
                 <div class="hit-description">
                   <ais-snippet :hit="item" attribute="description" />
                 </div>
-                <div class="hit-info">price: {{ item.price }}</div>
-                <div class="hit-info">release date: {{ item.releaseDate }}</div>
+                <div class="hit-info">Price: {{ item.price }}</div>
+                <div class="hit-info">Release date: {{ item.releaseDate }}</div>
+                <div class="hit-info">
+                  Recommended: {{ item.recommendationCount }}
+                </div>
               </div>
             </template>
           </ais-hits>
@@ -66,12 +82,21 @@ import { instantMeiliSearch } from '../../../src/index'
 export default {
   data() {
     return {
+      recommendation: '',
       searchClient: instantMeiliSearch(
-        'https://ms-9060336c1f95-106.saas.meili.dev',
-        '5d7e1929728417466fd5a82da5a28beb540d3e5bbaf4e01f742e1fb5fd72bb66'
+        'https://demo-steam.meilisearch.com',
+        '90b03f9c47d0f321afae5ae4c4e4f184f53372a2953ab77bca679ff447ecc15c'
       ),
     }
   },
+  methods: {
+    order: function (event, searchParameters, refine) {
+      refine({
+        ...searchParameters,
+        sort: this.recommendation,
+      })
+    },
+  },
 }
 </script>