Marko

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

UI Framework
marko-js/markomarkojs.com/marko

README

Marko

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

NPM Discord Build status Coverage Status Downloads

Docs ∙ Try Online ∙ Contribute ∙ Get Support

Intro


Marko is HTML re-imaginedas 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

  1. ``` marko
  2. class {
  3.     onCreate() {
  4.         this.state = { count: 0 };
  5.     }
  6.     increment() {
  7.         this.state.count++;
  8.     }
  9. }

  11. style {
  12.     .count {
  13.         color: #09c;
  14.         font-size: 3em;
  15.     }
  16.     .example-button {
  17.         font-size: 1em;
  18.         padding: 0.5em;
  19.     }
  20. }

  22. <div.count>
  23.     ${state.count}
  24. </div>
  25. <button.example-button on-click('increment')>
  26.     Click me!
  27. </button>
  28. ```

Multi-file component


The same component as above split into an index.markotemplate file, component.jscontaining your component logic, and style.csscontaining your component style:

index.marko

  1. ``` marko
  2. <div.count>
  3.     ${state.count}
  4. </div>
  5. <button.example-button on-click('increment')>
  6.     Click me!
  7. </button>
  8. ```

component.js

  1. ``` js
  2. export default {
  3.   onCreate() {
  4.     this.state = { count: 0 };
  5.   },
  6.   increment() {
  7.     this.state.count++;
  8.   }
  9. };
  10. ```

style.css

  1. ``` css
  2. .count {
  3.   color: #09c;
  4.   font-size: 3em;
  5. }
  6. .example-button {
  7.   font-size: 1em;
  8.   padding: 0.5em;
  9. }
  10. ```

Concise Syntax


Marko also supports a beautifully concise syntax as an alternative to its HTML syntax. Find out more about the concise syntax here .

  1. ``` marko
  3. <ul class="example-list">
  4.     <for|color| of=['a', 'b', 'c']>
  5.         <li>${color}</li>
  6.     </for>
  7. </ul>
  8. ```

  1. ``` marko
  2. // Marko concise syntax
  3. ul.example-list
  4.     for|color| of=['a', 'b', 'c']
  5.         li -- ${color}
  6. ```

Getting Started


npm install marko
Read the docs

Community & Support


| undefined | undefined | undefined |
| :--- | :--- | :--- |
| 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 ✨

undefined

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