Popularity
7.8
Growing
Activity
9.1
Declining
9,312
237
568

Description

Marko is a really fast and lightweight HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. Learn more on http://markojs.com/.

You can try out Marko online: Try Marko Online!

Code Quality Rank: L3
Monthly Downloads: 0
Programming language: JavaScript
License: MIT License
Tags: Templating Engines     UI     Async     Front-end     Template     DOM     Templating     Streaming     Virtual     Virtual Dom     components     Vdom     Widgets     Morphdom    
Latest version: v4.18.28

marko alternatives and similar libraries

Based on the "Templating Engines" category

Do you think we are missing an alternative of marko or a related project?

Add another 'Templating Engines' Library
Proactively identify front-end issues with easy-to-build synthetics tests. 14-day free trial.
More from our partner

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
More from our team

README

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

Docs ∙ Try Online ∙ Contribute ∙ Get 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](.github/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


*Note that all licence references and agreements mentioned in the marko README section above are relevant to that project's source code only.