Elm

Elm is a delightful language for reliable web applications. It is a purely functional language that compiles to JavaScript.

LiveCodes compiles Elm in the browser using @live-codes/elm-wasm, a WebAssembly build of the Elm compiler.

Basic Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "elm",
      "content": "module Main exposing (main)\n\nimport Browser\nimport Html exposing (Html, button, div, h1, text)\nimport Html.Events exposing (onClick)\n\n\ntype alias Model =\n    Int\n\n\ntype Msg\n    = Increment\n\n\nupdate : Msg -> Model -> Model\nupdate msg model =\n    case msg of\n        Increment ->\n            model + 1\n\n\nview : Model -> Html Msg\nview model =\n    div []\n        [ h1 [] [ text (\"You clicked \" ++ String.fromInt model ++ \" times.\") ]\n        , button [ onClick Increment ] [ text \"Click me\" ]\n        ]\n\n\nmain : Program () Model Msg\nmain =\n    Browser.sandbox { init = 0, update = update, view = view }\n"
    },
    "mode": "simple",
    "editor": "auto"
  }
};
createPlayground('#container', options);

TS

import { createPlayground, type EmbedOptions } from 'livecodes';

const options: EmbedOptions = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "elm",
      "content": "module Main exposing (main)\n\nimport Browser\nimport Html exposing (Html, button, div, h1, text)\nimport Html.Events exposing (onClick)\n\n\ntype alias Model =\n    Int\n\n\ntype Msg\n    = Increment\n\n\nupdate : Msg -> Model -> Model\nupdate msg model =\n    case msg of\n        Increment ->\n            model + 1\n\n\nview : Model -> Html Msg\nview model =\n    div []\n        [ h1 [] [ text (\"You clicked \" ++ String.fromInt model ++ \" times.\") ]\n        , button [ onClick Increment ] [ text \"Click me\" ]\n        ]\n\n\nmain : Program () Model Msg\nmain =\n    Browser.sandbox { init = 0, update = update, view = view }\n"
    },
    "mode": "simple",
    "editor": "auto"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "elm",
      "content": "module Main exposing (main)\n\nimport Browser\nimport Html exposing (Html, button, div, h1, text)\nimport Html.Events exposing (onClick)\n\n\ntype alias Model =\n    Int\n\n\ntype Msg\n    = Increment\n\n\nupdate : Msg -> Model -> Model\nupdate msg model =\n    case msg of\n        Increment ->\n            model + 1\n\n\nview : Model -> Html Msg\nview model =\n    div []\n        [ h1 [] [ text (\"You clicked \" ++ String.fromInt model ++ \" times.\") ]\n        , button [ onClick Increment ] [ text \"Click me\" ]\n        ]\n\n\nmain : Program () Model Msg\nmain =\n    Browser.sandbox { init = 0, update = update, view = view }\n"
    },
    "mode": "simple",
    "editor": "auto"
  }
};
  return (<LiveCodes {...options} />);
}

Vue

<script setup>
import LiveCodes from "livecodes/vue";

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "elm",
      "content": "module Main exposing (main)\n\nimport Browser\nimport Html exposing (Html, button, div, h1, text)\nimport Html.Events exposing (onClick)\n\n\ntype alias Model =\n    Int\n\n\ntype Msg\n    = Increment\n\n\nupdate : Msg -> Model -> Model\nupdate msg model =\n    case msg of\n        Increment ->\n            model + 1\n\n\nview : Model -> Html Msg\nview model =\n    div []\n        [ h1 [] [ text (\"You clicked \" ++ String.fromInt model ++ \" times.\") ]\n        , button [ onClick Increment ] [ text \"Click me\" ]\n        ]\n\n\nmain : Program () Model Msg\nmain =\n    Browser.sandbox { init = 0, update = update, view = view }\n"
    },
    "mode": "simple",
    "editor": "auto"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

