Learn Riot-js - 9 Code Examples & CST Typing Practice Test

Riot.js is a lightweight, client-side JavaScript framework for building web applications with a component-based architecture. It combines simple syntax, a virtual DOM, and reactive data binding to create maintainable, modular UI components.

View all 9 Riot-js code examples →

Riot.js Counter Component Riot.js Counter with Step Increment Riot.js Counter with Max Limit Riot.js Counter with Auto-Reset Riot.js Counter with History Riot.js Counter with Dark Mode Only Riot.js Counter with Auto-Increment Riot.js Counter with Conditional Theme Riot.js Full Featured Counter

Learn RIOT-JS with Real Code Examples

Updated Nov 22, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Riot.js Counter Component

<counter>
    <h2>Counter: {state.count}</h2>
    <div>
        <button onclick={() => state.count++}>+</button>
        <button onclick={() => state.count--}>-</button>
        <button onclick={() => state.count = 0}>Reset</button>
    </div>
    <button onclick={() => state.isDark = !state.isDark}>Switch to {state.isDark ? 'Light' : 'Dark'} Theme</button>

    <script>
        export default {
        state: { count: 0, isDark: false }
        }
    </script>
</counter>

<script type="module">
    import { component } from 'riot';
    import Counter from './counter.riot';
    component(Counter)(document.body);
</script>
<style>
    .dark-theme { background-color: #222; color: #eee; }
    .light-theme { background-color: #fff; color: #000; }
</style>

Basic Riot.js counter with dark/light theme toggle.

Let’s Try →

Riot.js Counter with Step Increment

<step-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count += state.step}>+</button>
    <button onclick={() => state.count -= state.step}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, step: 2 }
        }
    </script>
</step-counter>

Counter increments/decrements by a step value.

Let’s Try →

Riot.js Counter with Max Limit

<max-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count < state.max && state.count++}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, max: 5 }
        }
    </script>
</max-counter>

Stops incrementing after a maximum count is reached.

Let’s Try →

Riot.js Counter with Auto-Reset

<auto-reset-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count = (state.count + 1 > state.threshold ? 0 : state.count + 1)}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, threshold: 10 }
        }
    </script>
</auto-reset-counter>

Automatically resets when counter exceeds a threshold.

Let’s Try →

Riot.js Counter with History

<history-counter>
    <h2>Counter: {state.count}</h2>
    <div>History: {state.history.join(', ')}</div>
    <button onclick={() => { state.count++; state.history.push('Increment'); }}>+</button>
    <button onclick={() => { state.count--; state.history.push('Decrement'); }}>-</button>
    <button onclick={() => { state.count = 0; state.history.push('Reset'); }}>Reset</button>

    <script>
        export default {
        state: { count: 0, history: [] }
        }
    </script>
</history-counter>

Tracks increment/decrement history.

Let’s Try →

Riot.js Counter with Dark Mode Only

<dark-mode-counter>
    <h2>Counter: 0</h2>
    <button onclick={() => state.isDark = !state.isDark}>Toggle Theme</button>

    <script>
        export default {
        state: { isDark: false }
        }
    </script>
</dark-mode-counter>

Static counter with only dark/light theme toggle.

Let’s Try →

Riot.js Counter with Auto-Increment

<auto-increment-counter>
    <h2>Counter: {state.count}</h2>

    <script>
        export default {
        state: { count: 0 },
        onMounted() {
        setInterval(() => { state.count++; }, 1000);
        }
        }
    </script>
</auto-increment-counter>

Automatically increments counter every second.

Let’s Try →

Riot.js Counter with Conditional Theme

<conditional-theme-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count++}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>
    <div>Theme: {state.count % 2 === 0 ? 'Dark' : 'Light'}</div>

    <script>
        export default { state: { count: 0 } }
    </script>
</conditional-theme-counter>

Theme changes automatically based on even/odd counter value.

Let’s Try →

Riot.js Full Featured Counter

