Learn RIOT-JS with Real Code Examples
Updated Nov 22, 2025
Code Sample Descriptions
1
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.
2
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.
3
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.
4
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.
5
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.
6
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.
7
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.
8
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.
9
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.