WebMaker APP: Offline Web Development Play-Ground

By | August 20, 2019

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

webmaker app home-page
WEBMAKER: HOMEPAGE.

WebMaker app (WMA) is a free and open-source front-end web development application. A good way to describe it is as an offline version of codepen.

Codepen is one piece of software that has come to play a very important role in my front-end developer journey. It is basically is a HTML-CSS-JAVASCRIPT playground where.

codepen playground
CODEPEN

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.

webmaker view 2
AUTOMATIC PREVIEW

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

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

SOME OTHER 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 a screenshot of the preview.
  • It has code auto-completion/suggestion.
  • It has three views (left, right and bottom) and a full screen view.
MUST READ  How to Make Bootable Drives With Ubuntu Startup Disk Creator
webmakerapp features
FEATURES

You can use WMA for you web project in two different forms;

  • A web browser extension (chrome): since it is a chrome extension it would be a breeze to install without much configuration.
  • A web app: that you can run in the browser.

To learn more on how to customize the different settings, you can check the awesome WMA documentation here.

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.

wma-github
WEBMAKER APP ON GITHUB

Thank you Kushagra Gour for your wonderful creation.

Happy Linux’NG!

NEVER MISS AN UPDATE
I agree to have my personal information transfered to MailChimp ( more information )
Join over 10,000 visitors to receive Open Source tips, trick, news, tutorials, programming and more.
We hate spam. Your email address will not be sold or shared with anyone else.
ALEXANDER OMOROKUNWA

Tell us what you think

This site uses Akismet to reduce spam. Learn how your comment data is processed.