A friendly (and fast!) UI library from eBay that makes building web apps fun
Switch branches/tags
Clone or download
Latest commit 2d3ff47 Sep 14, 2018
Permalink
Failed to load latest commit information.
.github simplify PR template Aug 28, 2018
benchmark Update prettier (#1062) Jun 21, 2018
bin add a quiet option to markoc (#1030) Apr 6, 2018
docs Fixed typos in components.md (#1127) Sep 13, 2018
helpers Format + lint (#1016) Mar 9, 2018
scripts Format + lint (#1016) Mar 9, 2018
src add additional reference to fragment (#1130) Sep 14, 2018
test Fix component dom insert (#1129) Sep 14, 2018
.editorconfig Adding test case for issue #556 Feb 1, 2017
.eslintignore add coverage directory to eslintignore Mar 23, 2018
.eslintrc Format + lint (#1016) Mar 9, 2018
.gitignore fix for loop autokeys (#1067) Jun 26, 2018
.npmignore Updated component docs Jul 11, 2017
.npmrc Add lock file. Jun 15, 2018
.prettierignore fix formatting, ignore ~* when formatting Jun 25, 2018
.travis.yml drop node 4/9 add node 10 Jun 19, 2018
CHANGELOG.md Update changelog Aug 30, 2018
LICENSE MIT license Jan 3, 2017
README.md Update prettier (#1062) Jun 21, 2018
ROADMAP.md Introduced src/ and dist/ folders May 19, 2017
browser-refresh.js Format + lint (#1016) Mar 9, 2018
compiler-browser.marko Code comments May 19, 2017
compiler.js Format + lint (#1016) Mar 9, 2018
components-browser.marko Code comments May 19, 2017
components.js Format + lint (#1016) Mar 9, 2018
env.js Format + lint (#1016) Mar 9, 2018
express.js Format + lint (#1016) Mar 9, 2018
hot-reload.js Format + lint (#1016) Mar 9, 2018
index-browser.marko Code comments May 19, 2017
index.js Format + lint (#1016) Mar 9, 2018
jquery.marko Introduced src/ and dist/ folders May 19, 2017
legacy-components-browser.marko Code comments May 19, 2017
legacy-components.js Format + lint (#1016) Mar 9, 2018
node-require.js Format + lint (#1016) Mar 9, 2018
package-lock.json 4.13.5 Sep 14, 2018
package.json 4.13.5 Sep 14, 2018
ready.marko Introduced src/ and dist/ folders May 19, 2017

README.md

Marko logo

Marko is a friendly (and fast!) UI library that makes building web apps fun. Learn more on markojs.com, and even Try Marko Online!

Build Status Coverage Status Gitter NPM Downloads

Get Involved

  • Contributing: Pull requests are welcome!
  • Support: Join our gitter chat to ask questions to get support from the maintainers and other Marko developers
  • Discuss: Tweet using the #MarkoJS hashtag and follow @MarkoDevTeam

Installation

npm install marko --save

Examples

Marko provides an elegant and readable syntax for both single-file components and components broken into separate files. There are plenty of examples to play with on Marko's Try-Online. Additional component documentation can be found on the Marko.js website.

Single file

The following single-file component renders a button and a counter with the number of times the button has been clicked. Try this example now!

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}
</div>
<button.example-button on-click('increment')>
    Click me!
</button>

Multi-file

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

<div.count>
    ${state.count}
</div>
<button.example-button on-click('increment')>
    Click me!
</button>

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 support a beautiful concise syntax as an alternative to the HTML syntax. Find out more about the concise syntax here.

<!-- Marko HTML syntax -->
<ul>
    <li for(color in ['a', 'b', 'c'])>
        ${color}
    </li>
</ul>
// Marko concise syntax
ul
    li for(color in ['a', 'b', 'c'])
        -- ${color}

Changelog

See CHANGELOG.md

Maintainers

Code of Conduct

This project adheres to the eBay Code of Conduct. By participating in this project you agree to abide by its terms.

License

MIT