Github url


by marko-js

marko-js /marko

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

9.6K Stars 584 Forks Last release: Not found MIT License 4.2K Commits 625 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:


A declarative, HTML-based language that makes building web apps fun πŸ”₯

NPMGitterBuild StatusCoverage StatusDownloads

Docs βˆ™ Try Online βˆ™ Contribute βˆ™ Get Support


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.


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>

<button.example-button on-click>
    Click me!


Multi-file component

The same component as above split into an


template file,


containing your component logic, and


containing your component style:



<button.example-button on-click>
    Click me!



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


.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 -->
  • ${color}
  • ``` // 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 [


    tag]( | Come hang out in our Gitter chat room, ask questions, and discuss project direction | Tweet to [


    ]( or with the [


    hashtag]( |


    Marko would not be what it is without all those who have contributed ✨

    Get Involved!



    We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.