elm-native

elm-native

Scaffold hybrid mobile apps with Elm, Vite, and Capacitor. (Blog post)

npx elm-native my-app
cd my-app
npm run dev

This gives you a working Elm + Vite + Capacitor project with iOS and Android ready to go, including safe area inset handling so you don't have to fight the notch on day one.

Why?

I wanted to write mobile apps in Elm. Getting Elm, Vite, and Capacitor to play nice together is not trivial, so I made a scaffolding tool. It's very much an MVP, but it works.

What you get

my-app/
├── src/
│   ├── Main.elm          # Your Elm app (starts as a counter)
│   └── main.js           # Thin JS bridge to Capacitor
├── index.html            # Mobile-friendly HTML shell
├── elm.json
├── vite.config.js
├── capacitor.config.json
├── android/              # Open with Android Studio
├── ios/                  # Open with Xcode
└── assets/               # App icons and splash screens

The template includes a simple counter that handles safe area insets, so you can see the full Elm-to-native pattern in action before replacing it with your own code.

How it fits together

main.js reads device info from Capacitor (like safe area insets) and passes it to Elm as flags. Elm handles all the UI. Vite compiles Elm via vite-plugin-elm. Capacitor wraps the built web app in a native shell.

Scripts

Command	What it does
npm run dev	Vite dev server on port 3000
npm run build	Production build to dist/
npm run sync	Generate assets, build, and sync to native projects
npm run open:android	Open in Android Studio
npm run open:ios	Open in Xcode
npm run run:android	Build and run on Android device/emulator
npm run run:ios	Build and run on iOS device/simulator

Adding native capabilities

Install a Capacitor plugin and wire it up in main.js:

npm install @capacitor/camera

Use flags for initial data, ports for runtime communication back to Elm.

Requirements

• Node.js
• Android Studio for Android (works on all platforms)
• Xcode for iOS (requires macOS)

License

MIT