Skip to content
A declarative, HTML-based language that makes building web apps fun
Branch: master
Clone or download
Latest commit 43b2e50 May 22, 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 Fix typo in events.md (#1337) May 21, 2019
helpers Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019
scripts refactor to better separate compiler/taglib/core-tags/runtime (#1319) Apr 16, 2019
src Fix regression with namespace inside of a fragment (#1340) May 22, 2019
test Fix regression with namespace inside of a fragment (#1340) May 22, 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 May 22, 2019
LICENSE MIT license Jan 3, 2017
README.md Update README Apr 12, 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 refactor to better separate compiler/taglib/core-tags/runtime (#1319) Apr 16, 2019
components.js refactor to better separate compiler/taglib/core-tags/runtime (#1319) Apr 16, 2019
env.js Format + lint (#1016) Mar 9, 2018
express.js Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019
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 refactor to better separate compiler/taglib/core-tags/runtime (#1319) Apr 16, 2019
legacy-components-browser.marko refactor to better separate compiler/taglib/core-tags/runtime (#1319) Apr 16, 2019
legacy-components.js refactor to better separate compiler/taglib/core-tags/runtime (#1319) Apr 16, 2019
node-require.js Deprecate some tags, and add notes for future deprecations (#1258) Feb 14, 2019
package-lock.json 4.17.2 May 22, 2019
package.json 4.17.2 May 22, 2019
ready.marko refactor to better separate compiler/taglib/core-tags/runtime (#1319) Apr 16, 2019

README.md

Marko

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

NPM Gitter Build Status Coverage Status Downloads

DocsTry OnlineContributeGet Support

Intro

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

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 component

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 its HTML syntax. Find out more about the concise syntax here.

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

Getting Started

  1. npm install marko
  2. Read the docs

Community & Support

Ask and answer StackOverflow questions with the marko tag Come hang out in our Gitter 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

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

You can’t perform that action at this time.