Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/marko-js/marko
A declarative, HTML-based language that makes building web apps fun
https://github.com/marko-js/marko
client-side-rendering dom frontend isomorphic javascript nodejs server-side-rendering ui-components vdom
Last synced: 4 days ago
JSON representation
A declarative, HTML-based language that makes building web apps fun
- Host: GitHub
- URL: https://github.com/marko-js/marko
- Owner: marko-js
- License: mit
- Created: 2014-01-07T23:58:21.000Z (almost 11 years ago)
- Default Branch: main
- Last Pushed: 2024-11-28T03:07:46.000Z (15 days ago)
- Last Synced: 2024-11-29T13:52:21.940Z (14 days ago)
- Topics: client-side-rendering, dom, frontend, isomorphic, javascript, nodejs, server-side-rendering, ui-components, vdom
- Language: JavaScript
- Homepage: https://markojs.com/
- Size: 30.4 MB
- Stars: 13,421
- Watchers: 208
- Forks: 645
- Open Issues: 44
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome - marko-js/marko - A declarative, HTML-based language that makes building web apps fun (JavaScript)
- awesome - marko - A declarative, HTML-based language that makes building web apps fun (JavaScript)
- awesome-nodejs - marko - HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags.  (Repository / Templating)
- awesome-github-star - marko - based language that makes building web apps fun | marko-js | 12813 | (JavaScript)
- awesome-nodejs - marko - HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. (Packages / Templating)
- awesome-javascript - marko - A friendly (and fast!) UI library from eBay that makes building web apps fun - ★ 7598 (Templating Engines)
- awesome-nodejs - marko - A friendly (and fast!) UI library from eBay that makes building web apps fun - ★ 7598 (Templating)
- awesome-node - marko - HTML-based templating engine that compiles templates to CommonJS modules and supports streaming, async rendering and custom tags. (Packages / Templating)
- awesome-nodejs-cn - marko - 基于HTML的模板引擎，可将模板编译为CommonJS模块，并支持流，异步渲染和自定义标签. (目录 / 模板)
- awesome-javascript - marko - A fast, lightweight, HTML-based templating engine for Node.js and the browser with async, streaming, custom tags and CommonJS modules as compiled output. (Templating Engines / Runner)
- awesome-nodejs-cn - marko - 基于 HTML 的模板引擎，可将模板编译为 CommonJS 模块，并支持流、异步渲染和自定义标签 (包 / 模板)
- StarryDivineSky - marko-js/marko
- awesome-nodejs-cn - marko - **star:13405** 基于html的模板引擎，它将模板编译到CommonJS模块，并支持流、异步呈现和自定义标记 ![star > 2000][Awesome] (包 / 模板)
README
# [
](https://markojs.com/)
**A declarative, HTML-based language that makes building web apps fun 🔥**
[](https://www.npmjs.com/package/marko)
[](https://discord.gg/RFGxYGs)
[](https://github.com/marko-js/marko/actions/workflows/ci.yml)
[](https://codecov.io/gh/marko-js/marko)
[](https://npm-stat.com/charts.html?package=marko)
[](https://bestpractices.coreinfrastructure.org/projects/7029)
[Docs](https://markojs.com/docs/getting-started/) ∙ [Try Online](https://markojs.com/try-online/) ∙ [Contribute](#contributors) ∙ [Get Support](#community--support)
## Intro
Marko is HTML _reimagined_ as a language for building dynamic and reactive user interfaces. Almost any valid HTML is valid Marko, and Marko extends HTML for building modern applications more declaratively. Among these extensions are [conditionals and lists](https://markojs.com/docs/conditionals-and-lists/), [state](https://markojs.com/docs/state/), and [components](https://markojs.com/docs/class-components/).
Marko supports both single-file components and components across separate files.
### Single-file component
The following renders a button and a counter of how many times the button has been pressed:
**click-count.marko**
```marko
class {
onCreate() {
this.state = { count: 0 };
}
increment() {
this.state.count++;
}
}
style {
.count {
color: #09c;
font-size: 3em;
}
.press-me {
padding: 0.5em;
}
}
${state.count}
Press me!
```
### Multi-file component
The same component as above, but split into:
- `index.marko` template file
- `component.js` component JS logic file
- `style.css` component styles file
**index.marko**
```marko
${state.count}
Press me!
```
**component.js**
```js
export default {
onCreate() {
this.state = { count: 0 };
},
increment() {
this.state.count++;
},
};
```
**style.css**
```css
.count {
color: #09c;
font-size: 3em;
}
.press-me {
padding: 0.5em;
}
```
## Concise Syntax
Marko also supports [a beautifully concise syntax as an alternative](https://markojs.com/docs/concise/) to its HTML syntax:
Concise syntaxHTML syntax
```marko
ul.example-list
for|color| of=[a, b, c]
li -- ${color}
```
```marko
- ${color}
```
## Getting Started
1. `npm install marko`
2. Read the [docs](https://markojs.com/docs/getting-started/)
## Community & Support
Ask and answer [StackOverflow questions with the `#marko` tag](https://stackoverflow.com/questions/tagged/marko)
Come [hang out in our Discord chat](https://discord.gg/RFGxYGs), ask questions, and discuss project direction
[Tweet to `@MarkoDevTeam`](https://twitter.com/MarkoDevTeam), or with the [`#markojs` hashtag](https://twitter.com/search?q=%23markojs&f=live)
### Contributors
Marko would not be what it is without all those who have contributed ✨
[](https://github.com/marko-js/marko/graphs/contributors)
### Get Involved!
- Pull requests are welcome!
- Submit [GitHub issues](https://github.com/marko-js/marko/issues) for any feature enhancements, bugs, or documentation problems
- [Read the Contribution Tips and Guidelines](.github/CONTRIBUTING.md)
- Participants in this project agree to abide by [its Code of Conduct](https://github.com/eBay/.github/blob/main/CODE_OF_CONDUCT.md)