<full-counter>
    <h2>Counter: {state.count}</h2>
    <div>History: {state.history.join(', ')}</div>
    <button onclick={() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Increment'); }}>+</button>
    <button onclick={() => { state.count-=state.step; state.history.push('Decrement'); }}>-</button>
    <button onclick={() => { state.count=0; state.history.push('Reset'); }}>Reset</button>
    <button onclick={() => state.isDark=!state.isDark}>Toggle Theme</button>

    <script>
        export default {
        state: { count: 0, history: [], isDark: false, step: 2, max: 10 },
        onMounted() {
        setInterval(() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Auto Increment'); }, 1000);
        }
        }
    </script>
</full-counter>

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

Let’s Try →

Frequently Asked Questions about Riot-js

What is Riot-js?

What are the primary use cases for Riot-js?

Single-page applications. Component libraries. Dashboards and admin panels. Interactive UI widgets. Rapid prototyping with clean, modular code

What are the strengths of Riot-js?

Lightweight and fast. Easy to learn and implement. Modular components with scoped styles. Reactive and declarative UI updates. Good balance between simplicity and SPA functionality

What are the limitations of Riot-js?

Smaller ecosystem than React/Vue. Limited built-in tooling for routing and state. Requires manual integration for advanced patterns. Less widely adopted, fewer tutorials and resources. Complex SPAs may require additional libraries

How can I practice Riot-js typing speed?

CodeSpeedTest offers 9+ real Riot-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.

Learn Other Programming Languages

C React Python C++Rust TypeScript Kotlin PHP Java C#Ruby Mql Cql N1ql Cypher Gremlin Partiql Haskell Elixir Fsharp View all languages →

Code Sample Descriptions

Riot.js Counter Component

<counter>
    <h2>Counter: {state.count}</h2>
    <div>
        <button onclick={() => state.count++}>+</button>
        <button onclick={() => state.count--}>-</button>
        <button onclick={() => state.count = 0}>Reset</button>
    </div>
    <button onclick={() => state.isDark = !state.isDark}>Switch to {state.isDark ? 'Light' : 'Dark'} Theme</button>

    <script>
        export default {
        state: { count: 0, isDark: false }
        }
    </script>
</counter>

<script type="module">
    import { component } from 'riot';
    import Counter from './counter.riot';
    component(Counter)(document.body);
</script>
<style>
    .dark-theme { background-color: #222; color: #eee; }
    .light-theme { background-color: #fff; color: #000; }
</style>

Basic Riot.js counter with dark/light theme toggle.

Let’s Try →

Riot.js Counter with Step Increment

<step-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count += state.step}>+</button>
    <button onclick={() => state.count -= state.step}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, step: 2 }
        }
    </script>
</step-counter>

Counter increments/decrements by a step value.

Let’s Try →

Riot.js Counter with Max Limit

<max-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count < state.max && state.count++}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, max: 5 }
        }
    </script>
</max-counter>

Stops incrementing after a maximum count is reached.

Let’s Try →

Riot.js Counter with Auto-Reset

<auto-reset-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count = (state.count + 1 > state.threshold ? 0 : state.count + 1)}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>

    <script>
        export default {
        state: { count: 0, threshold: 10 }
        }
    </script>
</auto-reset-counter>

Automatically resets when counter exceeds a threshold.

Let’s Try →

Riot.js Counter with History

<history-counter>
    <h2>Counter: {state.count}</h2>
    <div>History: {state.history.join(', ')}</div>
    <button onclick={() => { state.count++; state.history.push('Increment'); }}>+</button>
    <button onclick={() => { state.count--; state.history.push('Decrement'); }}>-</button>
    <button onclick={() => { state.count = 0; state.history.push('Reset'); }}>Reset</button>

    <script>
        export default {
        state: { count: 0, history: [] }
        }
    </script>
</history-counter>

Tracks increment/decrement history.

Let’s Try →

Riot.js Counter with Dark Mode Only

<dark-mode-counter>
    <h2>Counter: 0</h2>
    <button onclick={() => state.isDark = !state.isDark}>Toggle Theme</button>

    <script>
        export default {
        state: { isDark: false }
        }
    </script>
</dark-mode-counter>

Static counter with only dark/light theme toggle.

Let’s Try →

Riot.js Counter with Auto-Increment

<auto-increment-counter>
    <h2>Counter: {state.count}</h2>

    <script>
        export default {
        state: { count: 0 },
        onMounted() {
        setInterval(() => { state.count++; }, 1000);
        }
        }
    </script>
</auto-increment-counter>

Automatically increments counter every second.

Let’s Try →

Riot.js Counter with Conditional Theme

<conditional-theme-counter>
    <h2>Counter: {state.count}</h2>
    <button onclick={() => state.count++}>+</button>
    <button onclick={() => state.count--}>-</button>
    <button onclick={() => state.count = 0}>Reset</button>
    <div>Theme: {state.count % 2 === 0 ? 'Dark' : 'Light'}</div>

    <script>
        export default { state: { count: 0 } }
    </script>
</conditional-theme-counter>

Theme changes automatically based on even/odd counter value.

Let’s Try →

Riot.js Full Featured Counter

<full-counter>
    <h2>Counter: {state.count}</h2>
    <div>History: {state.history.join(', ')}</div>
    <button onclick={() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Increment'); }}>+</button>
    <button onclick={() => { state.count-=state.step; state.history.push('Decrement'); }}>-</button>
    <button onclick={() => { state.count=0; state.history.push('Reset'); }}>Reset</button>
    <button onclick={() => state.isDark=!state.isDark}>Toggle Theme</button>

    <script>
        export default {
        state: { count: 0, history: [], isDark: false, step: 2, max: 10 },
        onMounted() {
        setInterval(() => { let n=state.count+state.step; if(n>state.max)n=0; state.count=n; state.history.push('Auto Increment'); }, 1000);
        }
        }
    </script>
</full-counter>

Combines step increment, max limit, auto-reset, history, auto-increment, and theme toggle.

Let’s Try →

Frequently Asked Questions about Riot-js

What is Riot-js?

What are the primary use cases for Riot-js?

Single-page applications. Component libraries. Dashboards and admin panels. Interactive UI widgets. Rapid prototyping with clean, modular code

What are the strengths of Riot-js?

Lightweight and fast. Easy to learn and implement. Modular components with scoped styles. Reactive and declarative UI updates. Good balance between simplicity and SPA functionality

What are the limitations of Riot-js?

How can I practice Riot-js typing speed?

CodeSpeedTest offers 9+ real Riot-js code examples for typing practice. You can measure your WPM, track accuracy, and improve your coding speed with guided exercises.