# [Marko](https://markojs.com/) **A declarative, HTML-based language that makes building web apps fun 🔥** [![NPM](https://img.shields.io/npm/v/marko.svg)](https://www.npmjs.com/package/marko) [![Discord Chat](https://img.shields.io/badge/discord-chat-7188da.svg)](https://discord.gg/RFGxYGs) [![Continuous Integration status](https://github.com/marko-js/marko/actions/workflows/ci.yml/badge.svg)](https://github.com/marko-js/marko/actions/workflows/ci.yml) [![Code coverage %](https://codecov.io/gh/marko-js/marko/branch/master/graph/badge.svg)](https://codecov.io/gh/marko-js/marko) [![# of monthly downloads](https://img.shields.io/npm/dm/marko.svg)](https://npm-stat.com/charts.html?package=marko) [![OpenSSF Best Practices](https://bestpractices.coreinfrastructure.org/projects/7029/badge)](https://bestpractices.coreinfrastructure.org/projects/7029) [Docs](https://markojs.com/docs/getting-started/) ∙ [Try Online](https://markojs.com/try-online/) ∙ [Contribute](#contributors) ∙ [Get Support](#community--support)
## Intro Marko is HTML _reimagined_ as a language for building dynamic and reactive user interfaces. Almost any valid HTML is valid Marko, and Marko extends HTML for building modern applications more declaratively. Among these extensions are [conditionals and lists](https://markojs.com/docs/conditionals-and-lists/), [state](https://markojs.com/docs/state/), and [components](https://markojs.com/docs/class-components/). Marko supports both single-file components and components across separate files. ### Single-file component The following renders a button and a counter of how many times the button has been pressed: **click-count.marko** ```marko class { onCreate() { this.state = { count: 0 }; } increment() { this.state.count++; } } style { .count { color: #09c; font-size: 3em; } .press-me { padding: 0.5em; } } ${state.count} Press me! ``` ### Multi-file component The same component as above, but split into: - `index.marko` template file - `component.js` component JS logic file - `style.css` component styles file **index.marko** ```marko ${state.count} Press me! ``` **component.js** ```js export default { onCreate() { this.state = { count: 0 }; }, increment() { this.state.count++; }, }; ``` **style.css** ```css .count { color: #09c; font-size: 3em; } .press-me { padding: 0.5em; } ``` ## Concise Syntax Marko also supports [a beautifully concise syntax as an alternative](https://markojs.com/docs/concise/) to its HTML syntax:
Concise syntaxHTML syntax
```marko ul.example-list for|color| of=[a, b, c] li -- ${color} ``` ```marko
  • ${color}
```
## Getting Started 1. `npm install marko` 2. Read the [docs](https://markojs.com/docs/getting-started/) ## Community & Support
Stack Overflow Discord Twitter
Ask and answer [StackOverflow questions with the `#marko` tag](https://stackoverflow.com/questions/tagged/marko) Come [hang out in our Discord chat](https://discord.gg/RFGxYGs), 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 ✨ [![All marko-js/marko GitHub contributors](https://opencollective.com/marko-js/contributors.svg?width=890&button=false)](https://github.com/marko-js/marko/graphs/contributors) ### Get Involved! - Pull requests are welcome! - Submit [GitHub issues](https://github.com/marko-js/marko/issues) for any feature enhancements, bugs, or documentation problems - [Read the Contribution Tips and Guidelines](.github/CONTRIBUTING.md) - Participants in this project agree to abide by [its Code of Conduct](https://github.com/eBay/.github/blob/main/CODE_OF_CONDUCT.md)