Documentation Index

User interface

Web Maker's user interface is made to feel simple and accessible so that you have all the required things at your tips and still doesn't look cluttered for someone using it for first time.

Code Panes

Code panes are the actually sections where you write your code. You get 3 panes, one for HTML, CSS & JavaScript each.


Alongside the code panes, is a white (by default) area where you see the preview of your code. Its an iframe that is feeded your HTML, CSS & JavaScript as you type to generate realtime preview.


On the top-left side you can see the title of your creation. Click on it to edit it anytime.

Create New, Save or Open a creation

On the top-right side, you have the 3 buttons to create a new creation or save an open one. Also you can access all your saved creations from the Saved Creations Pane by clicking the Open button.

From the Saved Creations Pane you can also export or import all your creations at once. Exporting generates a JSON file which you can backup in your Google Drive, Dropbox etc.


On the bottom right-most end you can access the app settings. Lots and lots of useful settings in there. To know in details about settings, jump right here.


Besides the Settings button, is the Changelog button where you can read all the changes in the app for each release version.


Next you have some layout options to choose from. Select whats suits you best. This setting is saved per creation basis, so each of your creation can show in a different layout that you see best for it.

Download/Share creation

Web Maker gives you quite some options to export your current creation to share with the world. You can save it as a single HTML file to upload it on a server, or open it in CodePen or take a screenshot of your preview.

Export/Import creations

Read blog post about exporting & importing your creations.

Help and Share

On the bottom-left side are few help options, one of which shows you all th keyboard shortcuts available inside the app. Also there is a tweet button you can use to share Web Maker with everyone :)

Documentation Index

Web Maker needs the following permissions to work with full capabilities. In words of Chrome extensions:

Read & change all your data on the websites that you visit - Worry not. This is just required for the new tab replacement feature where Web Maker shows up only if the new tab url is chrome://newtab/. Nothing is read, stored or changed.


Web Maker does not track any user specific data. It uses Google Analytics to track aggregated events to improve user experience based on what features are used more. If still you want to opt-out of Google Analytics tracking, please visit or you can set up a filter in Adblock Plus or similar ad blocker tools like AdBlock, uBlock or Adblock Pro.