Skip to content
A friendly (and fast!) UI library from eBay that makes building web apps fun
Branch: master
Clone or download
Latest commit d161213 Mar 20, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github simplify PR template Aug 28, 2018
benchmark regenerate package-lock and run prettier Dec 11, 2018
bin Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019
docs Fixed misspelled "gelEl" to "getEl" (#1296) Mar 19, 2019
helpers Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019
scripts Upgrade <await> tag to use tag parameters and attribute tags. Add mig… Feb 7, 2019
src fix widget.elId as <var>/<assign> attribute (#1298) Mar 20, 2019
test fix widget.elId as <var>/<assign> attribute (#1298) Mar 20, 2019
.editorconfig Adding test case for issue #556 Feb 1, 2017
.eslintignore add coverage directory to eslintignore Mar 23, 2018
.eslintrc.json Add extension to .eslintrc (#1152) Oct 9, 2018
.gitignore Optional migrations & basic w-bind migration (#1192) Dec 14, 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 Mar 20, 2019
LICENSE MIT license Jan 3, 2017
README.md Update README.md Mar 13, 2019
browser-refresh.js Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019
compiler-browser.marko Fix 'marko is using deprecated features' message (#1250) Jan 31, 2019
compiler.js Format + lint (#1016) Mar 9, 2018
components-browser.marko
components.js Format + lint (#1016) Mar 9, 2018
env.js Format + lint (#1016) Mar 9, 2018
express.js
hot-reload.js Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019
index-browser.marko Fix 'marko is using deprecated features' message (#1250) Jan 31, 2019
index.js Format + lint (#1016) Mar 9, 2018
jquery.marko Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019
legacy-components-browser.marko
legacy-components.js Format + lint (#1016) Mar 9, 2018
node-require.js
package-lock.json 4.16.3 Mar 20, 2019
package.json 4.16.3 Mar 20, 2019
ready.marko Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019

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

<!-- Marko HTML syntax -->
<ul>
    <for|color| of=['a', 'b', 'c']>
        <li>${color}</li>
    </for>
</ul>
// Marko concise syntax
ul
    for|color| of=['a', 'b', 'c']
        li -- ${color}

Changelog

See CHANGELOG.md

Contributors

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

You can’t perform that action at this time.