Nim (Wasm)

Nim is a statically typed, compiled systems programming language.

In LiveCodes, Nim runs in the browser using the Nim compiler compiled to WebAssembly. This target (Nim's c backend) compiles the program to C and then to WebAssembly using the Clang toolchain, the same one used for C (Wasm), entirely client-side.

For Nim's JavaScript backend, which compiles to JavaScript and allows DOM access for the result page, see Nim.

Usage

Demo:

show code

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "nim-wasm",
      "content": "echo \"Hello, World!\""
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
createPlayground('#container', options);

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

const options: EmbedOptions = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "nim-wasm",
      "content": "echo \"Hello, World!\""
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "nim-wasm",
      "content": "echo \"Hello, World!\""
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

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

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "nim-wasm",
      "content": "echo \"Hello, World!\""
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

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

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "nim-wasm",
      "content": "echo \"Hello, World!\""
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
</script>

<LiveCodes {...options} />

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "nim-wasm",
      "content": "echo \"Hello, World!\""
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "nim-wasm",
      "content": "echo \"Hello, World!\""
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  }
};
  return (<LiveCodes {...options} />);
}

<live-codes></live-codes>

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

  const playground = document.querySelector("live-codes");
  playground.config = {
    "activeEditor": "script",
    "script": {
      "language": "nim-wasm",
      "content": "echo \"Hello, World!\""
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  };
</script>

Communication with JavaScript

The Nim code is compiled and run in a web worker. The following helpers are available in the browser global livecodes.nimWasm object:

livecodes.nimWasm.input: The standard input passed to the program.
livecodes.nimWasm.loaded: A promise that resolves when the compiler is loaded and the program has run once.
livecodes.nimWasm.output: The program's output.
livecodes.nimWasm.error: The compiler diagnostics, if the code failed to compile.
livecodes.nimWasm.exitCode: The program's exit code.
livecodes.nimWasm.run: A function that compiles and runs the code with new input. It takes a string as input and returns a promise that resolves with an object containing output, error and exitCode.

Example:

show code

import { createPlayground } from 'livecodes';

const options = {
  "template": "nim-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
createPlayground('#container', options);

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

const options: EmbedOptions = {
  "template": "nim-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
createPlayground('#container', options);

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "nim-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
  return (<LiveCodes {...options} />);
}

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

const options = {
  "template": "nim-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

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

const options = {
  "template": "nim-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
</script>

<LiveCodes {...options} />

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "nim-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
  return (<LiveCodes {...options} />);
}

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "nim-wasm",
  "params": {
    "activeEditor": "markup"
  }
};
  return (<LiveCodes {...options} />);
}

<live-codes
  template="nim-wasm"></live-codes>

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

  const playground = document.querySelector("live-codes");
  playground.params = {
    "activeEditor": "markup"
  };
</script>

Language Info

Name

nim-wasm

Aliases / Extensions

nimwasm, wasm.nim

Editor

script

Compiler

The Nim compiler (Nim's c backend) compiled to WebAssembly. The generated C is compiled and linked by the Clang toolchain of @live-codes/clang-wasm.

Version

Nim v2.2.4, Clang v22.1.8.

Custom Settings

The compiler can be configured using custom settings added to the property nim-wasm:

Property	Type	Description
`compileArgs`	`string[]`	Extra Nim flags, e.g. `["--define:release2"]`.
`args`	`string[]`	Command-line arguments passed to the program.

Custom Settings
{
  "nim-wasm": {
    "compileArgs": ["--define:release2"],
    "args": ["--name", "LiveCodes"]
  }
}

Live Reload

By default, new code changes are sent to the result page without a full page reload, avoiding the need to re-download the compiler. Adding the code comment # __livecodes_reload__ forces a full page reload.

Example Usage

import std/strutils

echo "Hello, World!"

let name = stdin.readLine()
echo "Hello, ", name, "!"

This target supports standard input, command-line arguments and real exit codes. A program that reads standard input gets an end-of-input error when it is left blank.

Starter Template

https://livecodes.io/?template=nim-wasm

Usage​

Communication with JavaScript​

Language Info​

Name​

Aliases / Extensions​

Editor​

Compiler​

Version​

Custom Settings​

Live Reload​

Example Usage​

Starter Template​

Links​