Mithril.js — Lightweight SPA Framework with Built-In Routing and XHR

Introduction

Mithril.js is a small, fast JavaScript framework for building single-page applications. Unlike most frameworks that focus only on the view layer, Mithril ships with routing and an XHR utility built in, providing everything needed for a complete SPA in a single dependency under 10 KB gzipped.

What Mithril.js Does

• Renders views using a virtual DOM with hyperscript or JSX syntax
• Includes a client-side router for mapping URLs to component views
• Provides m.request, an XHR wrapper with automatic JSON parsing and redraw triggering
• Auto-redraws the UI after event handlers and m.request calls complete
• Supports both closure components and POJO (plain-object) components

Architecture Overview

Mithril uses a simple render loop: when a user event fires or an XHR completes, the framework calls the top-level view function, diffs the new virtual DOM tree against the previous one, and patches the real DOM. The diffing algorithm uses keys for list reconciliation and skips static subtrees. Routing maps URL fragments to components, and the lifecycle (oninit, oncreate, onupdate, onremove) hooks into mount and unmount phases.

Self-Hosting & Configuration

• Add Mithril via npm (npm install mithril) or a CDN script tag
• Use a bundler like Vite, Webpack, or Rollup for production builds with tree shaking
• Configure JSX with @babel/plugin-transform-react-jsx pointing to m as the pragma
• Organize components as plain objects or closure functions in a src/ directory
• Deploy the built bundle to any static hosting provider

Key Features

• Complete SPA toolkit (view, router, XHR) in under 10 KB gzipped
• Auto-redraw system eliminates manual state-to-view synchronization
• Hyperscript API enables component authoring without a build step
• Lifecycle hooks on both virtual DOM nodes and components
• No framework-specific file formats or compile step required

Comparison with Similar Tools

• React — Larger ecosystem but requires separate router and data-fetching libraries, heavier total weight
• Vue — More features and tooling out of the box, but significantly larger framework size
• Preact — Similar small size and React compatibility, but no built-in router or XHR
• Svelte — Compiler-based with no virtual DOM, different development model, requires build step
• Inferno — Fastest virtual DOM renderer, React-compatible, but no built-in router or request utility

FAQ

Q: Is Mithril suitable for large applications? A: Yes. Mithril has been used in production at scale. Its simplicity makes large codebases easier to reason about, though the ecosystem of third-party components is smaller than React's.

Q: Does Mithril support TypeScript? A: Yes. Type definitions are included in the package, and Mithril works well with TypeScript projects using JSX or hyperscript.

Q: Why does Mithril auto-redraw? A: Auto-redraw after event handlers and XHR calls means developers rarely need to think about when to update the UI. Manual redraw control via m.redraw() is available when needed.

Q: Can I use Mithril with other libraries? A: Yes. Mithril integrates easily with any JavaScript library. Its oncreate and onremove hooks allow wrapping third-party DOM widgets like charts or maps.

Sources

• https://github.com/MithrilJS/mithril.js
• https://mithril.js.org/