Marko makes it easy to represent your UI using a syntax that is like HTML:
h1 -- Hello World
In fact, Marko is so much like HTML, that you can use it as a replacement for a templating language like handlebars, mustache, or pug:
<html><head><title>Hello World</title></head><body><h1>Hello World</h1></body></html>
htmlheadtitle -- Hello Worldbodyh1 -- Hello World
However, Marko is much more than a templating language. It's a UI library that allows you to break your application into components that are self-contained and describe how the application view changes over time and in response to user actions.
In the browser, when the data representing your UI changes, Marko will automatically and efficiently update the DOM to reflect the changes.
Let's say we have a
<button> that we want to assign some behavior to when it is clicked:
button -- Click me!
Marko makes this really easy, allowing you to define a
class for a component right in the
.marko view and call methods of that class with
class<button on-click'sayHi')>Click me!</button>
classbutton on-click'sayHi') -- Click me!
Alerting when a button is clicked is great, but what about updating your UI in response to an action? Marko's stateful components make this easy. All you need to do is set
this.state from inside your component's class. This makes a new
state variable available to your view. When a value in
this.state is changed, the view will automatically re-render and only update the part of the DOM that changed.
class<div>The current count is </div><button on-click'increment')>Click me!</button>
classdiv -- The current count isbutton on-click'increment') -- Click me!
Helpful? You can thank these awesome people! You can also edit this doc if you see any issues or want to improve it.