JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Marko template engine
    Filed under  › 

    • 🔾81%Overall
    • 8,432
    • 17 hours
    • 🕩492
    • 👥8

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

    <!-- Marko HTML syntax -->
    <ul>
        <for|color| of=['a', 'b', 'c']>
            <li>${color}</li>
        </for>
    </ul>
    
    // Marko concise syntax
    ul
        for|color| of=['a', 'b', 'c']
            li -- ${color}
    

    Changelog

    See CHANGELOG.md

    Contributors

    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

    Show All