astro-mithril ⚛️

This Astro integration enables server-side rendering and client-side hydration for your Mithril components.

Why Mithril?

Mithril is an extremely lightweight and flexible client-side JavaScript framework. It's small (<10 kb gzip) but powerful and fun to work with. The Astro starter project with a simple Mithril button & counter loaded a total of 37.8 kB. The identical Astro starter project with the same button & counter rendered by React loaded 150 kB.

Installation

Quick Install

The astro add command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.

# Using NPM
npx astro add astro-mithril
# Using Yarn
yarn astro add astro-mithril
# Using PNPM
pnpm astro add astro-mithril

If you run into any issues, feel free to report them to us on GitHub and try the manual installation steps below.

Install dependencies manually

First, install the astro-mithril integration like so:

npm install astro-mithril

Most package managers will install associated peer dependencies as well. Still, if you see a "Cannot find package 'mithril'" (or similar) warning when you start up Astro, you'll need to install mithril and mithril-node-render:

npm install mithril mithril-node-render

Now, apply this integration to your astro.config.* file using the integrations property:

astro.config.mjs

import { defineConfig } from 'astro/config';
import mithril from 'astro-mithril';

export default defineConfig({
  // ...
  integrations: [mithril()],
  // Add below setting if you want to use JSX
  vite: {
      esbuild: {
          jsx: "transform",
          jsxFactory: "m",
          jsxFragment: "'['",
      }
  }
});

Getting started

To use your first Mithril component in Astro, head to the Astro UI framework documentation. You'll explore:

• 📦 how framework components are loaded,
• 💧 client-side hydration options, and
• 🤝 opportunities to mix and nest frameworks together

Example

Check out the example in the /example folder

Troubleshooting

For help, check out the #support channel on Discord.

You can also check our Astro Integration Documentation for more on integrations.

Contributing

This package is maintained by pep108. You're welcome to submit an issue or PR!