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

Mithril.js is a modern, client-side JavaScript framework for building single-page applications. It is small, fast, and provides a virtual DOM, routing, and XHR utilities, allowing developers to create high-performance, modular web applications.

View all 9 Mithril-js code examples →

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

Learn MITHRIL-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

Mithril Counter Component

var Counter = {
    count: 0,
    isDark: false,
    view: function() {
        return m('div', { class: this.isDark ? 'dark-theme' : 'light-theme' }, [
        m('h2', 'Counter: ' + this.count),
        m('div', [
        m('button', { onclick: () => { this.count++; } }, '+'),
        m('button', { onclick: () => { this.count--; } }, '-'),
        m('button', { onclick: () => { this.count = 0; } }, 'Reset')
        ]),
        m('button', { onclick: () => { this.isDark = !this.isDark; } }, 'Switch to ' + (this.isDark ? 'Light' : 'Dark') + ' Theme')
        ]);
    }
};
m.mount(document.body, Counter);

Basic counter using Mithril.js with theme toggle.

Let’s Try →

Mithril Counter with Step Increment

var StepCounter = {
    count: 0,
    step: 2,
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count),
        m('button', { onclick: () => { this.count += this.step; } }, '+'),
        m('button', { onclick: () => { this.count -= this.step; } }, '-'),
        m('button', { onclick: () => { this.count = 0; } }, 'Reset')
        ]);
    }
};
m.mount(document.body, StepCounter);

Counter increments/decrements by a step value.

Let’s Try →

Mithril Counter with Max Limit

var MaxCounter = {
    count: 0,
    max: 5,
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count),
        m('button', { onclick: () => { if(this.count < this.max) this.count++; } }, '+'),
        m('button', { onclick: () => { this.count--; } }, '-'),
        m('button', { onclick: () => { this.count = 0; } }, 'Reset')
        ]);
    }
};
m.mount(document.body, MaxCounter);

Stops incrementing after a maximum value is reached.

Let’s Try →

Mithril Counter with Auto-Reset

var AutoResetCounter = {
    count: 0,
    threshold: 10,
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count),
        m('button', { onclick: () => { this.count = this.count + 1 > this.threshold ? 0 : this.count + 1; } }, '+'),
        m('button', { onclick: () => { this.count--; } }, '-'),
        m('button', { onclick: () => { this.count = 0; } }, 'Reset')
        ]);
    }
};
m.mount(document.body, AutoResetCounter);

Automatically resets when counter exceeds threshold.

Let’s Try →

Mithril Counter with History

var HistoryCounter = {
    count: 0,
    history: [],
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count),
        m('div', 'History: ' + this.history.join(', ')),
        m('button', { onclick: () => { this.count++; this.history.push('Increment'); } }, '+'),
        m('button', { onclick: () => { this.count--; this.history.push('Decrement'); } }, '-'),
        m('button', { onclick: () => { this.count=0; this.history.push('Reset'); } }, 'Reset')
        ]);
    }
};
m.mount(document.body, HistoryCounter);

Tracks increment/decrement history.

Let’s Try →

Mithril Counter with Dark Mode Only

var DarkModeCounter = {
    isDark: false,
    view: function() {
        return m('div', { class: this.isDark ? 'dark-theme' : 'light-theme' }, [
        m('h2', 'Counter: 0'),
        m('button', { onclick: () => { this.isDark = !this.isDark; } }, 'Toggle Theme')
        ]);
    }
};
m.mount(document.body, DarkModeCounter);

Static counter with only theme toggle.

Let’s Try →

Mithril Counter with Auto-Increment

var AutoIncrementCounter = {
    count: 0,
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count)
        ]);
    },
    oncreate: function() {
        setInterval(() => { this.count++; m.redraw(); }, 1000);
    }
};
m.mount(document.body, AutoIncrementCounter);

Automatically increments counter every second.

Let’s Try →

Mithril Counter with Conditional Theme

