DEV Community: Dominic Jean

The fastest way to start a Mithril + Ionic + Vite project in 2025

Dominic Jean — Fri, 21 Nov 2025 02:04:57 +0000

Building mobile-ready web applications often involves a heavy stack. You have React, Angular, or Vue combined with a UI framework, and suddenly your bundle size is massive before you've even written a line of code.

Enter Mithril.js. It's a modern client-side JavaScript framework for building Single Page Applications. It's small (< 10kb gzip), fast, and provides routing and XHR utilities out of the box.

Combine that with Ionic Framework for native-like UI components and Vite for instant dev server start times, and you have a powerhouse stack for rapid development.

But setting this up manually? Configuring Vite to handle Mithril's JSX (or Hyperscript), setting up Ionic's loader, configuring the router... it's a pain.

That's why I built create-vitriol.

What is Vitriol?

create-vitriol is a scaffolding tool that sets up a production-ready Mithril.js project powered by Vite. It supports:

⚡️ Vite: Instant server start and HMR.
📱 Ionic: Optional integration for mobile UI components.
📘 TypeScript: First-class support.
🔧 Flexible Syntax: Choose between JSX or Standard (Hyperscript).
🧪 Testing: Pre-configured with Vitest.

Getting Started

You don't need to install anything globally. Just run:

npm create vitriol@latest

(Or yarn create vitriol, pnpm create vitriol, bun create vitriol)

The Interactive Setup

The CLI will guide you through a few simple questions:

Project Name: What do you want to call your app?
Project Type: Standard (Hyperscript) or JSX?
Language: Javascript/TypeScript?
Ionic: Yes/No? (Select Yes for this tutorial!)
DevContainer: Do you want a Docker dev environment?

And that's it! In less than a second, your project is scaffolded.

A Look Inside

Let's say you chose Standard (Hyperscript) + Ionic + TypeScript. Here is what the generated code looks like.

File-System Routing

Vitriol comes with a lightweight file-system router. You don't need to manually define route maps. Just create a file in src/pages/.

src/pages/home.ts:

import m from "mithril";

export default function Home() {
  return {
    view: () => {
      return m("ion-page", [
        m("ion-header", [
          m("ion-toolbar", [
            m("ion-title", "Home")
          ])
        ]),
        m("ion-content", { class: "ion-padding" }, [
          m("h1", "Welcome to Vitriol"),
          m("p", "This is a Mithril + Ionic + Vite app."),
          m("ion-button", { onclick: () => alert("Hello!") }, "Click Me")
        ])
      ])
    }
  }
}

Notice how we are using standard Ionic Web Components (ion-page, ion-header, ion-button) directly within Mithril's m() function. It works seamlessly.

Running the App

cd my-app
npm install
npm run dev

Your app will be running at http://localhost:5173.

Why this stack?

Performance: Mithril is incredibly fast. Combined with Vite, the development experience is instantaneous.
Simplicity: No complex build steps or "magic" imports. It's just JavaScript/TypeScript.
Mobile Ready: Ionic provides the look and feel of a native mobile app, making it easy to wrap with Capacitor later.

Give it a try!

If you are looking for a lightweight alternative to the big frameworks without sacrificing modern tooling, give Vitriol a spin.

GitHub: https://github.com/DeJy/vitriol
NPM: https://www.npmjs.com/package/create-vitriol

If you find it useful, please leave a ⭐️ on GitHub! Happy coding!

Vitriol: Mithril+Vite

Dominic Jean — Wed, 01 Nov 2023 01:28:37 +0000

⚡ Setting Up Mithril + Vite Using Vitriol

Vitriol is a lightweight npm package that integrates Mithril with Vite and Ionic Framework, enabling fast and modern frontend development.

🛠 Prerequisites

Make sure you have the following before starting:

Node.js and npm installed
Your preferred code editor
Basic knowledge of JavaScript and Mithril

🚀 Step 1: Create Your Project with Vitriol

npm create vitriol@latest

If you're using Vitriol for the first time, npm will prompt you to install the package.

🧩 Step 2: Configure Project Setup

You’ll be asked to choose:

Project type: JSX or Standard
Language: JavaScript or TypeScript
Project name (default is vitriol-project)
Whether to include the Ionic Framework (we recommend including it for this demo)
Add devcontainer.json configuration? This option lets you set up a Development Container for seamless coding in environments like GitHub Codespaces or VS Code Remote. Choose Yes if you want to enable this feature.

📌 If you use a custom project name, replace vitriol-project in subsequent steps with your chosen name.

Alternatively, you can use command-line arguments to skip prompts:

# Example: Create a TypeScript project with Standard syntax
npm create vitriol@latest my-app -- --standard --ts

📦 Step 3: Install Dependencies

cd vitriol-project
npm install

Wait until installation completes.

🌐 Step 4: Start Development Server

npm run dev

Then open the URL displayed in your terminal to see your running app in the browser.

🔧 Step 5: Explore and Update the App

The source files are in the /src folder.

main.js (or main.ts) sets up components and Mithril routes automatically
All .js, .jsx, .ts, or .tsx files inside /pages are auto-registered as routes
Access pages via URLs like /#/pagename or programmatically with m.route.set("/pagename")

✅ Step 6: Automate Testing with Vitest

Tests live in the /test folder.

To run them:

npm run test

📦 Step 7: Build for Production

npm run build

The build output is placed in the /dist directory

npm run preview

To test your production-ready files locally before deploying