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