DOCSEARCHbyAlgolia
Submit Docs

Marko Language and JavaScript Framework

website·Indexed 36 days ago

https://markojs.com

A language and framework designed for building fast, scalable, and maintainable applications. Marko 6 features a Tags API, targeted compilation for server and client, HTML streaming, and fine-grained bundling to minimize client-side JavaScript. The documentation covers the Marko Language reference, reactivity, state management with <let> and <const>, and the Marko Run application framework with file-based routing.

Tokens
55.6K
Snippets
330
Records
430
Agent score
72%

What's inside Marko

  1. Overview of Marko 6

    Marko is a language for building dynamic and reactive user interfaces that extends HTML. It allows developers to build modern applications in a declarative way, while ensuring that nearly any valid HTML is also valid Marko.

  2. Overview of Marko Run (@marko/run)

    Marko Run is an application framework for Marko that transforms a directory of Marko templates into a full web application. It is powered by Vite and provides built-in support for file-based routing, nested layouts, middleware, streaming server-side rendering, and platform-specific adapters. It works with zero configuration by default, shipping with a default Vite config and a Node-based adapter.

  3. Overview of HTML Streaming in Marko

    HTML streaming in Marko sends content to the browser incrementally as it is generated, rather than buffering the entire page on the server. This improves perceived performance (faster Time to First Byte, earlier asset downloads) and reduces server memory usage. Marko supports both in-order streaming (HTML arrives in document order) and out-of-order streaming (fragments arrive as data becomes ready and are rearranged on the client via minimal JavaScript).

  4. Overview of the marko-run CLI

    The marko-run CLI is used to develop, build, and preview Marko Run applications. It is installed as part of the @marko/run package and can be executed via npm exec marko-run or defined within package.json scripts. All CLI commands support the following global options:

    • -c, --config: Path to a Vite config file. By default, the CLI searches for vite.config with extensions .js, .cjs, .mjs, .ts, or .mts.
    • -e, --env: Path to a .env (dotenv) file.

  5. Overview of Marko's core philosophy

    Marko is designed to deliver fast, scalable, robust, and maintainable applications by evolving HTML itself rather than replacing it with JavaScript abstractions. It aims to solve three fundamental web development problems: the inability of static HTML to scale for dynamic applications, the high boilerplate and manual coordination required for components, and the unnecessary runtime burden placed on users' browsers.

  6. Overview of the Marko language

    Marko is a declarative language designed for building performant and scalable websites. It addresses the limitations of vanilla HTML, CSS, and JavaScript by providing a component-based architecture, managed state, and a performance-first architecture that optimizes both server and client delivery.

  7. Ship zero JavaScript for fully static pages

    When a page renders no interactive components and no template requires client initialization, Marko automatically skips writing the runtime and asset references into the HTML. This ensures that fully static routes ship zero client-side JavaScript assets.

  8. Improve initialization with Resumability

    Marko avoids the traditional 'hydration' process where the client re-executes server-side work. Instead, it uses resumability: the server embeds comment markers and serialized state in the HTML. The client-side code simply hooks up event listeners and deserializes state to resume execution without re-rendering the templates.

  9. Leverage Compile-Time Reactivity

    Marko performs reactivity analysis during compilation rather than at runtime. The compiler identifies mutable state and the specific DOM nodes that depend on that state. When a value changes, the runtime executes a pre-computed sequence of updates, eliminating the need for runtime dependency tracking.
    <let/count=0>
<const/doubled=count * 2>

<button onClick() { count++ }>${count} × 2 = ${doubled}</button>

  10. Understand Marko's Targeted Compilation

    The Marko compiler produces two distinct outputs optimized for their respective environments:

    1. Server Compilation: Renders directly to an HTML stream in a single pass using string concatenations. It avoids the overhead of creating an intermediate virtual DOM tree in memory.
    2. Client Compilation: Includes only stateful values, event handlers, <script> effects, and a tree-shaken runtime. Because reactivity is handled at compile-time, no JS-based representation of the DOM is sent to the client.

  11. Understand Marko's Targeted Compilation strategy

    Marko uses a dual-target compilation approach to optimize templates for different runtime environments. Instead of a one-size-fits-all strategy, it generates environment-specific code to maximize performance:

    • Server-side: Templates compile to efficient string concatenation operations to build HTML, avoiding DOM creation overhead and supporting HTML streaming.
    • Client-side: Templates compile to minimal JavaScript focused exclusively on interactive portions. It generates reactive state for variables, targeted update functions for affected DOM nodes, and event handlers.

    Static content (e.g., ${input.title}) produces no client-side JavaScript because it does not change after the initial render, resulting in smaller bundle sizes that scale with actual interactivity rather than total codebase size.

  12. Manage state in Uncontrolled vs Controlled components

    In Marko, components are categorized by their source of truth:

    • Uncontrolled: Manage their own state internally (e.g., using <let>). They are easy to drop into any page but the parent cannot access their internal state.
    • Controlled: Receive state via input props and notify the parent of changes via callbacks. The parent has full control but must provide boilerplate state management.