Marko is HTML reimagined as a language for building dynamic and reactive user interfaces. Almost any valid HTML is valid Marko, and Marko extends HTML for building modern applications more declaratively. Among these extensions are conditionals and lists, state, and components.
Marko supports both single-file components and components across separate files.
The following renders a button and a counter of how many times the button has been pressed:
click-count.marko
class {
onCreate() {
this.state = { count: 0 };
}
increment() {
this.state.count++;
}
}
style {
.count {
color: #09c;
font-size: 3em;
}
.press-me {
padding: 0.5em;
}
}
<output.count>
${state.count}
</output>
<button.press-me on-click('increment')>
Press me!
</button>
The same component as above, but split into:
index.marko template filecomponent.js component JS logic filestyle.css component styles fileindex.marko
<output.count>
${state.count}
</output>
<button.press-me on-click('increment')>
Press me!
</button>
component.js
export default {
onCreate() {
this.state = { count: 0 };
},
increment() {
this.state.count++;
},
};
style.css
.count {
color: #09c;
font-size: 3em;
}
.press-me {
padding: 0.5em;
}
Marko also supports a beautifully concise syntax as an alternative to its HTML syntax:
Concise syntax HTML syntaxul.example-list
for|color| of=[a, b, c]
li -- ${color}
<ul class="example-list">
<for|color| of=[a, b, c]>
<li>${color}</li>
</for>
</ul>
npm install markoMarko would not be what it is without all those who have contributed ✨
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4