Web Maker is a blazing fast, offline-capable web playground for HTML, CSS and JavaScript. Write code in three panes (or as files), see a live preview as you type, and reach for preprocessors like SCSS, Pug or TypeScript whenever you need them.
This page gets you from zero to your first saved creation in under a minute.
Open Web Maker #
You can use Web Maker two ways — pick whichever fits your workflow:
- Web app (recommended) — no install, more features, works offline after the first visit. Open the app →
- Chrome extension — opens in a new tab on every new tab click. Get it from the Chrome Web Store →
The extension also works in Brave and other Chromium browsers, though those aren't tested as thoroughly.
Write your first code #
When Web Maker opens, you'll see three code panes labelled HTML, CSS and JS. Click inside the HTML pane and type:
<h1>My first HTML</h1>
See the live preview #
The preview pane updates automatically as you type — no save, no refresh. Add CSS or JavaScript in their respective panes and watch the preview react instantly. If you'd rather control when it runs, you can switch to manual run mode in Settings.
Open the built-in console (bottom of the preview) to see console.log output and evaluate expressions live.
Save your work #
Hit Save in the top toolbar (or Ctrl/Cmd + S) to save the creation. Without an account, creations are stored locally in your browser. To sync across devices and avoid losing work if you clear browser data, sign in with a free account.
What's next? #
Now that you've made your first creation, explore what Web Maker can really do:
- Use a preprocessor — switch any pane to SCSS, Less, Pug, Markdown, TypeScript, Babel and more.
- Add an external library — drop in jQuery, React, Tailwind, or any CDN URL.
- Switch layouts — six layouts including a tabbed-editor mode for focused work.
- Keyboard shortcuts — speed up everything you just learned.
- Go PRO — unlimited public creations, cloud asset hosting, multi-user collab and more.
Prefer working with files? #
Web Maker also has a Files mode with a sidebar and a real folder structure, instead of three fixed panes. Click New in the top bar, choose Files mode, and hit Start blank. Put the same <h1> in index.html — same result, but in a familiar file-based environment. Free accounts can have up to 2 file-mode creations; PRO is unlimited.