Repository files navigation

Marko is HTMLreimagined 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 areconditionals and lists,state, andcomponents.

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-meon-click('increment')>  Press me!</button>

The same component as above, but split into:

• index.marko template file
• component.js component JS logic file
• style.css component styles file

index.marko

<output.count>${state.count}</output><button.press-meon-click('increment')>  Press me!</button>

component.js

exportdefault{onCreate(){this.state={count:0};},increment(){this.state.count++;},};

style.css

.count {color:#09c;font-size:3em;}.press-me {padding:0.5em;}

Marko also supportsa beautifully concise syntax as an alternative to its HTML syntax:

ul.example-listfor|color|of=[a, b, c]li --${color}

<ulclass="example-list">  <for|color|of=[a, b, c]>    <li>${color}</li>  </for></ul>

1. npm install marko
2. Read thedocs

Ask and answerStackOverflow questions with the#marko tag	Comehang out in our Discord chat, 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!
• SubmitGitHub issues for any feature enhancements, bugs, or documentation problems
• Read the Contribution Tips and Guidelines
• Participants in this project agree to abide byits Code of Conduct