iiinova — where your digital self keeps evolving

Marko

@markojs.com

810 followers 12 following 45 posts

✨ HTML Reimagined 🔬 Fine-grained Bundling 🚿 Streaming Render 🛠️ Targeted Compilation @ebay.com & @openjsf.org

Posts Replies Media

Marko @markojs.com · 01/09/2026

And we've made friends with the front of the JS framework benchmark 🏎️

A screenshot of the JS framework benchmark chart, with the top row showing (in order)

vanillajs ripple-v0.3.112 marko-v6.3.28 octane-v0.1.31 vue-vapor-v3.6.0-beta.17 solid-v1.9.3 svelte-v5.42.1 lit-html-v3.2.0 lit-v3.2.0 angular-cf-new-nozone-v22.0.0 react-hooks-v19.2.0 react-compiler-hooks-v19.0.0 ember-v7.3.0-alpha.5 qwik-v1.11.0

031

Marko @markojs.com · 01/09/2026

The `async` shorthand can be used for attributes markojs.com/playground#d...

A code snippet:
```
<button async onClick() {
saving = true;
await saveDraft();
saving = false;
}>
${saving ? "Saving..." : "Save draft"}
</button>
```

100

Marko @markojs.com · 01/09/2026

Better recovery from syntax mistakes, especially for agents

A compile error from the Marko playground:

Build failed
index.marko:1:5
Ambiguous ">" in attribute. A ">" preceded by whitespace ends the tag. If "count > 10" was intended as a single expression, wrap it in parentheses, eg "=(count > 10)". If the tag was instead meant to end at the first ">", leaving "10>" as body content, remove the whitespace before that ">".

```
<if=count > 10>
^^^^^^^^^^
Count is above 10!
</if>
```

110

Marko @markojs.com · 01/08/2026

Dynamic interpolations in the `<style>` tag

110

Marko @markojs.com · 07/07/2026

Automatic tag discovery now supports grouping in directories markojs.com/docs/referen...

A code block from the website:

```
tags/
menu-button.marko
icons/
icon-chevron.marko
icon-plus.marko
```

100

Marko @markojs.com · 07/07/2026

Lazy loading support via import triggers! markojs.com/docs/referen...

A code screenshot from the lazy loading documentation

```
import VideoPlayer from "<video-player>" with { load: "visible#hero" }

<section#hero>
<VideoPlayer src=input.src/>
</section>
```

100

Marko @markojs.com · 07/07/2026

Bound attributes can now have a refining function markojs.com/docs/referen...

A code block from the Marko website:

```
<input type="number" value:parseFloat:=num>

// desugars to

<input
type="number"
value=num
valueChange(newValue) { num = parseFloat(newValue) }
>
```

100

Marko @markojs.com · 19/11/2025

Marko 🤝 UnoCSS @unocss.dev now reads `.marko` files by default!

The Marko and UnoCSS logos, some Marko mascots, and a button HTML element with a HUGE list of classnames that goes off the page

062

Marko @markojs.com · 11/11/2025

Why ship entire islands for a few grains of sand?

Meme suggesting breaking up an app into islands for better performance, but then highlighting that Marko 6 does this automatically.

040

Marko @markojs.com · 08/11/2025

We topped HackerNews! Read the discussion on our HN app, and check out the network tab while you're at it 👀 marko-hn-example.netlify.app/story/45858905

A screenshot of the Marko HackerNews website with the Chromium network tab open. A hand-drawn arrow and circle highlight that only 1.7kb of JavaScript is sent to the browser

040

Marko @markojs.com · 27/10/2025

Keeping bundles small 🫡 www.lorenstew.art/blog/10-kanb...

The table from the linked article, with highlights indicating that Marko is on the top of the charts and is 6.36x smaller than Next.js

091

Marko @markojs.com · 03/10/2025

Input masking with cursor preservation? markojs.com/playground#d...

The output of the code example linked, showing a variety of inputs masked to prevent letters, cast to capital letters, and format as credit card/hex/phone number

042

Marko @markojs.com · 24/09/2025

Don't do this, but it's cool that you can!

120

Marko @markojs.com · 03/12/2024

@cmgriffing.bsky.social's Giffium.com rocks! Great way to show how much less you can write with Marko 😉

1123

Marko @markojs.com · 12/11/2024

Concise Mode == Best Mode

A TODO app example using Marko's concise syntax:

```marko
let/todos=["foo", "bar"]

form onSubmit(e) {
e.preventDefault()
todos = todos.concat(e.target.todo.value)
e.target.reset()
}
input name="todo"
button -- Add

ul
for|todo, i| of=todos
li
button onClick() { todos = todos.toSpliced(i, 1) } -- ×
-- ${todo}
```

260