style: /riotjs/css/riot

script: /riotjs/site

content_class: normal

noheader: true

riot_version: 2.2.1

datetime: June 27

==== layout

<a id="fork-me" href="https://github.com/riot/riot">

<img src="/common/img/fork-me.png" class="no-retina">

<div id="header-wrapper">

<div id="riot-header">

<div class="wrap">

<a id="riot-logo" href="/riotjs/" class="riot-tag">{</a>

<a id="muut-logo" href="/">by <span class="icon">M</span></a>

<a id="to-top">Back to top</a>

<a id="burger">menu<span class="icon">0</span></a>

</div>

</div>

{% if hero %}

<div id="hero">

<div class="riot-tag">{</div>

<h1>A React-like user interface micro-library</h1>

<h2>Custom tags • Enjoyable syntax • Virtual DOM • Tiny size</h2>

<p class="tease normal">

<a href="download.html" class="tag blue">v{{ riot_version }}</a>

— <a href="release-notes.html"> with 4-5x faster loops than on React</a>

</p>

{% endif %}

<div class="wrap">

<nav id="toc" class="normal">

<h3>Get started</h3>

<div>

<p><a href="/riotjs/">Why Riot?</a></p>

<p><a href="/riotjs/compare.html">Compare</a></p>

<p><a href="/riotjs/faq.html">FAQ</a></p>

<p><a href="/riotjs/compiler.html">Compiler</a></p>

<p><a href="/riotjs/download.html">Download</a></p>

<p><a href="/riotjs/forum/">Forum</a></p>

</div>

<h3>Guide</h3>

<h5>Custom tags</h5>

<div>

<p><a href="/riotjs/guide/">Example</a></p>

<p><a href="/riotjs/guide/#tag-syntax">Tag syntax</a></p>

<p><a href="/riotjs/guide/#mounting">Mounting</a></p>

<p><a href="/riotjs/guide/#options">Options</a></p>

<p><a href="/riotjs/guide/#mixins">Mixins</a></p>

<p><a href="/riotjs/guide/#tag-lifecycle">Tag lifecycle</a></p>

<p><a href="/riotjs/guide/#expressions">Expressions</a></p>

<p><a href="/riotjs/guide/#nested-tags">Nested tags</a></p>

<p><a href="/riotjs/guide/#named-elements">Named elements</a></p>

<p><a href="/riotjs/guide/#event-handlers">Event handlers</a></p>

<p><a href="/riotjs/guide/#conditionals">Conditionals</a></p>

<p><a href="/riotjs/guide/#loops">Loops</a></p>

<p><a href="/riotjs/guide/#server-side">Server-side rendering</a></p>

</div>

<h5>Application design</h5>

<div>

<p><a href="/riotjs/guide/#tools-not-policy">Tools, not policy</a></p>

<p><a href="/riotjs/guide/#observable">Observable</a></p>

<p><a href="/riotjs/guide/#routing">Routing</a></p>

<p><a href="/riotjs/guide/#modularity">Modularity</a></p>

</div>

<h3>API</h3>

<div>

<p><a href="/riotjs/api/#general">General</a></p>

<p><a href="/riotjs/api/#custom-tags">Custom tags</a></p>

<p><a href="/riotjs/api/#compiler">Compiler</a></p>

<p><a href="/riotjs/api/#observable">Observable</a></p>

<p><a href="/riotjs/api/#router">Router</a></p>

</div>

<h3>v1.0</h3>

<div>

<p><a href="/riotjs/v1.0.html">User guide</a></p>

</div>

<a class="close">x</a>

</nav><!--

--><div id="content" class="{{ content_class }}">

<div class="hgroup">

<h1>{{ data.subtitle || data.title }}</h1>

<h2>{{ description }}</h2>

</div>

{{ body }}

</div>