JavaScript HTML
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.github remove artificial memory limit, npm test is just mocha now Jun 28, 2018
benchmark Update prettier (#1062) Jun 21, 2018
bin add a quiet option to markoc (#1030) Apr 6, 2018
docs fix missing module to install (#1110) Aug 16, 2018
helpers Format + lint (#1016) Mar 9, 2018
scripts Format + lint (#1016) Mar 9, 2018
src Fix node inspect deprecation warning. (#1111) Aug 17, 2018
test fix event names with dashes Aug 16, 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 2, 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.12.5 Aug 17, 2018
package.json 4.12.5 Aug 17, 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