WebMaker APP: Offline Web Development Play-Ground
Tags: opensource, fossstories, howto, internet
Published: 2019-08-27 11:37:31

---
title: WebMaker APP: Offline Web Development Play-Ground
published: true
tags: FOSS,FOSS Stories,HowTo,Internet
canonical_url: https://fossnaija.com/install-webmaker-app/
---

_The true Open-source alternative to CODEPEN for offline web development._

![webmaker app home-page](https://i0.wp.com/fossnaija.com/wp-content/uploads/2019/08/wma_homepage.png?resize=665%2C338&ssl=1)<figcaption>WEBMAKER: HOMEPAGE.</figcaption>

WebMaker app (WMA) is a free and [open-source](https://fossnaija.com/open-source-really-matter-control-not-code/) front-end web development application. A good way to describe it <g id="37" data-gr-id="37">is </g>as an offline version of [<g id="30" data-gr-id="30">codepen</g>](https://codepen.io/).

Codepen is one piece of software that has come to play a very important role in my [front-end developer](https://dev.to/xeroxism/how-to-install-atom-editor-in-ubuntu-linux-29h) journey. It is basically <g id="5" data-gr-id="5">an HTML-CSS-JAVASCRIPT</g> playground.

![codepen playground](https://i0.wp.com/fossnaija.com/wp-content/uploads/2019/08/codepen.png?resize=665%2C332&ssl=1)<figcaption>CODEPEN</figcaption>

Codepen is used by developers to showcase tricks, and ultimately share their visual front-end web creations to the world. I fell in love at first sight. The major feature of Codepen that you’d love is the ability to see the effects (preview) of your code immediately as you type them in the HTLM-CSS-JS code [editor.](https://dev.to/xeroxism/7-open-source-alternatives-to-dreamweaver-38gc-temp-slug-7750868)


But what about when there is no internet?

###Here comes WebMaker!

![webmaker view 2](https://i0.wp.com/fossnaija.com/wp-content/uploads/2019/08/web-maker-view-2.png?resize=665%2C333&ssl=1)<figcaption>AUTOMATIC PREVIEW</figcaption>

_NB: I would be referring to the public or free version of Codepen throughout this post._


Any reason that would make anyone want to use Codepen should motivate the use of WMA – with a little additional benefit, being offline. In fact, WMA is compatible with Codepen. You can simply upload your creations on WMA to Codepen with a button – to create an online copy if you wish – with little or no extra configurations or changes to the code-base.

![Webmaker app settings](https://i0.wp.com/fossnaija.com/wp-content/uploads/2019/08/web-maker-settings-1.png?w=665&ssl=1)

Same familiar interface and everything to the dot. Since it was offline, it was relatively faster than Codepen – as should be expected.

## **SOMEOTHER FEATURES**

- The default pre-processors are HTML, CSS, and JAVASCRIPT, with options for SCSS, SASS, CoffeeScript, Markdown and so on. External CSS and JS libraries (e.g. Bootstrap, JQUERY, etc) can be added and linked to your code.   
- You can take<g id="21" data-gr-id="21"> a screenshot </g>of the preview. 
- It has code auto-completion/suggestion. 
- It has three views (left, right and bottom) and a <g id="13" data-gr-id="13">full screen</g> view. 

![webmakerapp features](https://i2.wp.com/fossnaija.com/wp-content/uploads/2019/08/webmakerapp-features.png?resize=665%2C343&ssl=1)<figcaption>FEATURES</figcaption>

Youcan use WMA foryou web project in twodifferent forms;

- A webbrowser extension ([chrome](https://chrome.google.com/webstore/detail/web-maker/lkfkkhfhhdkiemehlpkgjeojomhpccnh)): sinceit is a chrome extension it would be a breeze to install withoutmuch configuration.
- A[webapp](https://webmaker.app/app/):that you can run in the browser.

Tolearn more on how to customize the different settings, you can checkthe awesome WMA [documentationhere](https://webmaker.app/docs/).

WMA is open-source; free to use and modify if possible. And itself built on a lot of open-source technologies. For a detailed narrative on how it was built you can read the author’s post [here](https://medium.freecodecamp.org/web-maker-how-i-built-a-fast-offline-front-end-playground-9fe3629bc86f).

![wma-github](https://i1.wp.com/fossnaija.com/wp-content/uploads/2019/08/wma-github.png?resize=665%2C397&ssl=1)<figcaption>WEBMAKER APP ON GITHUB</figcaption>

Thankyou [KushagraGour](https://kushagra.dev/)for your wonderful creation.

**HappyLinux’NG!**

The post [WebMaker APP: Offline Web Development Play-Ground](https://fossnaija.com/install-webmaker-app/) appeared first on [Foss Naija](https://fossnaija.com).