Github url

marko

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:

Marko

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

NPMGitterBuild StatusCoverage StatusDownloads

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}

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

</button.example-button></div.count>

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}

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

</button.example-button></div.count>

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 -->
  • ${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 [

    marko

    tag](https://stackoverflow.com/questions/tagged/marko) | Come hang out in our Gitter chat room, ask questions, and discuss project direction | Tweet to [

    @MarkoDevTeam

    ](https://twitter.com/MarkoDevTeam) or with the [

    #markojs

    hashtag](https://twitter.com/search?q=%23markojs&f=live) |

    Contributors

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

    Get Involved!

    License

    MIT

    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.