Skip to content

ianvonholt/marko

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Marko logo

Marko is a friendly (and fast!) UI library that makes building web apps fun. Learn more on markojs.com, and even Try Marko Online!

Build Status Coverage Status Gitter NPM Downloads

Get Involved

  • Contributing: Pull requests are welcome!
  • Support: Join our gitter chat to ask questions to get support from the maintainers and other Marko developers
  • Discuss: Tweet using the #MarkoJS hashtag and follow @MarkoDevTeam

Installation

npm install marko --save

Examples

Marko provides an elegant and readable syntax for both single-file components and components broken into separate files. There are plenty of examples to play with on Marko's Try-Online. Additional component documentation can be found on the Marko.js website.

Single file

The following single-file component renders a button and a counter with the number of times the button has been clicked. Try this example now!

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

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 support a beautiful concise syntax as an alternative to the HTML syntax. Find out more about the concise syntax here.

<!-- Marko HTML syntax -->
<ul>
    <li for(color in ['a', 'b', 'c'])>
        ${color}
    </li>
</ul>
// Marko concise syntax
ul
    li for(color in ['a', 'b', 'c'])
        -- ${color}

Changelog

See CHANGELOG.md

Maintainers

Code of Conduct

This project adheres to the eBay Code of Conduct. By participating in this project you agree to abide by its terms.

License

MIT

About

Marko template engine

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 76.1%
  • HTML 23.9%