A playground for Gleam

[hatemhosny]

Great project. Thank you!

Please allow me to introduce LiveCodes, a feature-rich, open-source, client-side, code playground that supports 80+ languages and frameworks. The announcement post gives a general overview.

Gleam is now supported in LiveCodes!
LiveCodes uses the Gleam wasm compiler to run Gleam in the browser.
It supports using the standard library, official gleam packages, custom modules and even importing modules from npm, deno land and jsr.io. See docs for details and demos: https://livecodes.io/docs/languages/gleam/

A Gleam starter template is available for a quick start:
https://livecodes.io/?template=gleam
(see all starter templates).

You can start an empty Gleam project using this link: https://livecodes.io/?gleam

Projects can be shared, exported (e.g. GitHub gist) and deployed (to GitHub Pages).

Playgrounds can be embedded in any webpage, using a powerful, yet easy-to-use, SDK.

This is an example for an embedded Gleam playground:

<div id="container"></div>

<script type="module">
  import { createPlayground } from 'https://unpkg.com/livecodes';

  createPlayground('#container', {
    params: {
      gleam: 'import gleam/io\n\npub fn main() {\n  io.println("hello, friend!")\n}',
      console: 'open',
    },
  });
</script>

Preview

Please refer to the SDK documentations for details.

Comprehensive documentations are available with live demos, code samples and screenshots.

LiveCodes is free with unlimited usage, no ads and no account required. It can be easily self-hosted (if you want), and can be used for commercial projects (MIT license).

There is even a free AI code assistant.

What can be improved?

• Syntax highlighting:
  LiveCodes supports 3 code editors: Monaco (default on desktop), CodeMirror6 (default on mobile) and CodeJar (a lightweight code editor with highlighting by Prism). I have not found syntax highlighting for Gleam for any of these editors. I currently use highlighting for Swift (also tried Rust, but I think Swift is better). I would really appreciate providing support for these.

• Code formatting:
  LiveCodes allows code formatting. e.g. I use prettier for html, css, js, ts, jsx, etc, golang formatter, etc.
  It would be great if the wasm compiler allows code formatting (related: Formatting using wasm compiler #3029)

Please let me know if you have any comments, questions or suggestions.

Disclosure: obviously, I'm the author of LiveCodes.

I thought you would be interested. Otherwise, please feel free to close this.

[hayleigh-dot-dev]

Oh wow this is incredible! If there was a way to add lustre I'd be able to have interactive examples throughout the documentation 👀 I see the template has plinth included, what is the criteria for a package being included?

[hayleigh-dot-dev]

On that note it would be great if you could surface the compiler errors somewhere. It took me a while to think to check my own browser's console for errors 😅

[hatemhosny]

Thank you.
Yes, lustre can run in LiveCodes.
demo: https://livecodes.io/?x=id/f8fytygphwr

please check the docs for supporting custom modules: https://livecodes.io/docs/languages/gleam/#custom-modules

In summary, these are the steps I took to allow lustre to run:

• In a project I use for precompiled gleam modules, I run gleam add lustre and gleam build.
• Commit changes (make sure that build directory is not in .gitignore). Add a tag v0.3.0 for reference in URL. Pushed to GitHub.
• Now these files are available on CDNs (e.g. https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/element.mjs)
• In LiveCodes project custom settings (App menu -> Custom Settings), I added the URLs to modules (gleam source & compiled js).

{
  "imports": {},
  "gleam": {
    "modules": {
      "gleam/erlang": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/gleam_erlang/src/gleam/erlang.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/gleam_erlang/gleam/erlang.mjs"
      },
      "gleam/erlang/process": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/gleam_erlang/src/gleam/erlang/process.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/gleam_erlang/gleam/erlang/process.mjs"
      },
      "gleam/erlang/atom": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/gleam_erlang/src/gleam/erlang/atom.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/gleam_erlang/gleam/erlang/atom.mjs"
      },
      "gleam/erlang/charlist": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/gleam_erlang/src/gleam/erlang/charlist.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/gleam_erlang/gleam/erlang/charlist.mjs"
      },
      "gleam/otp/actor": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/gleam_otp/src/gleam/otp/actor.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/gleam_otp/gleam/otp/actor.mjs"
      },
      "gleam/otp/system": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/gleam_otp/src/gleam/otp/system.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/gleam_otp/gleam/otp/system.mjs"
      },
      "lustre": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre.mjs"
      },
      "lustre/attribute": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/attribute.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/attribute.mjs"
      },
      "lustre/element": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/element.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/element.mjs"
      },
      "lustre/effect": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/effect.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/effect.mjs"
      },
      "lustre/event": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/event.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/event.mjs"
      },
      "lustre/server_component": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/server_component.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/server_component.mjs"
      },
      "lustre/element/html": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/element/html.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/element/html.mjs"
      },
      "lustre/element/svg": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/element/svg.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/element/svg.mjs"
      },
      "lustre/internals/constants": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/internals/constants.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/internals/constants.mjs"
      },
      "lustre/internals/runtime": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/internals/runtime.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/internals/runtime.mjs"
      },
      "lustre/internals/patch": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/internals/patch.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/internals/patch.mjs"
      },
      "lustre/internals/vdom": {
        "srcUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/packages/lustre/src/lustre/internals/vdom.gleam",
        "compiledUrl": "https://cdn.jsdelivr.net/gh/live-codes/gleam-precompiled@v0.3.0/build/dev/javascript/lustre/lustre/internals/vdom.mjs"
      }
    }
  }
}

