Marko v3 is here! Read the announcement and find out what is new in Marko v3

Marko

A high performance templating engine and UI component building library from eBay

Marko: HTML Templating

Marko is a really fast and lightweight HTML-based templating engine that compiles templates to readable Node.js-compatible JavaScript modules, and it works on the server and in the browser. It supports streaming, async rendering and custom tags.

Try Marko Online! 

npm install marko

Marko Widgets: UI Components

Marko Widgets is a UI component building library that utilizes Marko templates as the view. It offers advanced features like DOM diffing/patching, batched updates, stateful widgets, declarative event binding and efficient event delegation.

Try Marko Widgets Online! 

npm install marko-widgets

Clean and flexible syntax

HTML Syntax

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Marko Templating Engine</title>
    </head>
    <body>
        <h1>
            Hello ${data.name}!
        </h1>
 
        <ul if(data.colors.length)>
            <li for(color in data.colors)>
                ${color}
            </li>
        </ul>
        <div else>
            No colors!
        </div>
    </body>
</html>

Concise Syntax

<!DOCTYPE html>
html lang="en"
    head
        title - Marko Templating Engine
    body
        h1 - Hello ${data.name}!
        ul if(data.colors.length)
            li for(color in data.colors)
                ${color}
        div else
            - No colors!

Mixed Syntax

<!DOCTYPE html>
html lang="en"
    head
        <title>Marko Templating Engine</title>
    body
        <h1>
            Hello ${data.name}!
        </h1>
        ul if(data.colors.length)
            li for(color in data.colors)
                ${color}
        div else
            - No colors!

Marko Usage

var template = require('./template.marko');
 
app.get('/', function(req, res) {
    template.render({
            name: 'Frank',
            colors: ['red', 'green', 'blue']
        }, res);
});

Marko Features

Marko Widgets Features

  • Lightweight UI component building library
  • Marko used as the view
  • DOM diffing/patching using morphdom
  • Batched updates
  • Stateful and stateless UI components
  • Declarative event binding
  • Efficient event delegation
  • Server-side and client-side rendering
  • Compatible with Redux
More Screencasts

If you are looking for Marko v2 docs, please see: Legacy Documentation: Marko v2