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.
- Install the Adaptive.js SDK.
1. Merlin's Potions website
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:
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.
3. View the Mobile Version of Merlin's Potions
1. Unzip the
You now have a
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:
Ensure that you replace the
path/to portion with your directory path that contains the
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.Edit in GitHub