Then this Gleam code should work

import gleam/int
import lustre
import lustre/element.{text}
import lustre/element/html.{div, button, p}
import lustre/event.{on_click}

pub fn main() {
  let app = lustre.simple(init, update, view)
  let assert Ok(_) = lustre.start(app, "#app", Nil)

  Nil
}

fn init(_flags) {
  0
}

type Msg {
  Incr
  Decr
}

fn update(model, msg) {
  case msg {
    Incr -> model + 1
    Decr -> model - 1
  }
}

fn view(model) {
  let count = int.to_string(model)

  div([], [
    button([on_click(Incr)], [text(" + ")]),
    p([], [text(count)]),
    button([on_click(Decr)], [text(" - ")])
  ])
}

Notes:

• stdlib modules (e.g. gleam/int) should be available by default, with no need to configure them in custom settings.
• In this demo, I needed to add links to some stdlib modules (e.g. gleam/erlang, gleam/erlang/process). I did not think that these would be used when build target is JavaScript. I will add these in LiveCodes so that they work by default. This should be available in next release.
• This code in custom settings should allow most examples using lustre to run (hopefully!).

On that note it would be great if you could surface the compiler errors somewhere. It took me a while to think to check my own browser's console for errors 😅

You are right! The integrated console shows the console output of the result page. The compiler output does not appear in the app UI, and is only shown in browser console. I probably need to show that somewhere. This is specifically important when the compiler messages are very useful like in Gleam. Meanwhile, also a note about that in docs might be helpful. Thank you for the suggestion.

Thank you for your interest and please let me know if you have any questions or comments.
Meanwhile, you may want to have a look on docs: https://livecodes.io/docs/

[hayleigh-dot-dev]

🤯 Incredible. I'm going to spend this weekend embedding some of these into the docs. Folks are going to find this super valuable.

[hatemhosny]

I'm glad you like it.
Check docs for:
Embedded playgrounds: https://livecodes.io/docs/features/embeds/
SDK: https://livecodes.io/docs/sdk/
Configuration object: https://livecodes.io/docs/configuration/configuration-object/

I have created a playground for your lustre playground :)
https://livecodes.io/?x=id/6irjv5mjhb7
You may use that as a starting point for embedded playgrounds.

Please let me know if you need any help.
Also let us know when you have added that to your docs.
Best wishes.

[hatemhosny]

You may also want to use the simple mode for embedded playgrounds

demo: https://livecodes.io/?x=id/zcfx6dxtiaa

by adding these properties to the config object

createPlayground("#container", {
  config: {
    mode: "simple",
    tools: { status: "none"}, // can be "closed" (default), "open", "full" or "none"
    layout: "vertical",
    // ... rest of config
  }
});