JavaScripting

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


  • ×

    Marko template engine
    Filed under  › 

    • 🔾81%Overall
    • 13,082
    • 14 hours
    • 🕩631
    • 👥7
    # Marko A declarative, HTML-based language that makes building web apps fun 🔥 NPM Discord Chat Continuous Integration status Code coverage % # of monthly downloads OpenSSF Best Practices DocsTry OnlineContributeGet Support

    Intro

    Marko is HTML reimagined 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 are conditionals and lists, state, and components.

    Marko supports both single-file components and components across separate files.

    Single-file component

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

    Multi-file component

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

    component.js

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

    style.css

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

    Concise Syntax

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

    Concise syntaxHTML syntax
    marko ul.example-list for|color| of=[a, b, c] li -- ${color} marko <ul class="example-list"> <for|color| of=[a, b, c]> <li>${color}</li> </for> </ul>

    Getting Started

    1. npm install marko
    2. Read the docs

    Community & Support

    Stack Overflow Discord Twitter
    Ask and answer StackOverflow questions with the #marko tag Come hang out in our Discord chat, 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 ✨

    All marko-js/marko GitHub contributors

    Get Involved!

    Show All