marko alternatives and similar modules
Based on the "Templating" category
-
nunjucks
A powerful templating engine with inheritance, asynchronous control, and more (jinja2 inspired). -
handlebars.js
A superset of Mustache templates which adds powerful features like helpers and more advanced blocks. -
express-react-views
This is an Express view engine which renders React components on server. It renders static markup and *does not* support mounting those views on the client.
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest. Visit our partner's website for more details.
Do you think we are missing an alternative of marko or a related project?
|
Visualize, monitor, and alert on Node.js performance metrics. Free trial:
More from our partner
|
Popular Comparisons
|
SaaSHub - Software Alternatives and Reviews
More from our team
|
README
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: 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.md](.github/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
*Note that all licence references and agreements mentioned in the marko README section above
are relevant to that project's source code only.