marko 0,0,1,1,4,12,0,3 travis-ci npm

A friendly (and fast!) UI library from eBay that makes building web apps fun

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

License

MIT

Related Repositories

marko-cli

marko-cli

command-line tools for Marko ...

marko-async

marko-async

Async taglib for Marko v2 ...

marko-devtools

marko-devtools

Developer tools for Marko ...

atom-language-marko

atom-language-marko

Syntax highlighting in Atom for the Marko templating language ...

episode-8-serving-content-in-koajs-with-marko

episode-8-serving-content-in-koajs-with-marko

Source for screencast: Episode 8 serving content in koajs with Marko ...


Top Contributors

patrick-steele-idem mlrawlings philidem tindli kristianmandrup yomed aselvaraj ramahadevan bkniffler bkuri dimichgh BryceEWatson kprakasam seangates scttdavs austin-rausch felixsanz ianvonholt jsumners dizlexik tropperstyle merwan7 sdepold briceburg gitter-badger zephraph ianma pedramphp

Dependencies

package version
app-module-path ^2.2.0
argly ^1.0.0
browser-refresh-client ^1.0.0
char-props ~0.1.5
complain ^1.0.0
deresolve ^1.1.2
escodegen ^1.8.1
esprima ^3.1.1
estraverse ^4.2.0
events ^1.0.2
events-light ^1.0.0
he ^1.1.0
htmljs-parser ^2.3.2
lasso-caching-fs ^1.0.1
lasso-modules-client ^2.0.3
lasso-package-root ^1.0.1
listener-tracker ^2.0.0
minimatch ^3.0.2
object-assign ^4.1.0
property-handlers ^1.0.0
raptor-async ^1.1.2
raptor-json ^1.0.1
raptor-polyfill ^1.0.0
raptor-promises ^1.0.1
raptor-regexp ^1.0.0
raptor-util ^3.2.0
resolve-from ^2.0.0
simple-sha1 ^2.1.0
strip-json-comments ^2.0.1
try-require ^1.2.1
warp10 ^1.0.0
dev async ^2.1.4
babel-cli ^6.24.1
babel-core ^6.24.1
babel-plugin-minprops ^2.0.1
benchmark ^2.1.1
bluebird ^3.4.7
browser-refresh ^1.6.0
browser-refresh-taglib ^1.1.0
chai ^3.3.0
child-process-promise ^2.2.1
coveralls ^2.11.9
express ^4.13.4
fs-extra ^2.0.0
ignoring-watcher ^1.0.2
istanbul-lib-instrument ^1.3.0
jquery ^3.1.1
jsdom ^9.6.0
jshint ^2.5.0
lasso ^2.4.1
lasso-babel-transform ^1.0.0
lasso-marko ^2.1.0
lasso-resolve-from ^1.2.0
md5-hex ^2.0.0
micromatch ^2.3.11
mkdirp ^0.5.1
mocha ^3.2.0
mocha-phantomjs-core ^2.1.1
mocha-phantomjs-istanbul 0.0.2
nyc ^10.0.0
open 0.0.5
phantomjs-prebuilt ^2.1.13
promise-polyfill ^6.0.2
request ^2.72.0
require-self-ref ^2.0.1
semver ^5.4.1
serve-static ^1.11.1
shelljs ^0.7.7
through ^2.3.4
through2 ^2.0.1

Releases

-   v3.11.1 zip tar
-   v3.11.0 zip tar
-   v3.10.1 zip tar
-   v3.10.0 zip tar
-   v3.9.4 zip tar
-   v3.9.3 zip tar
-   v3.9.2 zip tar
-   v3.9.1 zip tar
-   v3.9.0 zip tar
-   v3.8.1 zip tar
-   v3.8.0 zip tar
-   v3.7.4 zip tar
-   v3.7.3 zip tar
-   v3.7.2 zip tar
-   v3.7.1 zip tar
-   v3.7.0 zip tar
-   v3.6.2 zip tar
-   v3.6.1 zip tar
-   v3.6.0 zip tar
-   v3.5.1 zip tar
-   v3.5.0 zip tar
-   v3.4.9 zip tar
-   v3.4.8 zip tar
-   v3.4.7 zip tar
-   v3.4.6 zip tar
-   v3.4.5 zip tar
-   v3.4.4 zip tar
-   v3.4.3 zip tar
-   v3.4.2 zip tar
-   v3.4.1 zip tar