var ConditionalThemeCounter = {
    count: 0,
    view: function() {
        var isDark = this.count % 2 === 0;
        return m('div', { class: isDark ? 'dark-theme' : 'light-theme' }, [
        m('h2', 'Counter: ' + this.count),
        m('button', { onclick: () => { this.count++; } }, '+'),
        m('button', { onclick: () => { this.count--; } }, '-'),
        m('button', { onclick: () => { this.count=0; } }, 'Reset')
        ]);
    }
};
m.mount(document.body, ConditionalThemeCounter);

Theme changes automatically based on even/odd counter value.

Let’s Try →

Mithril Full Featured Counter

var FullCounter = {
    count: 0,
    history: [],
    isDark: false,
    step: 2,
    max: 10,
    view: function() {
        return m('div', { class: this.isDark ? 'dark-theme' : 'light-theme' }, [
        m('h2', 'Counter: ' + this.count),
        m('div', 'History: ' + this.history.join(', ')),
        m('button', { onclick: () => { let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history.push('Increment'); } }, '+'),
        m('button', { onclick: () => { this.count-=this.step; this.history.push('Decrement'); } }, '-'),
        m('button', { onclick: () => { this.count=0; this.history.push('Reset'); } }, 'Reset'),
        m('button', { onclick: () => { this.isDark=!this.isDark; } }, 'Toggle Theme')
        ]);
    },
    oncreate: function() {
        setInterval(() => { let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history.push('Auto Increment'); m.redraw(); }, 1000);
    }
};
m.mount(document.body, FullCounter);

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

Let’s Try →

Frequently Asked Questions about Mithril-js

What is Mithril-js?

What are the primary use cases for Mithril-js?

Single-page applications. Modular web components. High-performance dashboards. Small-to-medium web apps. Rapid prototyping with minimal boilerplate

What are the strengths of Mithril-js?

Extremely fast and lightweight. Simple API and minimal learning curve. Great for modular, component-based apps. Efficient virtual DOM diffing. Built-in routing and XHR reduce dependencies

What are the limitations of Mithril-js?

Smaller ecosystem than React/Vue. No official state management library. Fewer plugins and community resources. Manual integration for CSS frameworks. Less beginner-friendly compared to high-level frameworks

How can I practice Mithril-js typing speed?

CodeSpeedTest offers 9+ real Mithril-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

Mithril Counter Component

var Counter = {
    count: 0,
    isDark: false,
    view: function() {
        return m('div', { class: this.isDark ? 'dark-theme' : 'light-theme' }, [
        m('h2', 'Counter: ' + this.count),
        m('div', [
        m('button', { onclick: () => { this.count++; } }, '+'),
        m('button', { onclick: () => { this.count--; } }, '-'),
        m('button', { onclick: () => { this.count = 0; } }, 'Reset')
        ]),
        m('button', { onclick: () => { this.isDark = !this.isDark; } }, 'Switch to ' + (this.isDark ? 'Light' : 'Dark') + ' Theme')
        ]);
    }
};
m.mount(document.body, Counter);

Basic counter using Mithril.js with theme toggle.

Let’s Try →

Mithril Counter with Step Increment

var StepCounter = {
    count: 0,
    step: 2,
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count),
        m('button', { onclick: () => { this.count += this.step; } }, '+'),
        m('button', { onclick: () => { this.count -= this.step; } }, '-'),
        m('button', { onclick: () => { this.count = 0; } }, 'Reset')
        ]);
    }
};
m.mount(document.body, StepCounter);

Counter increments/decrements by a step value.

Let’s Try →

Mithril Counter with Max Limit

var MaxCounter = {
    count: 0,
    max: 5,
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count),
        m('button', { onclick: () => { if(this.count < this.max) this.count++; } }, '+'),
        m('button', { onclick: () => { this.count--; } }, '-'),
        m('button', { onclick: () => { this.count = 0; } }, 'Reset')
        ]);
    }
};
m.mount(document.body, MaxCounter);

Stops incrementing after a maximum value is reached.

Let’s Try →

Mithril Counter with Auto-Reset

