{"library":"mithril","title":"Mithril.js","description":"Mithril.js is a modern, small, and fast client-side JavaScript framework primarily designed for building Single Page Applications. Currently at stable version 2.3.8, it maintains an active release cadence with regular patch updates and community-driven maintenance. Its key differentiators include a remarkably small bundle size (around 8.8 KiB gzipped), a highly performant virtual DOM diffing system, and built-in functionalities for routing and XHR requests, reducing the need for external libraries. Unlike some larger frameworks, Mithril.js focuses on providing core UI primitives without dictating an entire ecosystem, allowing developers more flexibility. It supports modern browsers (IE11, Firefox ESR, and the last two versions of Firefox, Edge, Safari, and Chrome) without requiring polyfills and can be used with or without build tools, although bundlers are recommended for production environments.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install mithril"],"cli":null},"imports":["import m from 'mithril'","import m from 'mithril'; m.mount(document.body, Component)","import m from 'mithril'; m.route(document.body, '/', routes)","import m, { Vnode } from 'mithril'; function MyComponent(vnode: Vnode) { /* ... */ }"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import m from 'mithril';\n\ninterface MyComponentAttrs {\n  name: string;\n}\n\nconst MyComponent = {\n  count: 0, // Component local state\n  oninit: function(vnode: m.Vnode<MyComponentAttrs>) {\n    // Initialize state, cannot assign directly to vnode.state in v2+\n    vnode.state.count = 0;\n  },\n  view: function(vnode: m.Vnode<MyComponentAttrs>) {\n    return m('div', [\n      m('h1', `Hello, ${vnode.attrs.name}! Current count: ${vnode.state.count}`),\n      m('button', {\n        onclick: () => {\n          vnode.state.count++;\n        }\n      }, 'Increment'),\n      m('p', 'Click the button to increment the counter.')\n    ]);\n  }\n};\n\nm.mount(document.body, { view: () => m(MyComponent, { name: 'Mithril' }) });\n\n// To demonstrate routing (requires an element to mount routes to, e.g., <div id=\"app\"></div>)\n// const homeRoute = { view: () => m('h2', 'Welcome Home!') };\n// const aboutRoute = { view: () => m('h2', 'About Us') };\n// m.route(document.getElementById('app') || document.body, '/home', {\n//   '/home': homeRoute,\n//   '/about': aboutRoute\n// });","lang":"typescript","description":"This quickstart demonstrates a basic Mithril.js component with local state and event handling, then mounts it to the document body. It highlights how to define components, manage state, and render dynamic content.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}