Skip to content
'All my friends KNOW the low-coder'. CLI for Pug and much more.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.
logo.png logo Jul 30, 2019


'All my friends KNOW the low-coder'

MetaBake is open source and extensible low-code productivity tools for front-end developers.


MetaBake(mbake) provides all the necessary tools for a developer to write cleaner code quicker, with pug and livereload out of the box.

You can gradually adopt it while it allows you to develop quicker - and with clean simplicity - Static Websites, Custom Elements, custom CMS/E-Commerce, CRUD and all sorts of dynamic web-apps.

Please star our main project here:


You should know HTML, CSS and JavaScript - that is all we use. If you need to catch up, we recommend this book: 'Design and Build Websites' by Jon Duckett.

Quick start

npm i -gmbake
mbake -w . /* for a base website */
cd website
mbakeX -w . /* to run the watcher/livereload */

You can also use: npm i -g mbake BUT NOTE: You can't use sudo w/ npm.

MetaBake in 4 Minutes

Building sites take a few moments, just add index.pug and dat.yaml files in the folder, and compile it with mbake . from the root folder of your site.


Create a folder called 'one'. In the folder 'one', create file index.pug

   p Hello #{key1}

and create file dat.yaml

key1: World

Note: to create a new page|screen in mbake, create a new folder with an index.pug and day.yaml in each folder.

Now make with mbake:

mbake .

This will create index.html. Of course you can use regular Pug syntax to include other Pug files or Markdown. (MetaBake Markdown flavor includes CSS support):


And example Markdown file with CSS nested classes. Title is nested in 2 levels, .column class CSS and second level .stick CSS class

:::: column col-2
::: stick

So if you write a Markdown file, it will be included in index.html


This will start a webserver and auto-refresh browser, and watch for file changes to auto build:

mbakeX -w .

Instead of . you can specify any path. Also, the fact that we are generating this static content allows us to have the entire webapp served by a CDN


CSS can be hard to work with, so people use Sass/Scss. Create a style.scss file:

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
   font: 100% $font-stack;
   color: $primary-color;

Create file assets.yaml in assets folder, to compile your scss to css

- style.scss

and run

mbake -s .

It will create a css file in assets/css with auto-prefixes.

So the structure of asset folder should look something like that:

   css/style.css /* this is going to be compiled from style.scss */
   scss/style.scss /* your working area */
   assets.yaml /* with `scss` files that need to be compiled */


TypeScript is supper-set of JavaScript. Write a ts file, like foo.ts:

foo(i:number) {
	console.log('oh hi')

and run

mbake -t .

It will create a .js and min.js files. It will output ES5 to support IE11, so feel free to use class { } syntax. If there is no .ts, than it will simply slightly mimifify js files into min.js (but no ES5 conversion).

Lots of time you use .ts to call DB services: such as Google FireStore.

Examples - Website

There are 12 very different examples included in the mbake CLI. One is just a website:

mbake -w

That will extract an example website in the current folder. ( Obviously you can create any layout with any combination of css and other libraries, but here is how we laid out an example/starter website).

MetaBake tool belt

There are some libraries (and poly fills) that you use often. We just have a list of links, making them easy to load(depp.require())

mbake -f .

This emits a Pug file that you should include in your Pug's layout head section. In turn, the included file calls a toolBelt.js from a CDN.

Other examples include:

  • Using markdown CSS effect: allows non-programmers to write interactive stories
  • Slide show with markdown
  • Dashboard example
  • Ads example



Git Repo

Pug example


You can’t perform that action at this time.