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}
npm install marko
- Read the docs
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 ✨
- 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