A declarative, HTML-based language
that makes building web apps fun

Get started

GitHub

Familiar

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

Performant

Streaming, partial hydration, an optimizing compiler, & a small runtime

Scalable

Start with simple HTML templates and add powerful components as needed

Trusted

Marko is powering high-traffic websites like ebay.com

HTML Reimagined

Marko is HTML re-imagined as a language for building dynamic and reactive user interfaces. Just about any valid HTML is valid Marko, but Marko extends the HTML language to allow building modern applications in a declarative way.

<!doctype html>
<html>
<head>
    <title>Hello Marko</title>
</head>
<body>
    <h1>My favorite colors</h1>
    <ul>
        <for|color| of=["red", "green", "blue"]>
            <li style=`color:${color}`>
                ${color.toUpperCase()}
            </li>
        </for>
    </ul>
    <shared-footer/>
</body>
</html>

HTML Templates, Custom Tags, & Javascript Expressions

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count++;
  }
}
<div>${state.count}</div>
<button on-click("increment")>
  Click me!
</button>

Interactive Logic & Reactive Values

Progressive Rendering

Marko streams content to your users as soon as it’s ready. No waiting for client side JavaScript bundles or data requests to start rendering. HTML, assets, and images are loaded as soon as possible with asynchronous data loading in as it completes.

Google Home - $79

Add to Cart

Hands-free help around the house. Google Home is a smart speaker with the Google Assistant built in. So whenever you need help, it's by your side

★★★★☆

Cool gadget Google has created a nice device that provides music and information by voice control. The microphone is very good and will usually pick up commands from across the room. The speakers sound surprisingly good for such a small device. I wish it had tone control though.

★★★★★

Incredible sound profile! Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound.

Google Home - $79

Add to Cart

Hands-free help around the house. Google Home is a smart speaker with the Google Assistant built in. So whenever you need help, it's by your side

★★★★☆

★★★★★

Incredible sound profile! Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound.

Learn More

Code Elimination

Marko only sends the code for interactive components to the browser. Its compiler automatically detects which components only need to be rendered on the server. This means less to download and less to execute. Your users can enjoy top tier performance regardless of their devices or networks.

Google Home - $79

Add to Cart

Hands-free help around the house. Google Home is a smart speaker with the Google Assistant built in. So whenever you need help, it's by your side

★★★★☆

★★★★★

Incredible sound profile! Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound.

Google Home - $79

Add to Cart

Hands-free help around the house. Google Home is a smart speaker with the Google Assistant built in. So whenever you need help, it's by your side

★★★★☆

★★★★★

Incredible sound profile! Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound.

Learn More

Tailored Performance

Marko's compiler generates code tailored to where it is going to run. You write your code once and it is optimized for both the server and browser. This is especially apparent on the server where Marko is several times faster than other popular solutions.

<div>
  <h2>Images</h2>
  <div>
    <for|item| of=input.items>
      <div on-click(() => alert(item.title), item)>
        <img src=item.img alt="" />
      </div>
    </for>
  </div>
</div>

out.write("<div><h2>Images</h2><div>");
for (const item of input.items) {
  out.write(`<div><img${_marko_attr("src", item.img)}></div>`);
}
out.write("</div></div>");

HTML Strings on the server

out.beginElement("div", null, "0", component);
out.beginElement("h2", null, "1", component);
out.text("Images", component);
out.endElement();
out.beginElement("div", null, "2", component);
{
  let _keyValue = 0;
  for (const item of input.items) {
    const _keyScope = `[${_keyValue++}]`;
    out.beginElement("div", null, "3" + _keyScope, component, null, 0, {
      onclick: _component.d("click", "onBannerClick", false, [item]),
    });
    out.element("img", { src: item.img }, "4" + _keyScope, component, 0);
    out.endElement();
  }
}
out.endElement();
out.endElement();

VDOM Nodes in the browser

See the Benchmarks

Editor Support

Marko provides first-class support for the VSCode editor including syntax highlighting, Autocompletion, Hyperclick to quickly jump to referenced files, and Pretty printing to keep your code readable.

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