Marko — Streaming UI Framework by eBay

Introduction

Marko is a UI framework developed at eBay that pioneered streaming server rendering for web applications. It compiles templates into optimized code for both server and client, sending HTML as it becomes ready and hydrating only the interactive parts on the client side.

What Marko Does

• Renders HTML on the server as a stream for fast time-to-first-byte
• Hydrates only interactive components on the client, minimizing JavaScript payload
• Compiles .marko template files to optimized JS at build time
• Supports both a concise indentation-based syntax and an HTML-like syntax
• Integrates with Express, Koa, Hapi, and other Node.js frameworks for server rendering

Architecture Overview

Marko uses a compiler that transforms .marko files into separate server and client bundles. On the server, templates render as readable streams that flush HTML chunks progressively. The client runtime receives serialized component state embedded in the HTML and attaches event handlers only where needed. This partial hydration approach means pages with mostly static content ship very little client JavaScript. Marko 6 introduces a tag-based reactivity model inspired by signals.

Self-Hosting & Configuration

• Install via npm install marko @marko/compiler or scaffold with @marko/create
• Use @marko/vite for Vite-based builds or @marko/webpack for Webpack integration
• Server-side rendering works with any Node.js HTTP framework via template.stream()
• Configure Babel or TypeScript alongside Marko using the compiler's transform API
• Deploy as a standard Node.js application or export static pages for CDN hosting

Key Features

• Streaming server rendering that outperforms traditional render-to-string approaches
• Automatic partial hydration reduces client JS without developer intervention
• Concise syntax with significant whitespace that reduces template boilerplate
• Built-in component lifecycle with declarative state management
• Battle-tested at eBay scale, serving pages to hundreds of millions of users

Comparison with Similar Tools

• React — Requires full hydration by default; Marko's partial hydration ships less JS to the client
• Astro — Also reduces client JS via islands; Marko is a full component framework rather than a meta-framework
• Svelte — Both compile away framework overhead; Marko adds streaming SSR and progressive HTML flushing
• Qwik — Similar resumability goal; Marko achieves it through streaming and automatic code splitting at the component level

FAQ

Q: Who uses Marko in production? A: eBay uses Marko across its marketplace pages, handling billions of page views per month.

Q: Can I use Marko with TypeScript? A: Yes. Marko supports TypeScript through its compiler plugin and provides type definitions for components.

Q: What is the difference between Marko 5 and Marko 6? A: Marko 6 introduces a tag-based reactivity model, finer-grained updates, and improved partial hydration. It is currently in development.

Q: Does Marko support client-side routing? A: Yes. The @marko/router package provides client-side navigation while preserving streaming SSR for initial loads.

Sources

• https://github.com/marko-js/marko
• https://markojs.com