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
moduleexports = { thisstate = count: 0 ; } { thisstatecount++; };
style.css
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 syntaxul.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 Gitter 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 - 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