Features

Editing & preview #

  • Live preview as you type — no save, no refresh
  • Three-pane editor for HTML, CSS and JS, plus a Files mode with a real folder structure
  • Six layouts including a tabbed-editor layout
  • Inbuilt console with console.log capture and live expression evaluation
  • Code auto-completion and Emmet abbreviations
  • One-click code prettify (Prettier)
  • Multiple editor themes, configurable font, font size and other editor settings

Preprocessors #

Switch any pane to a preprocessor:

  • HTML — Pug, Markdown
  • CSS — SCSS, SASS, LESS, Stylus, Atomic CSS
  • JS — ES6 (Babel), TypeScript, CoffeeScript

Libraries & assets #

  • Easily add popular JS & CSS libraries from a built-in dropdown, or paste any CDN URL — see External libraries
  • Asset hosting — upload images and other assets and use them directly in your code (local for free, cloud for PRO)

Saving & sharing #

  • Auto-save so you never lose work
  • Save and load unlimited private creations
  • Public sharing via a public link
  • Import & export all your creations as a JSON backup, anytime
  • Save as HTML file, with an option to inline all assets into a single file
  • Open in CodePen with one click
  • Capture preview screenshot as a PNG

Collaboration #

  • Real-time multi-user collab — invite others to edit the same creation live (hosting requires PRO)

Productivity #

  • Command palette (Ctrl/Cmd + K) for fast access to every action
  • Comprehensive keyboard shortcuts
  • Detached preview in a separate window for multi-monitor workflows
  • URL parameters for pre-filling code, preprocessors, layouts and more

Accounts & privacy #

  • Privacy first — all creations are private by default
  • Free account to sync creations across devices
  • PRO plan for unlimited public creations, cloud asset hosting, multi-user collab hosting and no ads

Platform #

  • Works offline after the first visit
  • Available as a web app and a Chrome extension (also runs in Brave and other Chromium browsers)
  • Localized in multiple languages

Edit this page on GitHub

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.

Disclaimer

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 https://tools.google.com/dlpage/gaoptout or you can set up a filter in Adblock Plus or similar ad blocker tools like AdBlock, uBlock or Adblock Pro.

Close
Share