<script>
import LiveCodes from 'livecodes/svelte';

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "elm",
      "content": "module Main exposing (main)\n\nimport Browser\nimport Html exposing (Html, button, div, h1, text)\nimport Html.Events exposing (onClick)\n\n\ntype alias Model =\n    Int\n\n\ntype Msg\n    = Increment\n\n\nupdate : Msg -> Model -> Model\nupdate msg model =\n    case msg of\n        Increment ->\n            model + 1\n\n\nview : Model -> Html Msg\nview model =\n    div []\n        [ h1 [] [ text (\"You clicked \" ++ String.fromInt model ++ \" times.\") ]\n        , button [ onClick Increment ] [ text \"Click me\" ]\n        ]\n\n\nmain : Program () Model Msg\nmain =\n    Browser.sandbox { init = 0, update = update, view = view }\n"
    },
    "mode": "simple",
    "editor": "auto"
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "elm",
      "content": "module Main exposing (main)\n\nimport Browser\nimport Html exposing (Html, button, div, h1, text)\nimport Html.Events exposing (onClick)\n\n\ntype alias Model =\n    Int\n\n\ntype Msg\n    = Increment\n\n\nupdate : Msg -> Model -> Model\nupdate msg model =\n    case msg of\n        Increment ->\n            model + 1\n\n\nview : Model -> Html Msg\nview model =\n    div []\n        [ h1 [] [ text (\"You clicked \" ++ String.fromInt model ++ \" times.\") ]\n        , button [ onClick Increment ] [ text \"Click me\" ]\n        ]\n\n\nmain : Program () Model Msg\nmain =\n    Browser.sandbox { init = 0, update = update, view = view }\n"
    },
    "mode": "simple",
    "editor": "auto"
  }
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "elm",
      "content": "module Main exposing (main)\n\nimport Browser\nimport Html exposing (Html, button, div, h1, text)\nimport Html.Events exposing (onClick)\n\n\ntype alias Model =\n    Int\n\n\ntype Msg\n    = Increment\n\n\nupdate : Msg -> Model -> Model\nupdate msg model =\n    case msg of\n        Increment ->\n            model + 1\n\n\nview : Model -> Html Msg\nview model =\n    div []\n        [ h1 [] [ text (\"You clicked \" ++ String.fromInt model ++ \" times.\") ]\n        , button [ onClick Increment ] [ text \"Click me\" ]\n        ]\n\n\nmain : Program () Model Msg\nmain =\n    Browser.sandbox { init = 0, update = update, view = view }\n"
    },
    "mode": "simple",
    "editor": "auto"
  }
};
  return (<LiveCodes {...options} />);
}

Web Components

<live-codes></live-codes>

<script type="module">
  import "livecodes/web-components";

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "script",
    "script": {
      "language": "elm",
      "content": "module Main exposing (main)\n\nimport Browser\nimport Html exposing (Html, button, div, h1, text)\nimport Html.Events exposing (onClick)\n\n\ntype alias Model =\n    Int\n\n\ntype Msg\n    = Increment\n\n\nupdate : Msg -> Model -> Model\nupdate msg model =\n    case msg of\n        Increment ->\n            model + 1\n\n\nview : Model -> Html Msg\nview model =\n    div []\n        [ h1 [] [ text (\"You clicked \" ++ String.fromInt model ++ \" times.\") ]\n        , button [ onClick Increment ] [ text \"Click me\" ]\n        ]\n\n\nmain : Program () Model Msg\nmain =\n    Browser.sandbox { init = 0, update = update, view = view }\n"
    },
    "mode": "simple",
    "editor": "auto"
  };
</script>

See below for more examples.

Usage

Write Elm code in the script editor. The module must expose main (e.g. module Main exposing (main)), as required by the Elm compiler.

The code is compiled to JavaScript, then the compiled program is initialized in the result page by a Elm.<ModuleName>.init({ node }) call into a div appended to the page body. If you wish to use a specific DOM element use "livecodes-app" as the element id. This works for the common program types (Browser.sandbox, Browser.element, Browser.document and Browser.application).

Imports of modules from Elm packages are detected automatically. Packages the compiler ships with (a set of elm/* packages, provided as precompiled artifacts) are enabled without downloading anything; any other package is downloaded from jsDelivr and installed into the compiler's virtual file system.

The generated JavaScript can be inspected in the Compiled code tool pane.

Language Info

Name

elm

Aliases / Extensions

elm

Editor

script

Compiler

@live-codes/elm-wasm, a WebAssembly build of the Elm compiler.

Version

Elm 0.19.1 (@live-codes/elm-wasm 0.2.1)

Code Formatting

Not supported.

Limitations

• The first run downloads the compiler (~10.6 MB ulm.wasm) in addition to the Elm package data.
• Elm source is compiled as a single module. Other modules are provided by installed packages, which are resolved at compile time (jsDelivr by default).

Starter Template

https://livecodes.io/?template=elm

Links

• Elm
• Elm guide