Skip to content
Statically render html from Elm!
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.


Turn an Elm app into a static HTML site.

Your modules must look like this:

module Main exposing (..)

import Html
import Html.Attributes exposing (class, href)

view : Html.Html msg
view =
    Html.div []
        [ Html.h1 [ class "hello" ] [ Html.text "new!" ]
        , Html.a [ href "/login" ] [ Html.text "Login" ]
        , Html.text "hello"

then you can use

elm-static-html --filename Main.elm --output index.html

which will produce

<div><h1 class="hello">new!</h1><a href="/login">Login</a>hello</div>


elm-static-html -f Main.elm will print the output to stdout by default You can create an initial config file through elm-static-html --init-config, though it's not needed to work.

You can use the config file to generate multiple files through elm-static-html -c elm-static-html.json. The config file looks like this:

    "files": {
        "<ElmFile.elm>": {
            "output": "<OutputFile.html>",
            "viewFunction": "view"
        "<AnotherElmFile.elm": {
            "output": "<AnotherOutputFile.html>",
            "viewFunction": "someViewFunc"
        /* ... */

To generate multiple output files from a single elm file, supply an array of outputFile/viewFunction pairs:

	"files": {
		"<ElmFile.elm>": [{
			"output": "<OutputFile.html>",
			"viewFunction": "view"
		}, {
			"output": "<AnotherOutputFile.html>",
			"viewFunction": "anotherView"


An .elm-static-html folder is created in order to generate the correct HTML and JS needed. You can delete it if you want, but it'll make builds a little slower.

You can’t perform that action at this time.