WEB MAKER
Add to Chrome
01
--offline
Lives in your browser. Not in the cloud.
No network. No latency. Opens instantly and renders previews on a train, a plane, a basement. Your code never leaves the device unless you say so.
SPEC SHEET // v7.1
Why developers ship
02 · COLLAB
--realtime
Pair-program with a link
Real-time multi-user editing. Built for interviews, mob sessions and teaching a friend at 2am.
03 · PREPROCESS
--lang=*
SCSS. Pug. TypeScript. All of it.
04 · LIBS
--cdn
Drop in any CDN
React, Vue, jQuery, Tailwind — one click or paste a URL.
05 · LAYOUT
--n=6
Six layouts, including tabs
Side-by-side, stacked, full-preview, and a tabbed editor for focus.
06 · FILES
--mode=fs
A real file tree
Folders, files, an IDE-like sidebar. Same playground, more rope.
07 · CAPTURE
--png
Screenshot & ship
One click to capture a clean PNG of your preview — straight to Twitter, Slack or your README.
08 · EXPORT
--codepen
One-click to CodePen
Outgrew the playground? Push the whole creation to CodePen and keep going.
09 · DEVTOOLS
--all-included
Console · Prettier · Palette · Shortcuts
A built-in JS console, Prettier formatting, a Cmd+K command palette, a full shortcut map, and a dark mode that doesn't sting at midnight.
10 · i18n
--locales=8
Eight languages
USE CASES // 04
Built for the moments
01
// learn
Learning web dev
Practice HTML, CSS and JavaScript with instant feedback. No setup, no terminal, no node_modules.
02
// prototype
Quick prototypes
Test an idea before opening your IDE. From thought to working preview in under ten seconds.
03
// interview
Technical interviews
Conduct live coding interviews over a single shareable link with real-time collaboration.
04
// teach
Teaching & workshops
Share code instantly with students. Works offline in any classroom, hostel WiFi or conference basement.
DIFF // webmaker vs cloud
Why not the others
webmaker.diff · 4 changes · +4 / -4
Dimension
Web Maker
CodePen / JSFiddle
offline
Works fully offline. Code on a plane, in a basement, on hostel WiFi.
Cloud-only. Slow or unusable without a stable connection.
privacy
Code stays on your device by default. No account required to start.
Code lives on someone else's servers. Login walls and quotas.
latency
Opens instantly as a Chrome extension or PWA. Zero network round-trips.
Cold loads, network latency, ads and trackers between you and your code.
collab
Real-time multi-user editing built in. Share a link, code together.
Collab is a paid add-on, or simply doesn't exist.
RECEIPTS // 11
Love from earth
Ryan Davidson
@Ryan_Random
01/11
Really enjoying using Web Maker — super fast offline web playground.
via Twitter
Nishant Verma
@NashVail
02/11
Finding awesome pens on @CodePen and recreating them in @webmakerApp is my new hobby.
via Twitter
Chris Coyier
creator of CodePen
★ 03/11
If you're looking for a CodePen-like offline editor, and use Chrome, check out Web-Maker by Kushagra Gour.
via blog.codepen.io
Joacim Nilsson
chrome web store
04/11
This is something I will be using a lot. Thank you! :D
via Web Store
Oksana Borukh
chrome web store
05/11
It's fantastic! I'm glad I've discovered it! Thanks!
via Web Store
Amit Agarwal
@labnol
06/11
This is like having your own copy of Codepen that also works offline.
via Twitter
Chris Armstrong
@Armstrong
07/11
@webmakerApp looks like a good offline alternative to @CodePen.
via Twitter
SitePoint
@sitepointdotcom
08/11
Meet Web Maker, an offline, browser-based CodePen alternative.
via Twitter
Fedor Loenko
@fedorloenko
09/11
Great Chrome extension via @chinchang457. I need offline CodePen from time to time.
via Twitter
Steve Lack
chrome web store
10/11
Thanks for creating this. What a great tool for productivity!
via Web Store
Margaret H
chrome web store
11/11
Decided to use it for my latest project, it's pretty awesome! Thank you for making this!
via Web Store
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.