1 | <h1 align="center">
|
2 | <a href="https://markojs.com/"><img src="https://raw.githubusercontent.com/marko-js/branding/master/marko-logo-medium-cropped.png" alt="Marko" width="250" /></a>
|
3 | </h1>
|
4 |
|
5 | <p align="center">
|
6 | <strong>A declarative, HTML-based language that makes building web apps fun 🔥</strong>
|
7 | </p>
|
8 |
|
9 | <p align="center">
|
10 | <a href="https://www.npmjs.com/package/marko"><img alt="NPM" src="https://img.shields.io/npm/v/marko.svg"/></a>
|
11 | <a href="https://gitter.im/marko-js/marko"><img alt="Gitter" src="https://badges.gitter.im/Join%20Chat.svg"/></a>
|
12 | <a href="https://travis-ci.org/marko-js/marko"><img alt="Build Status" src="https://travis-ci.org/marko-js/marko.svg?branch=master"/></a>
|
13 | <a href="https://codecov.io/gh/marko-js/marko"><img alt="Coverage Status" src="https://codecov.io/gh/marko-js/marko/branch/master/graph/badge.svg"/></a>
|
14 | <a href="http://npm-stat.com/charts.html?package=marko"><img alt="Downloads" src="https://img.shields.io/npm/dm/marko.svg"/></a>
|
15 | </p>
|
16 |
|
17 | <p align="center">
|
18 | <a href="https://markojs.com/docs/">Docs</a> ∙ <a href="https://markojs.com/try-online/">Try Online</a> ∙ <a href="#contributors">Contribute</a> ∙ <a href="#community--support">Get Support</a>
|
19 | </p>
|
20 |
|
21 | # Intro
|
22 |
|
23 | Marko is HTML _re-imagined_ as a language for building dynamic and reactive user interfaces.
|
24 | Just about any valid HTML is valid Marko, but Marko extends the HTML language to allow
|
25 | building modern applications in a declarative way.
|
26 |
|
27 | 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/).
|
28 | Marko supports both single-file components and components broken into separate files.
|
29 |
|
30 | ## Single file component
|
31 |
|
32 | The following single-file component renders a button and a counter with the
|
33 | number of times the button has been clicked.
|
34 |
|
35 | **click-count.marko**
|
36 |
|
37 | ```marko
|
38 | class {
|
39 | onCreate() {
|
40 | this.state = { count:0 };
|
41 | }
|
42 | increment() {
|
43 | this.state.count++;
|
44 | }
|
45 | }
|
46 |
|
47 | style {
|
48 | .count {
|
49 | color:#09c;
|
50 | font-size:3em;
|
51 | }
|
52 | .example-button {
|
53 | font-size:1em;
|
54 | padding:0.5em;
|
55 | }
|
56 | }
|
57 |
|
58 | <div.count>
|
59 | ${state.count}
|
60 | </div>
|
61 | <button.example-button on-click('increment')>
|
62 | Click me!
|
63 | </button>
|
64 | ```
|
65 |
|
66 | ## Multi-file component
|
67 |
|
68 | The same component as above split into an `index.marko` template file,
|
69 | `component.js` containing your component logic, and `style.css` containing your
|
70 | component style:
|
71 |
|
72 | **index.marko**
|
73 |
|
74 | ```marko
|
75 | <div.count>
|
76 | ${state.count}
|
77 | </div>
|
78 | <button.example-button on-click('increment')>
|
79 | Click me!
|
80 | </button>
|
81 | ```
|
82 |
|
83 | **component.js**
|
84 |
|
85 | ```js
|
86 | module.exports = {
|
87 | onCreate() {
|
88 | this.state = { count: 0 };
|
89 | },
|
90 | increment() {
|
91 | this.state.count++;
|
92 | }
|
93 | };
|
94 | ```
|
95 |
|
96 | **style.css**
|
97 |
|
98 | ```css
|
99 | .count {
|
100 | color: #09c;
|
101 | font-size: 3em;
|
102 | }
|
103 | .example-button {
|
104 | font-size: 1em;
|
105 | padding: 0.5em;
|
106 | }
|
107 | ```
|
108 |
|
109 | ## Concise Syntax
|
110 |
|
111 | Marko also supports a beautifully concise syntax as an alternative to its HTML
|
112 | syntax. Find out more about the [concise syntax here](https://markojs.com/docs/concise/).
|
113 |
|
114 | ```marko
|
115 | <!-- Marko HTML syntax -->
|
116 | <ul class="example-list">
|
117 | <for|color| of=['a', 'b', 'c']>
|
118 | <li>${color}</li>
|
119 | </for>
|
120 | </ul>
|
121 | ```
|
122 |
|
123 | ```marko
|
124 | // Marko concise syntax
|
125 | ul.example-list
|
126 | for|color| of=['a', 'b', 'c']
|
127 | li -- ${color}
|
128 | ```
|
129 |
|
130 | # Getting Started
|
131 |
|
132 | 1. `npm install marko`
|
133 | 2. Read the [docs](https://markojs.com/docs/)
|
134 |
|
135 | # Community & Support
|
136 |
|
137 | | <a href="https://stackoverflow.com/questions/tagged/marko"><img src="https://user-images.githubusercontent.com/1958812/56055468-619b3e00-5d0e-11e9-92ae-200c212cafb8.png" height="50px"/></a> | <a href="https://gitter.im/marko-js/marko"><img src="https://user-images.githubusercontent.com/1958812/56055573-9c04db00-5d0e-11e9-9fd3-0395edf631a0.png" height="60px"/></a> | <a href="https://twitter.com/intent/tweet?hashtags=markojs"><img src="https://user-images.githubusercontent.com/1958812/56055707-07e74380-5d0f-11e9-8a59-d529fbb5a81e.png" height="40px"/></a> |
|
138 | | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
139 | | 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) |
|
140 |
|
141 | # Contributors
|
142 |
|
143 | Marko would not be what it is without all those who have contributed ✨
|
144 |
|
145 | <a href="https://github.com/marko-js/marko/graphs/contributors">
|
146 | <img src="https://opencollective.com/marko-js/contributors.svg?width=890&button=false"/>
|
147 | </a>
|
148 |
|
149 | ## Get Involved!
|
150 |
|
151 | - Pull requests are welcome!
|
152 | - 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
|
153 | - Submit github issues for any feature enhancements, bugs or documentation problems
|
154 | - By participating in this project you agree to abide by its [Code of Conduct](https://ebay.github.io/codeofconduct).
|
155 |
|
156 | # License
|
157 |
|
158 | MIT
|