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](https://markojs.com/docs/conditionals-and-lists/#conditionals), [lists](https://markojs.com/docs/conditionals-and-lists/#lists), [state](https://markojs.com/docs/state/), and [components](https://markojs.com/docs/class-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** ```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; } } ${state.count} Click me! ``` ## 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** ```marko ${state.count} Click me! ``` **component.js** ```js module.exports = { onCreate() { this.state = { count: 0 }; }, increment() { this.state.count++; } }; ``` **style.css** ```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](https://markojs.com/docs/concise/). ```marko

${color}

``` ```marko // Marko concise syntax ul.example-list for|color| of=['a', 'b', 'c'] li -- ${color} ``` # Getting Started 1. `npm install marko` 2. Read the [docs](https://markojs.com/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! - Pull requests are welcome! - Read [`CONTRIBUTING.md`](.github/CONTRIBUTING.md) and check out our [bite-sized](https://github.com/marko-js/marko/issues?q=is%3Aissue+is%3Aopen+label%3Adifficulty%3Abite-sized) and [help-wanted](https://github.com/marko-js/marko/issues?q=is%3Aissue+is%3Aopen+label%3Astatus%3Ahelp-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](https://ebay.github.io/codeofconduct). # License MIT