Load a Demo Adaptive.js Site

Experience Adaptive.js in action in 5 minutes!

Once you install our SDK, quickly load and view a sample adaptation of a mock e-commerce desktop site in your browser.

Load the demo Adaptive.js project.


1. Merlin's Potions website

1. Go to Merlin's Potions at

2. To see the HTML of this site, right-click on a blank spot on the page and select the "View Page Source" menu option.

See that the Mobify tag at the top of the <head> section of the HTML:

        <script type="text/javascript">
  <!-- END MOBIFY -->

The Mobify Tag The Mobify tag is JavaScript that tells your browser whether to load the mobile adaptation of the site or to default to the desktop version.

2. Load the Adaptive.js Mobile Version of Merlin's Potions

This is a completed adaptation of the Merlin's Potions site. This ZIP file contains the complete codebase of the sample Adaptive.js project.

Download the Sample Code

3. View the Mobile Version of Merlin's Potions

1. Unzip the file.

You now have a workshop--adaptivejs-site-completed-workshop folder.

2. Open a new Terminal (Mac) or Command Prompt (Windows).

3. To change directories to your project folder, enter the following command on the command line:

cd path/to/workshop--adaptivejs-site-completed-workshop

Ensure that you replace the path/to portion with your directory path that contains the workshop--adaptivejs-site-completed-workshop folder.

4. To preview the demo mobile site in your browser, enter the following command:

grunt preview --auto=true

5. On the Mobify Preview page, click the "Preview" button.

Adjust the size of your browser to simulate a mobile device.

Simulate a Mobile Device View in Chrome Chrome is Mobify's preferred browser. Follow the steps on the official Chrome documentation site to preview your site in device mode.

Explore the directory structure and contents of your demo project.

To learn more about how Adaptive.js works, watch the videos in the Overview section.

Go on to Create a New Project from your own desktop site, or contact us to build your own Merlin's Potions Adaptive.js project.

Edit in GitHub