--- layout: default.html ---

## Awesome Features

### Works Offline

Lives completely in your browser. There is no network involved, so it opens and shows previews instantly.

### Preprocessor Support

Be it Markdown, Jade, SCSS, LESS, Atomic CSS, JSX, CoffeeScript or TypeScript - you get it all.

### Quick Add Libraries

Drop in any library from the available list or put a URL of any other library you wish to add.

### Multiple Layouts

Get exact same layout in front of you, that you last saved the creation in. Plus, a full screen layout to see your work in actual browser window.

### Files Mode

Get a complete local-like environment where you can code in files instead of 3 separate panes.

### Preview screenshot capture

Feel like taking a screenshot of your awesome creation, just hit the Capture button to get a beautiful screenshot of your result.

### Open in Codepen

Done with your creation and want to share it with the world? One click and have your work open in CodePen.

### And much more awesomeness!

It doesn't stop there. There is JavaScript console, integrated Prettier support, command palette and more!

## ♥ from all around

Chris Coyier

If you're looking for a CodePen-like offline editor, and use Chrome, check out Web-Maker by Kushagra Gour.

Ryan Davidson
@Ryan_Random

Really enjoying using Web Maker - super fast offline web playground.

Nishant Verma
@NashVail

Finding awesome pens on @CodePen and recreating them in @webmakerApp is my new hobby

Joacim Nilsson

This is something I will be using alot. Thank you! :D

Oksana Borukh

It's fantastic! I'm glad I've discovered it! Thanks!

Amit Agarwal
@labnol

This is like having your own copy of Codepen that also works offline.

Chris Armstrong
@Armstrong

@webmakerApp looks like a good offline alternative to @CodePen.

SitePoint
@sitepointdotcom

Meet Web Maker, an Offline, Browser-based CodePen Alternative.

Fedor Loenko
@fedorloenko

Great Chrome extension via @chinchang457. I need offline CodePen from time to time.

Steve Lack

Thanks for creating this. What a great tool for productivity!

Margaret H

Decided to use it to work on my latest project, it's pretty awesome! Thank you for making this!

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