Markojs is a friendly (and fast!) UI library that makes building web apps fun. Marko provides an elegant and readable syntax for both single-file components and components broken into separate files.

Core Java Script



A declarative, HTML-based language that makes building web apps fun 🔥

NPM Gitter Build Status Coverage Status Downloads

DocsTry OnlineContributeGet Support


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.

Among these extensions are conditionals, lists, state, and components. Marko supports both single-file components and components broken into separate files.

Single file component

The following single-file component renders a button and a counter with the number of times the button has been clicked.


class {     onCreate() {         this.state = { count:0 };     }     increment() {         this.state.count++;     } }  style {     .count {         color:#09c;         font-size:3em;     }     .example-button {         font-size:1em;         padding:0.5em;     } }  <div.count>     ${state.count} </div> <button.example-button on-click('increment')>     Click me! </button>

Multi-file component

The same component as above split into an index.marko template file, component.js containing your component logic, and style.css containing your component style:


<div.count>     ${state.count} </div> <button.example-button on-click('increment')>     Click me! </button>


module.exports = {   onCreate() {     this.state = { count: 0 };   },   increment() {     this.state.count++;   } };


.count {   color: #09c;   font-size: 3em; } .example-button {   font-size: 1em;   padding: 0.5em; }

Concise Syntax

Marko also supports a beautifully concise syntax as an alternative to its HTML syntax. Find out more about the concise syntax here.

<!-- Marko HTML syntax --> <ul class="example-list">     <for|color| of=['a', 'b', 'c']>         <li>${color}</li>     </for> </ul>
// Marko concise syntax ul.example-list     for|color| of=['a', 'b', 'c']         li -- ${color}

Getting Started

  1. npm install marko
  2. Read the docs

Community & Support

Ask and answer StackOverflow questions with the marko tag Come hang out in our Gitter chat room, ask questions, and discuss project direction Tweet to @MarkoDevTeam or with the #markojs hashtag


Marko would not be what it is without all those who have contributed

Get Involved!

  • Pull requests are welcome!
  • Read and check out our bite-sized and help-wanted issues
  • Submit github issues for any feature enhancements, bugs or documentation problems
  • By participating in this project you agree to abide by its Code of Conduct.



You May Also Like