Marko

A friendly and super fast UI library that makes building web apps

bearable

fun

Get startedGitHub

simple.

If you know HTML, CSS, and Javascript, you know Marko

fast.

Faster loads via streaming and a tiny (~10kb gzip) runtime

progressive.

From simple HTML templates to powerful UI components

trusted.

Marko is powering high-traffic websites like ebay.com

Reactive UI components

Change the data backing a view and Marko will automatically and efficiently update the resulting HTML

class {
    onCreate() {
        this.state = { count:0 };
    }
    increment() {
        this.state.count++;
    }
}
 
style {
    .count {
        color:#09c;
        font-size:3em;
    }
    .example-button {
        font-size:1em;
        padding:0.5em;
    }
}
 
<div.count>
    ${state.count}
</div>
<button.example-button on-click('increment')>
    Click me!
</button>
0

Choose a syntax

Write in a familiar HTML-like style or drop the angle brackets and use Marko's concise syntax

<!doctype html>
<html>
<head>
    <title>Hello Marko</title>
</head>
<body>
    <h1>My favorite colors</h1>
    <ul.colors>
        <for|color| of=input.colors>
            <li>${color}</li>
        </for>
    </ul>
</body>
</html>
⇄
<!doctype html>
html
    head
        title -- Hello Marko
    body
        h1 -- My favorite colors
        ul.colors
            for|color| of=input.colors
                li -- ${color}

Silky smooth

Fast enough to power animations at 60FPS

The above animation is <div> tags. No SVG, no CSS transitions/animations. It's all powered by Marko which does a full re-render every frame.

Awesome tooling

Marko provides first-class support for the Atom editor with syntax highlighting, Autocomplete for both HTML and custom tags, Hyperclick to quickly jump to referenced files and methods, and Pretty printing to keep your code readable.

Community plugins also provide syntax highlighting for Sublime, VS Code, Webstorm & others!

View all editor plugins

Remarkoable performance across the board

Color picker
Search results
Inferno
1,792ops/s
Marko
3,262ops/s
Preact
2,841ops/s
React
212ops/s
Vue
824ops/s
Node.js(server)
Inferno
4,542ops/s
Marko
6,713ops/s
Preact
2,615ops/s
React
1,974ops/s
Vue
2,940ops/s
Desktop Browsers(average)
Inferno
653ops/s
Marko
1,796ops/s
Preact
301ops/s
React
358ops/s
Vue
398ops/s
Mobile Browsers(average)

The color picker benchmark

This benchmark measures the time it takes to cycle through 133 colors. The selected color index changes every cycle. When the selected color index changes three things happen:

  • The new selected color is highlighted
  • The old selected color is unhighlighted
  • The selected color's name is shown at the end

This benchmark measures how well a large render tree is optimized when only a few nodes actually need to be updated.

View the code on GitHub