Web Maker: an offline frontend playground you install as a Chrome extension

What Web Maker actually solves, and who it is for

Web Maker is an offline playground for web experiments. The README describes it as "something like CodePen or JSFiddle, but much more faster and works offline because it runs completely on your system". That single sentence defines both the audience and the boundary. It is for a frontend developer who wants to try a CSS grid rule, a small JavaScript function or a Pug snippet without signing in, without a network round trip and without leaving a browser tab. It is not a publishing platform. There is no mention of a public pen URL, an embed script or a profile page in the README. The feature list is about the editing loop: preprocessors, an inbuilt console, code auto-completion, auto-save, multiple editor themes, font options, and import or export of all creations. The two delivery paths are the hosted app at https://webmaker.app/create/ and a Chrome extension. The README recommends the web app ("More features. More fun!") while the extension adds things the web app cannot do, such as opening in a new Chrome tab and capturing a preview screenshot. If your work happens in Firefox, Safari or a terminal, the extension route is closed and you are left with the hosted page.

How the editor, preprocessors and collab server fit together

The repository layout shows a Preact application under src/, built by the preact CLI with a custom template at src/index.ejs. The package.json build script is `preact build --template src/index.ejs --prerender false --no-inline-css --sw false`, and the dev script is `preact watch --template src/index.ejs`. CodeMirror is present as a first-class module (src/CodeMirror.js is explicitly listed in eslintIgnore), which is consistent with the theme and auto-completion features. Preprocessing is client-side: the README lists HTML (Pug and Markdown), CSS (SCSS, LESS, Stylus, Atomic CSS) and JavaScript (ES6, TypeScript, CoffeeScript). Nothing in the README suggests a server compiles your code, which is exactly why the playground can run offline. Collaboration is the exception. The `start:collab` script runs `PORT=4444 npx y-websocket`, and `start:all` runs the dev server and that WebSocket server together. So a collab session is not peer-to-peer; it depends on a y-websocket process listening on port 4444, and every participant has to reach it. The collab-server/ directory in the repo root matches that design. Everything else, including saving and asset hosting, is described as local or cloud storage, so the default path keeps your code on your machine.

Installing Web Maker and running your first pen

There is nothing to install for the hosted route. The README gives two entry points: open https://webmaker.app/create/ in a browser, or install the Chrome extension from the Chrome Web Store listing. The extension is the one that adds new-tab access and screenshot capture.

If you want to run the source, clone the repository and install dependencies with npm. Then start the development server.

npm install
npm start

The `start` script runs `concurrently --kill-others "gulp start-preview-server" "npm run -s dev"`, so you get the preview server and the Preact watch build in one terminal. The README does not document the port the preview server binds to, so read the output of that command rather than assuming one.

To bring up collaboration as well, use the combined script. It starts the same dev server plus a y-websocket server on port 4444.

npm run start:all

The port is fixed in the script as `PORT=4444`; if something else already holds 4444, change it in package.json or start the parts separately. Once the editor is open, pick a layout (the README mentions a quick three-pane mode and a Files mode), choose your preprocessors, and type. The console panel shows output from your script, and auto-save keeps the pen between sessions. When you are done, the README says you can save as an HTML file, export all creations, or send the pen to CodePen.

Where Web Maker is the wrong tool

The offline-first design is the limitation as much as the feature. Because the editor runs on your system, there is no hosted pen URL to hand to a colleague or paste into a bug report. The README's sharing story is export, save as HTML, or edit in CodePen, which means the handoff leaves Web Maker. If your workflow depends on a link that always renders the latest version of a snippet, this is the wrong tool.

Collaboration carries a second constraint. Multi-player collab mode is listed as a feature, but the script that powers it is a local y-websocket server on port 4444. The README does not describe a hosted relay, authentication or access control for that server, and it does not document rollback or session recovery. Treat collab as something you host yourself for a small group on a trusted network, not as a public room.

The third boundary is automation. The repository has cypress/ and a `cypress` script, so the project tests itself, but the README does not present Web Maker as a headless runner for snippets in CI. There is no documented CLI that takes a file and prints the compiled result. If you need that, look elsewhere.

Finally, the extension is Chrome-only by construction. The README's new-tab and screenshot features are marked "in chrome extension only", and no other browser build is mentioned.

CodePen and JSFiddle: hosted sharing versus local execution

The README names CodePen and JSFiddle as the comparison points, so the difference is worth stating plainly. Those tools are hosted services: the editor, the storage and the shareable URL all live on someone else's server, and your pen is reachable by anyone with the link. Web Maker inverts that. The code runs on your machine, the README describes local and cloud asset storage, and the sharing step is an explicit export or a handoff to CodePen. The practical consequence is that Web Maker works on a plane and CodePen does not, while CodePen gives you a URL the moment you save and Web Maker does not. There is also a feature asymmetry in the other direction. The README lists an "Edit in CodePen" action, so the two are not mutually exclusive: you can prototype offline and publish to CodePen when the snippet is worth sharing. Choose based on whether the artifact you need is a running experiment on your laptop or a link you can send.

Maintenance, releases and what the MIT licence means here

The repository is not archived, and the last push was on 2026-08-03, which is recent enough to call the project maintained. The release history is uneven, though, and that matters more than the push date for planning. v3.6.0 landed in 2018, v4.0.0 in 2019, and then nothing until v7.0.0 ("Bloomy Bee") in March 2026. Meanwhile package.json reports version 7.4.0, so the working tree has moved past the published release. If you track the project, expect long quiet stretches punctuated by large jumps, and expect the repository to be ahead of the release notes.

The licence is MIT, with copyright 2016-2026 Kushagra Gour. In practice that means you can read, modify and redistribute the source, including in commercial settings, provided the copyright notice and permission notice travel with it. The extension published on the Chrome Web Store is a separate distribution channel with its own review process, so a local build of the repo is not the same artifact as the store listing. Nothing in the README describes a paid tier or a hosted plan, so there is no vendor lock-in to weigh. The support model is Patreon and sponsorship, which is worth knowing before you file an issue expecting a deadline.

Editorial conclusion

Adopt Web Maker if you want a zero-setup, offline place to test a snippet of HTML, CSS or JavaScript, or if you prefer the Chrome extension that opens in a new tab. Skip it if you need a hosted shareable playground with a public URL for every pen, a built-in package registry, or a headless CI runner. Before relying on it, open https://webmaker.app/create/ and check that the preprocessors you use compile in your browser, then run npm run start:collab and confirm the y-websocket server on port 4444 is reachable from every machine that needs to join a collab session.

Frequently asked questions

Official sources

1. chinchang/web-maker on GitHub
2. License: MIT
3. Project website
4. README
5. Releases