Marko

Marko is a declarative, HTML-based language for building dynamic and reactive user interfaces, distributed as an open-source npm package with 14,396 stars on GitHub.

What is Marko?

Marko is an HTML-based language and UI framework that accepts almost any valid HTML and extends it with components, conditionals, loops, and a built-in reactivity system. It compiles .marko files into JavaScript that can run on both the browser and the Node.js server, making it an isomorphic solution for web app development. The project is maintained by the marko-js GitHub organization and used widely since the repository has accumulated 14,396 stars. Its documentation lives at markojs.com, and it provides an online playground for trying code in the browser.

Key features

• HTML-compatible syntax — Almost any valid HTML is valid Marko, so existing templates and markup require little to no modification.
• Declarative reactivity — State is declared with <let> tags, and the framework automatically updates the DOM when that state changes.
• Components — Custom tags allow building reusable UI components, with examples like a button that counts clicks using onClick().
• Conditionals and loops — Core tags such as <if>, <else>, and <for> add logic directly in markup.
• Server-side rendering — The same component code renders on the server for fast initial page loads.
• Client-side hydration — Components become interactive in the browser after server rendering.
• Isomorphic architecture — Works across both Node.js and browser environments with a single codebase.
• Scaffolding CLI — npm init marko generates a new project from the command line.

Who is Marko for?

Marko is for frontend developers who prefer writing UI in an HTML-like declarative syntax rather than JavaScript-heavy JSX or template literals. It also suits full-stack engineers building Node.js applications that need server-rendered pages that hydrate into interactive client-side components. Additionally, it benefits teams that want a single component language shared across server and client, avoiding separate template and frontend codebases.

What can you do with Marko?

• Indie web developers: build interactive components such as counters, forms, and dynamic content blocks without leaving an HTML-like language.
• Full-stack teams: create isomorphic applications where the same Marko components render on the server and then become reactive in the browser.
• UI library creators: package custom tags into reusable component libraries using Marko's component and event APIs.

How does Marko work?

To start, run npm init marko in your terminal to scaffold a new Marko project. Components are written in .marko files, and the Marko compiler turns them into JavaScript modules that run in the browser or on the server. The online playground at markojs.com/playground lets you experiment with Marko without installing anything.

FAQ

Is Marko free to use?

Yes, Marko is open-source software. The source code is publicly hosted on GitHub under the marko-js organization, and the package is distributed through npm.

What does Marko do?

Marko is a language for building web app user interfaces. It extends HTML with components, conditionals, loops, and reactivity so that you can define interactive UI declaratively, and it compiles those definitions into JavaScript for the browser and Node.js.

Can Marko be used with server-side rendering?

Yes. Marko supports server-side rendering, allowing the same components to be rendered on the Node.js server and then hydrated on the client for interactivity.

Where can I learn Marko?

The official documentation is at markojs.com/docs/introduction/getting-started, and the community discusses Marko on Discord at discord.gg/marko. You can also try code in the online playground at markojs.com/playground.