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

3 min read Original article ↗

Trusted

Powering high-traffic, production-grade websites like eBay.com

Familiar

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

Performant

Streaming, resumable, optimizing compiler, and a tiny runtime

Scalable

From simple HTML templates to powerful components as needed

HTML Re‑imagined

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.

Check it out!

// HTML + JavaScript = 💜
<let/count=0>
<button onClick() { count++ }>
  Clicked ${count} times
</button>

// HTML + JavaScript = 💜
<let/count=0>
<button onClick() { count++ }>
  Clicked ${count} times
</button>

// HTML + JavaScript = 💜
let/count=0
button onClick() { count++ }
  -- Clicked ${count} times

// HTML + JavaScript = 💜
let/count=0
button onClick() { count++ }
  -- Clicked ${count} times

Faster First Paint

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 content loading in as it completes.

Learn How

buffered

streamed

Granular by Design

Why ship entire Islands for a few grains of sand? Marko ships only what's needed, skipping hydration and stripping unused code at the sub-template level.

Lean by default. Fast by design. Unrivaled performance on any device or network.

Learn How

full-page

granular

Write Code, Right Code

Browsers and servers are built differently, shouldn't your code be too? Marko compiles your templates to perform their best with optimized, environment-specific output.

Faster loads. Smaller bundles. One seamless language.

Learn How

Streamed HTML

for the server

<div>Hello ${name}</div>
<div>Hello ${name}</div>
div -- Hello ${name}
div -- Hello ${name}

Reactive DOM

for the browser

Types & Tooling

Marko has built-in TypeScript support , with strong type inference that works across templates and components. Editors get full language features like autocompletion, jump-to-definition, syntax highlighting, and clean formatting.

Build confidently. Catch errors early. Write better code, faster.

Explore

<divBuilt in HTML <div> tag./$el
const $el: () => HTMLDivElement
>
  Hop in, we've got tags
</div>

<scriptBuilt in core <script> tag.>
  $el
const $el: () => HTMLDivElement
().
  • addEventListener
  • animate
  • append
  • appendChild
  • focus

</script>
<divBuilt in HTML <div> tag./$el
const $el: () => HTMLDivElement
>
  Hop in, we've got tags
</div>

<scriptBuilt in core <script> tag.>
  $el
const $el: () => HTMLDivElement
().
  • addEventListener
  • animate
  • append
  • appendChild
  • focus

</script>
divBuilt in HTML <div> tag./$el
const $el: () => HTMLDivElement
 -- Hop in, we've got tags
scriptBuilt in core <script> tag. -- $el
const $el: () => HTMLDivElement
().
  • addEventListener
  • animate
  • append
  • appendChild
  • focus


divBuilt in HTML <div> tag./$el
const $el: () => HTMLDivElement
 -- Hop in, we've got tags
scriptBuilt in core <script> tag. -- $el
const $el: () => HTMLDivElement
().
  • addEventListener
  • animate
  • append
  • appendChild
  • focus

Join the Community

Need help? Want to Contribute?

Get involved in the Marko Community!

Browse the code, open issues, & make pull requests on GitHub