var AutoResetCounter = {
    count: 0,
    threshold: 10,
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count),
        m('button', { onclick: () => { this.count = this.count + 1 > this.threshold ? 0 : this.count + 1; } }, '+'),
        m('button', { onclick: () => { this.count--; } }, '-'),
        m('button', { onclick: () => { this.count = 0; } }, 'Reset')
        ]);
    }
};
m.mount(document.body, AutoResetCounter);

Automatically resets when counter exceeds threshold.

Let’s Try →

Mithril Counter with History

var HistoryCounter = {
    count: 0,
    history: [],
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count),
        m('div', 'History: ' + this.history.join(', ')),
        m('button', { onclick: () => { this.count++; this.history.push('Increment'); } }, '+'),
        m('button', { onclick: () => { this.count--; this.history.push('Decrement'); } }, '-'),
        m('button', { onclick: () => { this.count=0; this.history.push('Reset'); } }, 'Reset')
        ]);
    }
};
m.mount(document.body, HistoryCounter);

Tracks increment/decrement history.

Let’s Try →

Mithril Counter with Dark Mode Only

var DarkModeCounter = {
    isDark: false,
    view: function() {
        return m('div', { class: this.isDark ? 'dark-theme' : 'light-theme' }, [
        m('h2', 'Counter: 0'),
        m('button', { onclick: () => { this.isDark = !this.isDark; } }, 'Toggle Theme')
        ]);
    }
};
m.mount(document.body, DarkModeCounter);

Static counter with only theme toggle.

Let’s Try →

Mithril Counter with Auto-Increment

var AutoIncrementCounter = {
    count: 0,
    view: function() {
        return m('div', [
        m('h2', 'Counter: ' + this.count)
        ]);
    },
    oncreate: function() {
        setInterval(() => { this.count++; m.redraw(); }, 1000);
    }
};
m.mount(document.body, AutoIncrementCounter);

Automatically increments counter every second.

Let’s Try →

Mithril Counter with Conditional Theme

var ConditionalThemeCounter = {
    count: 0,
    view: function() {
        var isDark = this.count % 2 === 0;
        return m('div', { class: isDark ? 'dark-theme' : 'light-theme' }, [
        m('h2', 'Counter: ' + this.count),
        m('button', { onclick: () => { this.count++; } }, '+'),
        m('button', { onclick: () => { this.count--; } }, '-'),
        m('button', { onclick: () => { this.count=0; } }, 'Reset')
        ]);
    }
};
m.mount(document.body, ConditionalThemeCounter);

Theme changes automatically based on even/odd counter value.

Let’s Try →

Mithril Full Featured Counter

var FullCounter = {
    count: 0,
    history: [],
    isDark: false,
    step: 2,
    max: 10,
    view: function() {
        return m('div', { class: this.isDark ? 'dark-theme' : 'light-theme' }, [
        m('h2', 'Counter: ' + this.count),
        m('div', 'History: ' + this.history.join(', ')),
        m('button', { onclick: () => { let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history.push('Increment'); } }, '+'),
        m('button', { onclick: () => { this.count-=this.step; this.history.push('Decrement'); } }, '-'),
        m('button', { onclick: () => { this.count=0; this.history.push('Reset'); } }, 'Reset'),
        m('button', { onclick: () => { this.isDark=!this.isDark; } }, 'Toggle Theme')
        ]);
    },
    oncreate: function() {
        setInterval(() => { let n=this.count+this.step; if(n>this.max)n=0; this.count=n; this.history.push('Auto Increment'); m.redraw(); }, 1000);
    }
};
m.mount(document.body, FullCounter);

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

Let’s Try →

Frequently Asked Questions about Mithril-js

What is Mithril-js?

What are the primary use cases for Mithril-js?

Single-page applications. Modular web components. High-performance dashboards. Small-to-medium web apps. Rapid prototyping with minimal boilerplate

What are the strengths of Mithril-js?

Extremely fast and lightweight. Simple API and minimal learning curve. Great for modular, component-based apps. Efficient virtual DOM diffing. Built-in routing and XHR reduce dependencies

What are the limitations of Mithril-js?

How can I practice Mithril-js typing speed?

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