Today, I was perusing around www.producthunt.com when I came across a pretty neat Chrome extension developed by Kushagra Gour (@chinchang457 for you Twitter users) called Web Maker.
If you’re a regular user of apps like Codepen.io or jsfiddle.net, then this might just be the Chrome extension you’ve been waiting for.
Codepen and Jsfiddle are pretty neat, and offer a lot of options, but have you ever just wanted something super simple and easily accessible? What if you could transform your new tab into an offline web playground with real-time preview?
That’s what Web Maker does. Now that I’ve added the extension to my Chromebook Pixel, this is what my new tab looks like:
It doesn’t get much easier than that.
On the left is your code environment. The top third is for HTML, the middle is for CSS and JaveScript goes on the bottom. The right side is your live preview.
What I like about this extension is the code editor. It’s color-coded, like you would expect any decent code editor worth it’s weight in pixels to be, and it highlights invalid code. Here’s an example:
There’s even a few options! Web Maker allows you to change the layout, putting the live preview either on the right, the left, or the bottom. You can download everything as an HTML page, and with the click of a button, you can open all your code in Codepen.io.
Literally the only complaint I had is that the only download option is an HTML file. I thought it would be neat if you could download a zip with the HTML, CSS and JS in separate files, but the more I thought about it the more I realized it’s a non issue. This extension is for small scale experiments, it’s not meant to be a full fledged online IDE like CodeAnywhere or Cloud9.
I give it 5 stars. It’s a really solid app and just a pleasure to use.
Check it out on Product Hunt, and don’t forget to give him an upvote while you’re there!
Product Hunt link: https://www.producthunt.com/tech/web-maker
Get the extension: https://kushagragour.in/lab/web-maker/