-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathindex.html
89 lines (88 loc) · 44.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!doctype html><html lang=en><head><meta charset=UTF-8><title>Marko</title><link rel=icon type=image/png sizes=32x32 href=/assets/d78b83f1.png><meta name=viewport content="width=device-width, initial-scale=1"><meta name=description content="Marko is a friendly (and fast!) UI library that makes building web apps fun."><script>
if (window.self !== window.top) {
document.documentElement.classList.add("iframe");
}
</script><script>
const params = new URL(window.location).searchParams;
const uwu = params.has("uwu")
? params.get("uwu") !== "false"
: localStorage.uwu;
if (uwu) {
localStorage.uwu = true;
document.documentElement.className = "uwu";
document.write(
"<style>@import url('https://fonts.googleapis.com/css2?family=Varela+Round&display=swap');html.uwu body{font-family:'Varela Round',sans-serif;}</style>",
);
} else {
delete localStorage.uwu;
}
</script><script src="/assets/121.fd90679c.js" async></script><script src="/assets/364.65751be0.js" async></script><script src="/assets/317.6a4a92bc.js" async></script><link rel="stylesheet" href="/assets/3f0c1fd4.css"></head><body class=home><a href="#main" id=skip-link>Skip to main content</a><!--M#s0-1-0-14--><header data-marko-key="@header s0-1-0-14" class=site-header><div class=content><a href=/ ><img src=/assets/91bc26e5.svg alt="Marko Home" class=site-logo><img src=/assets/2371441a.png alt="Marko Home" class=site-logo-uwu></a><div class=stuff><nav class=site-menu><a href=/docs/getting-started>Docs</a><a href=/try-online>Try Online</a><a href=https://github.com/marko-js/marko>GitHub</a><!--M^s0-1-0-14-12 s0-1-0-14 12--><link rel=preconnect href=https://GB0QQV5RQM-dsn.algolia.net crossorigin><div data-marko-key="@container s0-1-0-14-12" class=search></div><!--M/--></nav><button data-marko='{"onclick":"toggleMenu s0-1-0-14 false"}' class=menu>☰</button></div></div></header><!--M/--><!--M#s0-1-0-15--><div data-marko-key="@sidebar s0-1-0-15" class=doc-sidebar><button data-marko='{"onclick":"hide s0-1-0-15 false"}' class=close>✕</button><h1>Marko <!--M^s0-1-0-15-9 s0-1-0-15 9--><select data-marko='{"onchange":"switchVersion s0-1-0-15-9 false"}' data-marko-key="@version s0-1-0-15-9"><option value=/v6/docs/setup>next</option><option value=/docs/getting-started selected>5.37.10</option><option value=http://marko-v4.github.io/docs/ >4.x</option><option value=http://v3.markojs.com/docs/ >3.x</option><option value=http://marko-v2.github.io/docs/ >2.x</option></select><!--M/--></h1><ul class=toc-level0><li class=section><a href="/docs/guides-overview/">GUIDES</a></li><li><a href="/docs/installing/">Installing</a></li><li><a href="/docs/getting-started/">Getting started</a></li><li><a href="/docs/conditionals-and-lists/">Conditionals and lists</a></li><li><a href="/docs/custom-tags/">Custom tags</a></li><li><a href="/docs/state/">State</a></li><li><a href="/docs/styles/">Styles</a></li><li><a href="/docs/events/">Events</a></li><li><a href="/docs/body-content/">Body content</a></li><li><a href="/docs/typescript/">TypeScript</a></li><li><a href="/docs/marko-5-upgrade/">Marko 5 upgrade</a></li><li><a href="/docs/troubleshooting-streaming/">Troubleshooting Streaming</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/tutorials-overview/">TUTORIALS</a></li><li><a href="/docs/color-picker/">Color Picker</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/reference-overview/">REFERENCE</a></li><li><a href="/docs/rendering/">Rendering</a></li><li><a href="/docs/syntax/">Syntax</a></li><li><a href="/docs/core-tags/">Core tags</a></li><li><a href="/docs/class-components/">Class components</a></li><li><a href="/docs/marko-json/">marko.json</a></li><li><a href="/docs/compiler/">Compiler</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/bundler-integrations-overview/">BUNDLER INTEGRATIONS</a></li><li><a href="/docs/vite/">Vite</a></li><li><a href="/docs/webpack/">Webpack</a></li><li><a href="/docs/rollup/">Rollup</a></li><li><a href="/docs/lasso/">Lasso</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/server-integrations-overview/">SERVER INTEGRATIONS</a></li><li><a href="/docs/cloudflare-workers/">Cloudflare Workers</a></li><li><a href="/docs/express/">Express</a></li><li><a href="/docs/fastify/">Fastify</a></li><li><a href="/docs/koa/">Koa</a></li><li><a href="/docs/http/">HTTP</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/tooling-overview/">TOOLING</a></li><li><a href="/docs/editor-plugins/">Editor plugins</a></li></ul><ul class=toc-level0><li class=section><a href="/docs/articles-overview/">ARTICLES</a></li><li><a href="/docs/marko-vs-react/">Marko vs React</a></li><li><a href="/docs/why-is-marko-fast/">Why is Marko Fast</a></li><li><a href="/docs/10-awesome-marko-features/">10 Awesome Marko Features</a></li></ul></div><!--M/--><main id=main tabindex=-1 class=content><!--M#s0-1-0-17-1--><header class=home-header><img src=/assets/91bc26e5.svg alt class=logo><div class=header-content><img src=/assets/7443bd32.svg alt=Marko class=logo-text><img src=/assets/2371441a.png alt=Marko class=logo-uwu><h1 data-marko-key="@tagline s0-1-0-17-1"><span>A declarative, HTML-based language <br> that makes building web apps fun</span></h1><div class=actions><a href=/docs/getting-started/ class="button get-started"><span>Get started</span></a><!--M^s0-1-0-17-1-10 s0-1-0-17-1 10--><a href=https://github.com/marko-js/marko class=github-link><img src=/assets/0bc571bc.svg alt><span class=text>GitHub</span><span data-marko-key="@star-count s0-1-0-17-1-10" class=stars></span></a><!--M/--></div></div></header><!--M/--><header class=home-features><div class=feature><h2 class=blue>Familiar</h2><p>If you know HTML, CSS, and Javascript, you know Marko</p></div><div class=feature><h2 class=red>Performant</h2><p>Streaming, partial hydration, an optimizing compiler, & a small runtime</p></div><div class=feature><h2 class=yellow>Scalable</h2><p>Start with simple HTML templates and add powerful components as needed</p></div><div class=feature><h2 class=green>Trusted</h2><p>Marko is powering high-traffic websites like ebay.com</p></div></header><section class="home-language home-feature-block-actionless home-feature-block"><div class=home-feature-block-container><div class=home-feature-block-content><h1 class="heading home-feature-block-title"><a name=language class=anchor href="#language"><span class=header-link></span></a>HTML Reimagined</h1><div class=home-feature-block-content-body><p>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.</p></div></div><div class="home-feature-block-visual home-language__examples"><figure><pre class=highlighted style=color:#D0D0E0;background-color:#202034><!<span style=color:#FF4185>doctype</span> <span style=color:#A6E22E>html</span>>
<<span style=color:#FF4185>html</span>>
<<span style=color:#FF4185>head</span>>
<<span style=color:#FF4185>title</span>>Hello Marko</<span style=color:#FF4185>title</span>>
</<span style=color:#FF4185>head</span>>
<<span style=color:#FF4185>body</span>>
<<span style=color:#FF4185>h1</span>>My favorite colors</<span style=color:#FF4185>h1</span>>
<<span style=color:#FF4185>ul</span>>
<<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>color</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span>[<span style=color:#FFF066>"red"</span>, <span style=color:#FFF066>"green"</span>, <span style=color:#FFF066>"blue"</span>]>
<<span style=color:#FF4185>li</span> <span style=color:#A6E22E>style</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>`color:</span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>`</span>>
<span style=color:#66D9EF>${</span><span style=color:#FFFFFF>color</span>.<span style=color:#A6E22E>toUpperCase</span>()<span style=color:#66D9EF>}</span>
</<span style=color:#FF4185>li</span>>
</<span style=color:#FF4185>for</span>>
</<span style=color:#FF4185>ul</span>>
<<span style=color:#FF4185>shared-footer</span>/>
</<span style=color:#FF4185>body</span>>
</<span style=color:#FF4185>html</span>>
</pre><figcaption>HTML Templates, Custom Tags, & Javascript Expressions</figcaption></figure><figure><div class=home-language__interactive-container><div class=home-language__interactive-example><!--M#s0-1-0-17-3-0-7-12--><div>0</div><button>Click me!</button><!--M/--></div><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#66D9EF>class</span> {
<span style=color:#A6E22E>onCreate</span>() {
<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>state</span> <span style=color:#FFFFFF>=</span> { count: <span style=color:#AE81FF>0</span> };
}
<span style=color:#A6E22E>increment</span>() {
<span style=color:#FFFFFF>this</span>.<span style=color:#FFFFFF>state</span>.<span style=color:#FFFFFF>count</span><span style=color:#FF4185>++</span>;
}
}
<<span style=color:#FF4185>div</span>><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>state</span>.<span style=color:#FFFFFF>count</span><span style=color:#66D9EF>}</span></<span style=color:#FF4185>div</span>>
<<span style=color:#FF4185>button</span> <span style=color:#66D9EF>on-click</span>(<span style=color:#FFF066>"increment"</span>)>
Click me!
</<span style=color:#FF4185>button</span>>
</pre></div><figcaption>Interactive Logic & Reactive Values</figcaption></figure></div></div></section><section class="home-streaming home-feature-block-left home-feature-block"><div class=home-feature-block-container><div class=home-feature-block-content><h1 class="heading home-feature-block-title"><a name=streaming class=anchor href="#streaming"><span class=header-link></span></a>Progressive Rendering</h1><div class=home-feature-block-content-body><p>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. </p></div></div><div class=home-feature-block-visual><!--M#s0-1-0-17-4-0-7-2--><div class="scroll-locked-stream-example home-streaming-example"><div class=demo-page-wrapper role=img aria-label="Buffered pages don't show content as it loads"> <div aria-hidden=true class=demo-page-container><div style=transform:scaleX(0.1) class=demo-page-progress></div><div class="demo-page-header demo-page-delay-1 demo-page-loading"><div class="demo-page-link demo-page-delay-2">All Products</div><div class="demo-page-logo demo-page-delay-3">BuyItNow</div><div class="demo-page-cart demo-page-delay-4 demo-page-hydrated">Cart (0)</div></div><div class="demo-page-product demo-page-delay-5 demo-page-loading"><img class="demo-page-image demo-page-lowres" src=/assets/2ff006d2.png alt><div class="demo-page-description demo-page-delay-6"><span class=demo-page-description-title>Google Home - $79</span><div class="demo-page-description-button demo-page-delay-7 demo-page-hydrated">Add to Cart</div><span class=demo-page-description-text>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</span></div></div><div class="demo-page-review demo-page-delay-8 demo-page-loading"><div class="demo-page-rating demo-page-delay-9">★★★★☆</div><span class=demo-page-description-text><strong>Cool gadget</strong> 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.</span></div><div class="demo-page-review demo-page-delay-10 demo-page-loading"><div class="demo-page-rating demo-page-delay-11">★★★★★</div><span class=demo-page-description-text><strong>Incredible sound profile!</strong> Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound. </span></div><div class="demo-page-footer demo-page-delay-12 demo-page-loading"><div class=demo-page-delay-13>About</div><div class=demo-page-delay-14>Security</div><div class=demo-page-delay-15>Policies</div><div class=demo-page-delay-16>Help</div><div class=demo-page-delay-17>Sitemap</div></div></div><div class=demo-page-other><div class=demo-page-icon-inner><img src=/assets/886b7024.svg alt></div></div></div><div class="demo-page-wrapper scroll-locked-progressive" role=img aria-label="Streaming pages show content incrementally"> <div aria-hidden=true class=demo-page-container><div style=transform:scaleX(0.11111111111111112) class=demo-page-progress></div><div class="demo-page-header demo-page-delay-1"><div class="demo-page-link demo-page-delay-2">All Products</div><div class="demo-page-logo demo-page-delay-3">BuyItNow</div><div class="demo-page-cart demo-page-delay-4 demo-page-hydrated">Cart (0)</div></div><div class="demo-page-product demo-page-delay-5 demo-page-loading"><img class="demo-page-image demo-page-lowres" src=/assets/2ff006d2.png alt><div class="demo-page-description demo-page-delay-6"><span class=demo-page-description-title>Google Home - $79</span><div class="demo-page-description-button demo-page-delay-7 demo-page-hydrated">Add to Cart</div><span class=demo-page-description-text>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</span></div></div><div class="demo-page-review demo-page-delay-8 demo-page-loading"><div class="demo-page-rating demo-page-delay-9">★★★★☆</div><span class=demo-page-description-text><strong>Cool gadget</strong> 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.</span></div><div class="demo-page-review demo-page-delay-10 demo-page-loading"><div class="demo-page-rating demo-page-delay-11">★★★★★</div><span class=demo-page-description-text><strong>Incredible sound profile!</strong> Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound. </span></div><div class="demo-page-footer demo-page-delay-12"><div class=demo-page-delay-13>About</div><div class=demo-page-delay-14>Security</div><div class=demo-page-delay-15>Policies</div><div class=demo-page-delay-16>Help</div><div class=demo-page-delay-17>Sitemap</div></div></div><div class=demo-page-marko><div class=demo-page-icon-inner><img src=/assets/91bc26e5.svg alt></div></div></div></div><!--M/--></div><div class=home-feature-block-action><a href=https://dev.to/ryansolid/server-rendering-in-javascript-optimizing-performance-1jnk>Learn More</a></div></div></section><section class="home-hydration home-feature-block-right home-feature-block"><div class=home-feature-block-container><div class=home-feature-block-content><h1 class="heading home-feature-block-title"><a name=hydration class=anchor href="#hydration"><span class=header-link></span></a>Code Elimination</h1><div class=home-feature-block-content-body><p>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.</p></div></div><div class=home-feature-block-visual><div class="demo-page-wrapper home-hydration-example" role=img aria-label="Traditional hydration sends and re-excutes the code for all components"> <div aria-hidden=true class="demo-page-container demo-page-hydrate-all"><div class="demo-page-header demo-page-delay-1"><div class="demo-page-link demo-page-delay-2">All Products</div><div class="demo-page-logo demo-page-delay-3">BuyItNow</div><div class="demo-page-cart demo-page-delay-4 demo-page-hydrated">Cart (0)</div></div><div class="demo-page-product demo-page-delay-5"><img class=demo-page-image src=/assets/2ff006d2.png alt><div class="demo-page-description demo-page-delay-6"><span class=demo-page-description-title>Google Home - $79</span><div class="demo-page-description-button demo-page-delay-7 demo-page-hydrated">Add to Cart</div><span class=demo-page-description-text>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</span></div></div><div class="demo-page-review demo-page-delay-8"><div class="demo-page-rating demo-page-delay-9">★★★★☆</div><span class=demo-page-description-text><strong>Cool gadget</strong> 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.</span></div><div class="demo-page-review demo-page-delay-10"><div class="demo-page-rating demo-page-delay-11">★★★★★</div><span class=demo-page-description-text><strong>Incredible sound profile!</strong> Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound. </span></div><div class="demo-page-footer demo-page-delay-12"><div class=demo-page-delay-13>About</div><div class=demo-page-delay-14>Security</div><div class=demo-page-delay-15>Policies</div><div class=demo-page-delay-16>Help</div><div class=demo-page-delay-17>Sitemap</div></div></div><div class=demo-page-other><div class=demo-page-icon-inner><img src=/assets/886b7024.svg alt></div></div></div><div class="demo-page-wrapper home-hydration-example" role=img aria-label="Marko's hydration only sends the code for interactive components"> <div aria-hidden=true class="demo-page-container demo-page-hydrate-partial"><div class="demo-page-header demo-page-delay-1"><div class="demo-page-link demo-page-delay-2">All Products</div><div class="demo-page-logo demo-page-delay-3">BuyItNow</div><div class="demo-page-cart demo-page-delay-4 demo-page-hydrated">Cart (0)</div></div><div class="demo-page-product demo-page-delay-5"><img class=demo-page-image src=/assets/2ff006d2.png alt><div class="demo-page-description demo-page-delay-6"><span class=demo-page-description-title>Google Home - $79</span><div class="demo-page-description-button demo-page-delay-7 demo-page-hydrated">Add to Cart</div><span class=demo-page-description-text>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</span></div></div><div class="demo-page-review demo-page-delay-8"><div class="demo-page-rating demo-page-delay-9">★★★★☆</div><span class=demo-page-description-text><strong>Cool gadget</strong> 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.</span></div><div class="demo-page-review demo-page-delay-10"><div class="demo-page-rating demo-page-delay-11">★★★★★</div><span class=demo-page-description-text><strong>Incredible sound profile!</strong> Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound. </span></div><div class="demo-page-footer demo-page-delay-12"><div class=demo-page-delay-13>About</div><div class=demo-page-delay-14>Security</div><div class=demo-page-delay-15>Policies</div><div class=demo-page-delay-16>Help</div><div class=demo-page-delay-17>Sitemap</div></div></div><div class=demo-page-marko><div class=demo-page-icon-inner><img src=/assets/91bc26e5.svg alt></div></div></div></div><div class=home-feature-block-action><a href=https://medium.com/@mlrawlings/maybe-you-dont-need-that-spa-f2c659bc7fec>Learn More</a></div></div></section><section class="home-performance home-feature-block"><div class=home-feature-block-container><div class=home-feature-block-content><h1 class="heading home-feature-block-title"><a name=performance class=anchor href="#performance"><span class=header-link></span></a>Tailored Performance</h1><div class=home-feature-block-content-body><p>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.</p></div></div><div class=home-feature-block-visual><div role=img aria-label="Marko templates are compiled to generate HTML Strings on the server and VDOM Nodes in the browser" class=home-performance-example><div class=home-performance-input><script>if(localStorage.getItem('markojs-website:syntax') === 'concise'){document.body.classList.add('concise')}</script><pre class=highlighted style=color:#D0D0E0;background-color:#202034><<span style=color:#FF4185>div</span>>
<<span style=color:#FF4185>h2</span>>Images</<span style=color:#FF4185>h2</span>>
<<span style=color:#FF4185>div</span>>
<<span style=color:#FF4185>for</span>|<span style=color:#FFAC4D>item</span>| <span style=color:#A6E22E>of</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>items</span>>
<<span style=color:#FF4185>div</span> <span style=color:#66D9EF>on-click</span>(() <span style=color:#66D9EF>=></span> <span style=color:#A6E22E>alert</span>(<span style=color:#FFFFFF>item</span>.<span style=color:#FFFFFF>title</span>), <span style=color:#FFFFFF>item</span>)>
<<span style=color:#FF4185>img</span> <span style=color:#A6E22E>src</span><span style=color:#FFFFFF>=</span><span style=color:#FFFFFF>item</span>.<span style=color:#FFFFFF>img</span> <span style=color:#A6E22E>alt</span><span style=color:#FFFFFF>=</span><span style=color:#FFF066>""</span> />
</<span style=color:#FF4185>div</span>>
</<span style=color:#FF4185>for</span>>
</<span style=color:#FF4185>div</span>>
</<span style=color:#FF4185>div</span>>
</pre></div><div class=home-performance-arrow><img src=/assets/7c1cc740.svg alt></div><div class=home-performance-outputs><div class=home-performance-html><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>write</span>(<span style=color:#FFF066>"<div><h2>Images</h2><div>"</span>);
<span style=color:#FF4185>for</span> (<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>item</span> <span style=color:#FF4185>of</span> <span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>items</span>) {
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>write</span>(<span style=color:#FFF066>`<div><img</span><span style=color:#66D9EF>${</span><span style=color:#A6E22E>_marko_attr</span><span style=color:#FFF066>(</span><span style=color:#FFF066>"src"</span><span style=color:#FFF066>, </span><span style=color:#FFFFFF>item</span><span style=color:#FFF066>.</span><span style=color:#FFFFFF>img</span><span style=color:#FFF066>)</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>></div>`</span>);
}
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>write</span>(<span style=color:#FFF066>"</div></div>"</span>);
</pre><div class=home-performance-output-overlay>HTML Strings <small>on the server</small></div></div><div class=home-performance-vdom><pre class=highlighted style=color:#D0D0E0;background-color:#202034><span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>beginElement</span>(<span style=color:#FFF066>"div"</span>, <span style=color:#AE81FF>null</span>, <span style=color:#FFF066>"0"</span>, <span style=color:#FFFFFF>component</span>);
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>beginElement</span>(<span style=color:#FFF066>"h2"</span>, <span style=color:#AE81FF>null</span>, <span style=color:#FFF066>"1"</span>, <span style=color:#FFFFFF>component</span>);
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>text</span>(<span style=color:#FFF066>"Images"</span>, <span style=color:#FFFFFF>component</span>);
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>endElement</span>();
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>beginElement</span>(<span style=color:#FFF066>"div"</span>, <span style=color:#AE81FF>null</span>, <span style=color:#FFF066>"2"</span>, <span style=color:#FFFFFF>component</span>);
{
<span style=color:#66D9EF>let</span> <span style=color:#FFFFFF>_keyValue</span> <span style=color:#FFFFFF>=</span> <span style=color:#AE81FF>0</span>;
<span style=color:#FF4185>for</span> (<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>item</span> <span style=color:#FF4185>of</span> <span style=color:#FFFFFF>input</span>.<span style=color:#FFFFFF>items</span>) {
<span style=color:#66D9EF>const</span> <span style=color:#FFFFFF>_keyScope</span> <span style=color:#FFFFFF>=</span> <span style=color:#FFF066>`[</span><span style=color:#66D9EF>${</span><span style=color:#FFFFFF>_keyValue</span><span style=color:#FF4185>++</span><span style=color:#66D9EF>}</span><span style=color:#FFF066>]`</span>;
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>beginElement</span>(<span style=color:#FFF066>"div"</span>, <span style=color:#AE81FF>null</span>, <span style=color:#FFF066>"3"</span> <span style=color:#FF4185>+</span> <span style=color:#FFFFFF>_keyScope</span>, <span style=color:#FFFFFF>component</span>, <span style=color:#AE81FF>null</span>, <span style=color:#AE81FF>0</span>, {
onclick: <span style=color:#FFFFFF>_component</span>.<span style=color:#A6E22E>d</span>(<span style=color:#FFF066>"click"</span>, <span style=color:#FFF066>"onBannerClick"</span>, <span style=color:#AE81FF>false</span>, [<span style=color:#FFFFFF>item</span>]),
});
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>element</span>(<span style=color:#FFF066>"img"</span>, { src: <span style=color:#FFFFFF>item</span>.<span style=color:#FFFFFF>img</span> }, <span style=color:#FFF066>"4"</span> <span style=color:#FF4185>+</span> <span style=color:#FFFFFF>_keyScope</span>, <span style=color:#FFFFFF>component</span>, <span style=color:#AE81FF>0</span>);
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>endElement</span>();
}
}
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>endElement</span>();
<span style=color:#FFFFFF>out</span>.<span style=color:#A6E22E>endElement</span>();
</pre><div class=home-performance-output-overlay>VDOM Nodes <small>in the browser</small></div></div></div></div></div><div class=home-feature-block-action><a href=https://github.com/marko-js/isomorphic-ui-benchmarks>See the Benchmarks</a></div></div></section><section class="home-tooling home-feature-block-right home-feature-block"><div class=home-feature-block-container><div class=home-feature-block-content><h1 class="heading home-feature-block-title"><a name=tooling class=anchor href="#tooling"><span class=header-link></span></a>Editor Support</h1><div class=home-feature-block-content-body><p>Marko provides <a href=https://marketplace.visualstudio.com/items?itemName=Marko-JS.marko-vscode title="Marko VSCode Extension">first-class support</a> for the VSCode editor including syntax highlighting, Autocompletion, Hyperclick to quickly jump to referenced files, and Pretty printing to keep your code readable.</p><p>Community plugins also provide syntax highlighting for Sublime, Atom, Webstorm & others!</p></div></div><div class="home-feature-block-visual home-tooling__screenshot-window"><div class=home-tooling__screenshot-title><div class=red></div><div class=yellow></div><div class=green></div></div><div class=home-tooling__screenshot-screen><img src=/assets/92c4e05e.png alt></div></div><div class=home-feature-block-action><a href=/docs/editor-plugins>View editor plugins</a></div></div></section><section class="home-feature-block-actionless home-feature-block"><div class=home-feature-block-container><div class=home-feature-block-content><h1 class="heading home-community__title"><a name=community class=anchor href="#community"><span class=header-link></span></a>Join the Community</h1><div class=home-feature-block-content-body><p>Need help? Want to contribute? Get involved in the Marko Community!</p></div></div><div class=home-feature-block-visual><div class=home-community__locations><div class=home-community__location><a href=https://stackoverflow.com/questions/tagged/marko class=home-community__logo><img src=/assets/0bfc2ee7.svg alt=StackOverflow></a><span>Ask & answer StackOverflow questions with the <a href=https://stackoverflow.com/questions/tagged/marko>marko tag</a></span></div><div class=home-community__location><a href=https://discord.gg/marko class=home-community__logo><img src=/assets/78800ea4.svg alt=Discord></a><span>Hang out in our <a href=https://discord.gg/marko>Discord server</a>, ask questions, & discuss project direction</span></div><div class=home-community__location><a href=https://twitter.com/search?q=%23markojs%20OR%20%40markodevteam&f=live class=home-community__logo><img src=/assets/82b09e37.svg alt=Twitter></a><span>Tweet to <a href=https://twitter.com/MarkoDevTeam>@MarkoDevTeam</a> or with the <a href=https://twitter.com/search?q=%23markojs%20OR%20%40markodevteam&f=live>#markojs</a> hashtag</span></div><div class=home-community__location><a href=https://github.com/marko-js/marko class=home-community__logo><img src=/assets/0bc571bc.svg alt=GitHub></a><span>Browse the code, open issues, & make pull requests on the <a href=https://github.com/marko-js/marko>GitHub repo</a></span></div></div></div></div><div class=home-community__contributors><a href=https://github.com/patrick-steele-idem><img src="https://avatars.githubusercontent.com/u/978214?v=4&s=64" alt=patrick-steele-idem loading=lazy></a><a href=https://github.com/DylanPiercey><img src="https://avatars.githubusercontent.com/u/4985201?v=4&s=64" alt=DylanPiercey loading=lazy></a><a href=https://github.com/mlrawlings><img src="https://avatars.githubusercontent.com/u/1958812?v=4&s=64" alt=mlrawlings loading=lazy></a><a href=https://github.com/apps/github-actions><img src="https://avatars.githubusercontent.com/in/15368?v=4&s=64" alt=github-actions[bot] loading=lazy></a><a href=https://github.com/austinkelleher><img src="https://avatars.githubusercontent.com/u/3771924?v=4&s=64" alt=austinkelleher loading=lazy></a><a href=https://github.com/philidem><img src="https://avatars.githubusercontent.com/u/2395134?v=4&s=64" alt=philidem loading=lazy></a><a href=https://github.com/LuLaValva><img src="https://avatars.githubusercontent.com/u/26027232?v=4&s=64" alt=LuLaValva loading=lazy></a><a href=https://github.com/scttdavs><img src="https://avatars.githubusercontent.com/u/3631216?v=4&s=64" alt=scttdavs loading=lazy></a><a href=https://github.com/rturnq><img src="https://avatars.githubusercontent.com/u/11449439?v=4&s=64" alt=rturnq loading=lazy></a><a href=https://github.com/agliga><img src="https://avatars.githubusercontent.com/u/1755269?v=4&s=64" alt=agliga loading=lazy></a><a href=https://github.com/tigt><img src="https://avatars.githubusercontent.com/u/8072522?v=4&s=64" alt=tigt loading=lazy></a><a href=https://github.com/maberer><img src="https://avatars.githubusercontent.com/u/6454552?v=4&s=64" alt=maberer loading=lazy></a><a href=https://github.com/yomed><img src="https://avatars.githubusercontent.com/u/3595986?v=4&s=64" alt=yomed loading=lazy></a><a href=https://github.com/BhavinPatel04><img src="https://avatars.githubusercontent.com/u/6559211?v=4&s=64" alt=BhavinPatel04 loading=lazy></a><a href=https://github.com/tcrowe><img src="https://avatars.githubusercontent.com/u/1634015?v=4&s=64" alt=tcrowe loading=lazy></a><a href=https://github.com/newyork-anthonyng><img src="https://avatars.githubusercontent.com/u/14035529?v=4&s=64" alt=newyork-anthonyng loading=lazy></a><a href=https://github.com/apps/dependabot><img src="https://avatars.githubusercontent.com/in/29110?v=4&s=64" alt=dependabot[bot] loading=lazy></a><a href=https://github.com/Hesulan><img src="https://avatars.githubusercontent.com/u/22082115?v=4&s=64" alt=Hesulan loading=lazy></a><a href=https://github.com/kristianmandrup><img src="https://avatars.githubusercontent.com/u/125005?v=4&s=64" alt=kristianmandrup loading=lazy></a><a href=https://github.com/seangates><img src="https://avatars.githubusercontent.com/u/105656?v=4&s=64" alt=seangates loading=lazy></a><a href=https://github.com/ramahadevan><img src="https://avatars.githubusercontent.com/u/7574950?v=4&s=64" alt=ramahadevan loading=lazy></a><a href=https://github.com/aselvaraj><img src="https://avatars.githubusercontent.com/u/1091721?v=4&s=64" alt=aselvaraj loading=lazy></a><a href=https://github.com/rumoursbehindme><img src="https://avatars.githubusercontent.com/u/63334129?v=4&s=64" alt=rumoursbehindme loading=lazy></a><a href=https://github.com/Sebring><img src="https://avatars.githubusercontent.com/u/4135198?v=4&s=64" alt=Sebring loading=lazy></a><a href=https://github.com/oxala><img src="https://avatars.githubusercontent.com/u/1775318?v=4&s=64" alt=oxala loading=lazy></a><a href=https://github.com/ctdio><img src="https://avatars.githubusercontent.com/u/9613701?v=4&s=64" alt=ctdio loading=lazy></a><a href=https://github.com/brywatsonnn><img src="https://avatars.githubusercontent.com/u/135073395?v=4&s=64" alt=brywatsonnn loading=lazy></a><a href=https://github.com/abiyasa><img src="https://avatars.githubusercontent.com/u/1072047?v=4&s=64" alt=abiyasa loading=lazy></a><a href=https://github.com/apps/greenkeeper><img src="https://avatars.githubusercontent.com/in/505?v=4&s=64" alt=greenkeeper[bot] loading=lazy></a><a href=https://github.com/vwong><img src="https://avatars.githubusercontent.com/u/466689?v=4&s=64" alt=vwong loading=lazy></a><a href=https://github.com/LokeshRishi><img src="https://avatars.githubusercontent.com/u/4687963?v=4&s=64" alt=LokeshRishi loading=lazy></a><a href=https://github.com/merwan7><img src="https://avatars.githubusercontent.com/u/731731?v=4&s=64" alt=merwan7 loading=lazy></a><a href=https://github.com/kprakasam><img src="https://avatars.githubusercontent.com/u/5892473?v=4&s=64" alt=kprakasam loading=lazy></a><a href=https://github.com/Sandeepv68><img src="https://avatars.githubusercontent.com/u/7328658?v=4&s=64" alt=Sandeepv68 loading=lazy></a><a href=https://github.com/PersephoneQueenOfFlowers><img src="https://avatars.githubusercontent.com/u/5151659?v=4&s=64" alt=PersephoneQueenOfFlowers loading=lazy></a><a href=https://github.com/gitter-badger><img src="https://avatars.githubusercontent.com/u/8518239?v=4&s=64" alt=gitter-badger loading=lazy></a><a href=https://github.com/timgates42><img src="https://avatars.githubusercontent.com/u/47873678?v=4&s=64" alt=timgates42 loading=lazy></a><a href=https://github.com/zaiste><img src="https://avatars.githubusercontent.com/u/200613?v=4&s=64" alt=zaiste loading=lazy></a><a href=https://github.com/ccinelli><img src="https://avatars.githubusercontent.com/u/38021940?v=4&s=64" alt=ccinelli loading=lazy></a><a href=https://github.com/codinggirl><img src="https://avatars.githubusercontent.com/u/1920996?v=4&s=64" alt=codinggirl loading=lazy></a><a href=https://github.com/lucas0707><img src="https://avatars.githubusercontent.com/u/26284338?v=4&s=64" alt=lucas0707 loading=lazy></a><a href=https://github.com/jasonmacdonald><img src="https://avatars.githubusercontent.com/u/5718527?v=4&s=64" alt=jasonmacdonald loading=lazy></a><a href=https://github.com/dimichgh><img src="https://avatars.githubusercontent.com/u/1390164?v=4&s=64" alt=dimichgh loading=lazy></a><a href=https://github.com/CestDiego><img src="https://avatars.githubusercontent.com/u/3291619?v=4&s=64" alt=CestDiego loading=lazy></a><a href=https://github.com/gamtiq><img src="https://avatars.githubusercontent.com/u/1177323?v=4&s=64" alt=gamtiq loading=lazy></a><a href=https://github.com/cabello><img src="https://avatars.githubusercontent.com/u/60936?v=4&s=64" alt=cabello loading=lazy></a><a href=https://github.com/dsathyakumar><img src="https://avatars.githubusercontent.com/u/5446493?v=4&s=64" alt=dsathyakumar loading=lazy></a><a href=https://github.com/fierysunset><img src="https://avatars.githubusercontent.com/u/2523340?v=4&s=64" alt=fierysunset loading=lazy></a><a href=https://github.com/cameronbraid><img src="https://avatars.githubusercontent.com/u/672405?v=4&s=64" alt=cameronbraid loading=lazy></a><a href=https://github.com/BryceEWatson><img src="https://avatars.githubusercontent.com/u/1322843?v=4&s=64" alt=BryceEWatson loading=lazy></a><a href=https://github.com/milworm><img src="https://avatars.githubusercontent.com/u/703674?v=4&s=64" alt=milworm loading=lazy></a><a href=https://github.com/samdup123><img src="https://avatars.githubusercontent.com/u/20603934?v=4&s=64" alt=samdup123 loading=lazy></a><a href=https://github.com/sandro-pasquali><img src="https://avatars.githubusercontent.com/u/657552?v=4&s=64" alt=sandro-pasquali loading=lazy></a><a href=https://github.com/sdepold><img src="https://avatars.githubusercontent.com/u/79163?v=4&s=64" alt=sdepold loading=lazy></a><a href=https://github.com/ScottAwesome><img src="https://avatars.githubusercontent.com/u/52388100?v=4&s=64" alt=ScottAwesome loading=lazy></a><a href=https://github.com/SimenB><img src="https://avatars.githubusercontent.com/u/1404810?v=4&s=64" alt=SimenB loading=lazy></a><a href=https://github.com/sasyomaru><img src="https://avatars.githubusercontent.com/u/2825070?v=4&s=64" alt=sasyomaru loading=lazy></a><a href=https://github.com/snyamathi><img src="https://avatars.githubusercontent.com/u/1328852?v=4&s=64" alt=snyamathi loading=lazy></a><a href=https://github.com/tinovyatkin><img src="https://avatars.githubusercontent.com/u/5350898?v=4&s=64" alt=tinovyatkin loading=lazy></a><a href=https://github.com/rohit-gohri><img src="https://avatars.githubusercontent.com/u/31949290?v=4&s=64" alt=rohit-gohri loading=lazy></a><a href=https://github.com/millette><img src="https://avatars.githubusercontent.com/u/50741?v=4&s=64" alt=millette loading=lazy></a><a href=https://github.com/patricknelson><img src="https://avatars.githubusercontent.com/u/4269377?v=4&s=64" alt=patricknelson loading=lazy></a><a href=https://github.com/pcanella><img src="https://avatars.githubusercontent.com/u/4923719?v=4&s=64" alt=pcanella loading=lazy></a><a href=https://github.com/nitinsurana><img src="https://avatars.githubusercontent.com/u/7137160?v=4&s=64" alt=nitinsurana loading=lazy></a><a href=https://github.com/nm123github><img src="https://avatars.githubusercontent.com/u/8527474?v=4&s=64" alt=nm123github loading=lazy></a><a href=https://github.com/mikeshatch><img src="https://avatars.githubusercontent.com/u/4390485?v=4&s=64" alt=mikeshatch loading=lazy></a><a href=https://github.com/melquan><img src="https://avatars.githubusercontent.com/u/19419138?v=4&s=64" alt=melquan loading=lazy></a><a href=https://github.com/stowball><img src="https://avatars.githubusercontent.com/u/853552?v=4&s=64" alt=stowball loading=lazy></a><a href=https://github.com/felixsanz><img src="https://avatars.githubusercontent.com/u/6182099?v=4&s=64" alt=felixsanz loading=lazy></a><a href=https://github.com/moonrailgun><img src="https://avatars.githubusercontent.com/u/6964737?v=4&s=64" alt=moonrailgun loading=lazy></a><a href=https://github.com/pedramphp><img src="https://avatars.githubusercontent.com/u/402815?v=4&s=64" alt=pedramphp loading=lazy></a><a href=https://github.com/unreadable><img src="https://avatars.githubusercontent.com/u/20789657?v=4&s=64" alt=unreadable loading=lazy></a><a href=https://github.com/kounelios13><img src="https://avatars.githubusercontent.com/u/11466138?v=4&s=64" alt=kounelios13 loading=lazy></a><a href=https://github.com/khaki32><img src="https://avatars.githubusercontent.com/u/60853378?v=4&s=64" alt=khaki32 loading=lazy></a><a href=https://github.com/joelmagner><img src="https://avatars.githubusercontent.com/u/20977161?v=4&s=64" alt=joelmagner loading=lazy></a><a href=https://github.com/ckeenan23><img src="https://avatars.githubusercontent.com/u/70753829?v=4&s=64" alt=ckeenan23 loading=lazy></a><a href=https://github.com/agyanchand><img src="https://avatars.githubusercontent.com/u/1259203?v=4&s=64" alt=agyanchand loading=lazy></a><a href=https://github.com/aganeshalingam><img src="https://avatars.githubusercontent.com/u/439957?v=4&s=64" alt=aganeshalingam loading=lazy></a><a href=https://github.com/achou11><img src="https://avatars.githubusercontent.com/u/18542095?v=4&s=64" alt=achou11 loading=lazy></a><a href=https://github.com/biaspro><img src="https://avatars.githubusercontent.com/u/5852912?v=4&s=64" alt=biaspro loading=lazy></a><a href=https://github.com/zephraph><img src="https://avatars.githubusercontent.com/u/3087225?v=4&s=64" alt=zephraph loading=lazy></a><a href=https://github.com/wujjpp><img src="https://avatars.githubusercontent.com/u/14068989?v=4&s=64" alt=wujjpp loading=lazy></a><a href=https://github.com/codeallthethingz><img src="https://avatars.githubusercontent.com/u/1261268?v=4&s=64" alt=codeallthethingz loading=lazy></a><a href=https://github.com/VictorHom><img src="https://avatars.githubusercontent.com/u/3211873?v=4&s=64" alt=VictorHom loading=lazy></a><a href=https://github.com/ulivz><img src="https://avatars.githubusercontent.com/u/23133919?v=4&s=64" alt=ulivz loading=lazy></a><a href=https://github.com/timothyr><img src="https://avatars.githubusercontent.com/u/21153307?v=4&s=64" alt=timothyr loading=lazy></a><a href=https://github.com/thordy><img src="https://avatars.githubusercontent.com/u/1622278?v=4&s=64" alt=thordy loading=lazy></a><a href=https://github.com/eugef><img src="https://avatars.githubusercontent.com/u/895071?v=4&s=64" alt=eugef loading=lazy></a><a href=https://github.com/warncke><img src="https://avatars.githubusercontent.com/u/1342069?v=4&s=64" alt=warncke loading=lazy></a><a href=https://github.com/StarpTech><img src="https://avatars.githubusercontent.com/u/1764424?v=4&s=64" alt=StarpTech loading=lazy></a><a href=https://github.com/dustinbrownman><img src="https://avatars.githubusercontent.com/u/4685176?v=4&s=64" alt=dustinbrownman loading=lazy></a><a href=https://github.com/budden><img src="https://avatars.githubusercontent.com/u/13260934?v=4&s=64" alt=budden loading=lazy></a><a href=https://github.com/icrotz><img src="https://avatars.githubusercontent.com/u/13169892?v=4&s=64" alt=icrotz loading=lazy></a><a href=https://github.com/Chronove><img src="https://avatars.githubusercontent.com/u/5243401?v=4&s=64" alt=Chronove loading=lazy></a><a href=https://github.com/cc-ebay><img src="https://avatars.githubusercontent.com/u/64445558?v=4&s=64" alt=cc-ebay loading=lazy></a><a href=https://github.com/briceburg><img src="https://avatars.githubusercontent.com/u/490144?v=4&s=64" alt=briceburg loading=lazy></a><a href=https://github.com/doowb><img src="https://avatars.githubusercontent.com/u/995160?v=4&s=64" alt=doowb loading=lazy></a><a href=https://github.com/BEN00262><img src="https://avatars.githubusercontent.com/u/40175396?v=4&s=64" alt=BEN00262 loading=lazy></a><a href=https://github.com/1N50MN14><img src="https://avatars.githubusercontent.com/u/2000696?v=4&s=64" alt=1N50MN14 loading=lazy></a><a href=https://github.com/awei01><img src="https://avatars.githubusercontent.com/u/2857763?v=4&s=64" alt=awei01 loading=lazy></a></div></section></main><footer class=site-footer><a href=https://openjsf.org/ class=openjsf><img src=/assets/6876aea9.svg alt> <span><span class=bold>OpenJS</span> <span class=light>Foundation</span></span></a><div class=separator></div><a href=https://github.com/marko-js/marko/blob/main/LICENSE class=osi><img src=/assets/1b70b500.svg alt> MIT License</a><div class=separator></div><a href=https://github.com/eBay class=ebay><img src=/assets/339b8a9e.svg alt=eBay> open source</a></footer><script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-66854919-1', 'markojs.com');
ga('send', 'pageview');
</script><a href=https://discord.gg/marko target=_blank class=discord-button><img src=/assets/78800ea4.svg alt="Chat in Marko's Discord Server"></a><script>$MC=(window.$MC||[]).concat({"l":1,"w":[["s0-1-0-14",0,{}],["s0-1-0-14-12",1,{}],["s0-1-0-15",2,{}],["s0-1-0-15-9",3,{}],["s0-1-0-17-1",4,{}],["s0-1-0-17-1-10",5,{}],["s0-1-0-17-3-0-7-12",6,{},{"f":1,"s":{"count":0}}],["s0-1-0-17-4-0-7-2",7,{"class":"home-streaming-example"},{"f":1,"s":{"progress":0.1}}]],"t":["IZr$9Bl","uja7Vjk","G0dDyNr","wIkyy5p","FLbBM5m","FAFc9gd","dUoXHZ","qxenXqc"]})</script></body></html>