Learn MITHRIL-JS with Real Code Examples

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.

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.

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.

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.

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.

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.

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.

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.

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.