Skip to content
Get packs

Guide · Open source

How to use mithril.js: install, set up and build a single page app

Updated · written with AI from the project's own documentation and checked against our catalogue data

Mithril.js is a client-side JavaScript framework for building single page applications, where the page updates in the browser without full reloads. This guide shows you how to add it to a project, what it includes out of the box, and where to find the documentation and community help you need to start building. You will need to be comfortable writing JavaScript to use it.

MithrilMithrilJS/mithril.js · ★ 14.5k · MIT

Quick start

  1. 1Check your browser targets. Confirm your users run Firefox ESR, the last two versions of Firefox, Edge, Safari or Chrome, since the README lists these as supported and says no polyfills are required.
  2. 2Install the package. Run npm install mithril --save in your project folder, or add a script tag from unpkg or jsDelivr for a no-build setup.
  3. 3Optionally add types. If you use TypeScript, run npm install @types/mithril --save-dev to get the DefinitelyTyped definitions.
  4. 4Read the Getting Started guide. Open the Getting Started section on mithril.js.org to learn the basic structure of a Mithril app.
  5. 5Build with the API docs open. Use the API Docs to look up routing and XHR functions as you write your components.
  6. 6Ask for help if needed. Post questions on the Mithril.js Zulip chat or on Stack Overflow with the mithril.js tag.

What is Mithril.js and what does it include?

Mithril.js describes itself as a modern client-side framework for building Single Page Applications. According to its README, it is small, about 8.93 KB gzipped, and it provides routing and XHR (network request) utilities out of the box, so you do not need to add separate packages for those features.

  • Client-side framework for single page applications
  • Built-in routing
  • Built-in XHR (network request) utilities
  • Works without polyfills in the browsers listed below

Install Mithril.js with npm or a CDN

The README gives two ways to get Mithril.js. If you use a package manager, install it with npm. If you prefer not to set up a build step, you can load it from a CDN with a script tag. The README lists unpkg and jsDelivr, with a development file and a minified production file for each.

  • npm: use the package-manager install shown in the code block
  • CDN: pick either unpkg or jsDelivr, and use the .min.js file for production
npm install mithril --save

Add TypeScript type definitions (optional)

If you write TypeScript, the README says type definitions are available from DefinitelyTyped. Install them as a development dependency with the command below.

npm install @types/mithril --save-dev

Learn the API and find examples

The README points to the official documentation at mithril.js.org. Its API Docs, a Simple Application guide and an Examples page are the most direct places to learn how to write components, define routes and make requests. The README also recommends the Getting Started guide as a starting point.

  • API Docs: mithril.js.org/api.html
  • Simple Application: mithril.js.org/simple-application.html
  • Examples: mithril.js.org/examples.html
  • Getting Started: mithril.js.org/#getting-started

Get help when you are stuck

The README names two support channels. The Mithril.js community is active on Zulip, and you can also ask questions on Stack Overflow using the mithril.js tag. A Contributing FAQ is available if you want to help improve the project.

  • Zulip chat: mithril.zulipchat.com
  • Stack Overflow: tag mithril.js
  • Contributing FAQ: mithril.js.org/contributing.html

What people use it for

  • Building a single page app where pages change in the browser without full reloads
  • Creating a small web app that needs routing and HTTP requests without extra libraries
  • Adding interactive pages to a project that loads Mithril from a CDN script tag
  • Teams that want a lightweight alternative to larger frameworks such as React or Vue

Frequently asked questions

How do I install mithril.js?

Run npm install mithril --save in your project folder. You can also load it with a script tag from unpkg or jsDelivr, which the README lists as CDN options.

Is mithril.js free to use?

Mithril.js is released under the MIT licence, according to the project's listing. The MIT licence is a permissive open-source licence, so check its terms if you have specific legal needs.

What do I need to use mithril.js?

The source does not list any prerequisites. You will need to write JavaScript, and you can use npm or a CDN script tag to add it to your project.

Does mithril.js support older browsers?

The README says it supports Firefox ESR, and the last two versions of Firefox, Edge, Safari and Chrome, with no polyfills required. Projects that need older browsers beyond these should choose another option.

Can mithril.js do server-side rendering?

The README only describes client-side use, so it does not claim server-side rendering or backend features. If you need those, look at a framework built for that purpose.

How does mithril.js compare to React or Vue?

The project lists React, Vue, Svelte and Preact as comparable projects. Mithril.js's main points, per the README, are its small size and built-in routing and XHR utilities, so compare them against your needs.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Mithril.js suits developers who want a small client-side framework for single page apps with routing and HTTP utilities included, and who target modern browsers. If you need server-side rendering, a no-code tool, or support for old browsers beyond the listed set, pick a different tool.

Install options & downloads