JavaScripting

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


  • ×

    Marko template engine
    Filed under  › 

    • 🔾82%Overall
    • 9,177
    • 1.1 days
    • 🕩570
    • 👥10

    Marko

    A declarative, HTML-based language that makes building web apps fun 🔥

    NPM Gitter Build Status Coverage Status Downloads

    DocsTry OnlineContributeGet 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

    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 component

    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 its HTML syntax. Find out more about the concise syntax here.

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

    Getting Started

    1. npm install marko
    2. Read the docs

    Community & Support

    Ask and answer StackOverflow questions with the marko 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!

    • Pull requests are welcome!
    • Read 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

    Show All