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

Docs ∙ Try Online ∙ Contribute ∙ Get 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.

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

click-count.marko

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>

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:

index.marko

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

component.js

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

style.css

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

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}

1. npm install marko
2. Read the docs

Ask and answer StackOverflow questions with the marko tag	Come hang out in our Discord 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 ✨

• Pull requests are welcome!
• Read CONTRIBUTING.md 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.

MIT