Skip to content
Neutrino preset that support building Elm applications.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Neutrino elm Preset

Build Status npm version


  • Node.js v6.9+
  • Yarn or npm client
  • Neutrino v6


neutrino-preset-elm can be installed via the Yarn or npm clients. Inside your project, make sure neutrino and neutrino-preset-elm are development dependencies.


❯ yarn add --dev neutrino neutrino-preset-elm


❯ npm install --save-dev neutrino neutrino-preset-elm

Project Layout

neutrino-preset-elm follows the standard project layout specified by Neutrino. This means that by default all project source code should live in a directory named src in the root of the project. This includes JavaScript files, CSS stylesheets, images, and any other assets that would be available to your compiled project.


After installing Neutrino and the elm preset, add a new directory named src in the root of the project, with a single JS file named index.js in it.

❯ mkdir src && touch src/index.js

This elm preset exposes an element in the page with an ID of root to which you can mount your application. Edit your src/index.js file with the following:

// src/index.js
const Elm = require('./Main.elm');
const mountNode = document.getElementById('root');
const app = Elm.Main.embed(mountNode);

Install the elm html packages.

❯ elm package install elm-lang/html

After doing this there should be a file called elm-package.json in the root of your project. Update the elm-package.json to tell elm to search for dependencies in the src directory.

  "source-directories": [

Add your elm application entry point to the src directory.

❯ touch  src/Main.elm
-- src/Main.elm
module Main exposing (..)

import Html exposing (Html, div, text, program)

type alias Model =

init : ( Model, Cmd Msg )
init =
    ( "Hello", Cmd.none )

type Msg
    = NoOp

view : Model -> Html Msg
view model =
    div []
        [ text model ]

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        NoOp ->
            ( model, Cmd.none )

subscriptions : Model -> Sub Msg
subscriptions model =

main : Program Never Model Msg
main =
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions

Now edit your project's package.json to add commands for starting and building the application:

  "scripts": {
    "start": "neutrino start --use neutrino-preset-elm",
    "build": "neutrino build --use neutrino-preset-elm"

Start the app, then open a browser to the address in the console:


❯ yarn start
✔ Development server running on: http://localhost:5000
✔ Build completed


❯ npm start
✔ Development server running on: http://localhost:5000
✔ Build completed


Add a .neutrinorc.js file to the root of your project

// .neutrinorc.js
module.exports = {
  use: [
    ['neutrino-preset-elm', {
      presetWeb: {},
      debug: true,

Update your package.json file

  "scripts": {
    "start": "neutrino start",
    "build": "neutrino build"


Passes options to neutrino-preset-web. See


Turn on elm debugger during development.

You can’t perform that action at this time.