markojs
v4.18.21
UI Components + streaming, async, high performance, HTML templating for Node.js and the browser.
0/weekUpdated 3 years agoMITUnpacked: 2.2 MB
Published by Patrick Steele-Idem
npm install markojs
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
``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;
}
}
${state.count}
Click me!
`
Multi-file component
The same component as above split into an
template file,
component.js containing your component logic, and style.css containing your
component style:index.marko
`marko
${state.count}
Click me!
`
component.js
js
module.exports = {
onCreate() {
this.state = { count: 0 };
},
increment() {
this.state.count++;
}
};
`style.css
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
- ${color}
`marko
// Marko concise syntax
ul.example-list
for|color| of=['a', 'b', 'c']
li -- ${color}
`Getting Started
1.
2. Read the docsCommunity & Support
| 
| 
| 
|
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Ask and answer StackOverflow questions with the
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!
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