Need help with marko?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

marko-js
9.8K Stars 597 Forks MIT License 4.2K Commits 120 Opened issues

Description

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

Services available

!
?

Need anything else?

Contributors list

Marko

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

NPM Discord 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}

<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

    ${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.

  • ${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 | Come hang out in our Discord 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

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.