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

Docs ∙ Try Online ∙ Contribute ∙ Get Support

Intro

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.

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>

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:

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 : 3 em ; } . example-button { font-size : 1 em ; padding : 0.5 em ; }

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

npm install marko Read the docs

Community & Support

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

Contributors

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

Get Involved!

Pull requests are welcome!

Read CONTRIBUTING.md and check out our bite-sized and help-wanted issues

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.

License

MIT