urlscan.io logo urlscan.io
SecurityTrails logo

markojs.com Open in urlscan Pro
2a06:98c1:3121::3  Public Scan

Back to summary
Submitted URL: http://markojs.com/
Effective URL: https://markojs.com/
Submission: On February 11 via api from US — Scanned from NL

Form analysis 0 forms found in the DOM

Text Content

Skip to main content
DocsTry OnlineGitHub
SearchK
☰
✕


MARKO 5.31.64.X3.X2.X

 * GUIDES
 * Installing
 * Getting started
 * Conditionals and lists
 * Custom tags
 * State
 * Styles
 * Events
 * Body content
 * TypeScript
 * Marko 5 upgrade
 * Troubleshooting Streaming

 * TUTORIALS
 * Color Picker

 * REFERENCE
 * Rendering
 * Syntax
 * Core tags
 * Class components
 * marko.json
 * Compiler

 * BUNDLER INTEGRATIONS
 * Vite
 * Webpack
 * Rollup
 * Lasso

 * SERVER INTEGRATIONS
 * Cloudflare Workers
 * Express
 * Fastify
 * Koa
 * HTTP

 * TOOLING
 * Editor plugins

 * ARTICLES
 * Marko vs React
 * Why is Marko Fast
 * 10 Awesome Marko Features


A DECLARATIVE, HTML-BASED LANGUAGE
THAT MAKES BUILDING WEB APPS FUN

Get startedGitHub13,035


FAMILIAR

If you know HTML, CSS, and Javascript, you know Marko


PERFORMANT

Streaming, partial hydration, an optimizing compiler, & a small runtime


SCALABLE

Start with simple HTML templates and add powerful components as needed


TRUSTED

Marko is powering high-traffic websites like ebay.com


HTML REIMAGINED

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.

<!doctype html>
<html>
<head>
    <title>Hello Marko</title>
</head>
<body>
    <h1>My favorite colors</h1>
    <ul>
        <for|color| of=["red", "green", "blue"]>
            <li style=`color:${color}`>
                ${color.toUpperCase()}
            </li>
        </for>
    </ul>
    <shared-footer/>
</body>
</html>


HTML Templates, Custom Tags, & Javascript Expressions
0
Click me!

class {
  onCreate() {
    this.state = { count: 0 };
  }
  increment() {
    this.state.count++;
  }
}
<div>${state.count}</div>
<button on-click("increment")>
  Click me!
</button>


Interactive Logic & Reactive Values


PROGRESSIVE RENDERING

Marko streams content to your users as soon as it’s ready. No waiting for client
side JavaScript bundles or data requests to start rendering. HTML, assets, and
images are loaded as soon as possible with asynchronous data loading in as it
completes.

All Products
BuyItNow
Cart (0)
Google Home - $79
Add to Cart
Hands-free help around the house. Google Home is a smart speaker with the Google
Assistant built in. So whenever you need help, it's by your side
★★★★☆
Cool gadget Google has created a nice device that provides music and information
by voice control. The microphone is very good and will usually pick up commands
from across the room. The speakers sound surprisingly good for such a small
device. I wish it had tone control though.
★★★★★
Incredible sound profile! Easy setup, great sound for any room size. Adjustable
bass and treble. Currently have two paired up for better whole house sound.
About
Security
Policies
Help
Sitemap

All Products
BuyItNow
Cart (0)
Google Home - $79
Add to Cart
Hands-free help around the house. Google Home is a smart speaker with the Google
Assistant built in. So whenever you need help, it's by your side
★★★★☆
Cool gadget Google has created a nice device that provides music and information
by voice control. The microphone is very good and will usually pick up commands
from across the room. The speakers sound surprisingly good for such a small
device. I wish it had tone control though.
★★★★★
Incredible sound profile! Easy setup, great sound for any room size. Adjustable
bass and treble. Currently have two paired up for better whole house sound.
About
Security
Policies
Help
Sitemap

Learn More


CODE ELIMINATION

Marko only sends the code for interactive components to the browser. Its
compiler automatically detects which components only need to be rendered on the
server. This means less to download and less to execute. Your users can enjoy
top tier performance regardless of their devices or networks.

All Products
BuyItNow
Cart (0)
Google Home - $79
Add to Cart
Hands-free help around the house. Google Home is a smart speaker with the Google
Assistant built in. So whenever you need help, it's by your side
★★★★☆
Cool gadget Google has created a nice device that provides music and information
by voice control. The microphone is very good and will usually pick up commands
from across the room. The speakers sound surprisingly good for such a small
device. I wish it had tone control though.
★★★★★
Incredible sound profile! Easy setup, great sound for any room size. Adjustable
bass and treble. Currently have two paired up for better whole house sound.
About
Security
Policies
Help
Sitemap

All Products
BuyItNow
Cart (0)
Google Home - $79
Add to Cart
Hands-free help around the house. Google Home is a smart speaker with the Google
Assistant built in. So whenever you need help, it's by your side
★★★★☆
Cool gadget Google has created a nice device that provides music and information
by voice control. The microphone is very good and will usually pick up commands
from across the room. The speakers sound surprisingly good for such a small
device. I wish it had tone control though.
★★★★★
Incredible sound profile! Easy setup, great sound for any room size. Adjustable
bass and treble. Currently have two paired up for better whole house sound.
About
Security
Policies
Help
Sitemap

Learn More


TAILORED PERFORMANCE

Marko's compiler generates code tailored to where it is going to run. You write
your code once and it is optimized for both the server and browser. This is
especially apparent on the server where Marko is several times faster than other
popular solutions.

<div>
  <h2>Images</h2>
  <div>
    <for|item| of=input.items>
      <div on-click(() => alert(item.title), item)>
        <img src=item.img alt="" />
      </div>
    </for>
  </div>
</div>




out.write("<div><h2>Images</h2><div>");
for (const item of input.items) {
  out.write(`<div><img${_marko_attr("src", item.img)}></div>`);
}
out.write("</div></div>");


HTML Strings on the server

out.beginElement("div", null, "0", component);
out.beginElement("h2", null, "1", component);
out.text("Images", component);
out.endElement();
out.beginElement("div", null, "2", component);
{
  let _keyValue = 0;
  for (const item of input.items) {
    const _keyScope = `[${_keyValue++}]`;
    out.beginElement("div", null, "3" + _keyScope, component, null, 0, {
      onclick: _component.d("click", "onBannerClick", false, [item]),
    });
    out.element("img", { src: item.img }, "4" + _keyScope, component, 0);
    out.endElement();
  }
}
out.endElement();
out.endElement();


VDOM Nodes in the browser
See the Benchmarks


EDITOR SUPPORT

Marko provides first-class support for the VSCode editor including syntax
highlighting, Autocompletion, Hyperclick to quickly jump to referenced files,
and Pretty printing to keep your code readable.

Community plugins also provide syntax highlighting for Sublime, Atom, Webstorm &
others!


View editor plugins


JOIN THE COMMUNITY

Need help? Want to contribute? Get involved in the Marko Community!

Ask & answer StackOverflow questions with the marko tag
Hang out in our Discord server, ask questions, & discuss project direction
Tweet to @MarkoDevTeam or with the #markojs hashtag
Browse the code, open issues, & make pull requests on the GitHub repo

OpenJS Foundation

MIT License

open source