Nim

Nim is a statically typed, compiled systems programming language.

In LiveCodes, Nim runs in the browser using the Nim compiler compiled to WebAssembly, through Nim's JavaScript backend. The compiled program runs in the result page, so it can drive the DOM directly (e.g. through the dom and jsffi modules).

For Nim's WebAssembly backend, which supports standard input, command-line arguments and real exit codes, see Nim (Wasm).

Usage

Demo:

show code

JS

import { createPlayground } from 'livecodes';

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

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

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

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Communication with the result page

Nim's JavaScript backend emits one self-sufficient program that runs in the result page. It has a document and a console, so echo writes to the console, and the browser modules that ship with the compiler (dom, jsffi, jsconsole, jscore, jsre and asyncjs) are on its search path:

import dom

document.title = "Nim in LiveCodes"
let element = document.createElement("p")
element.innerText = "Hello from Nim!"
document.body.appendChild(element)

Example:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "nim",
  "params": {
    "compiled": "open"
  }
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "template": "nim",
  "params": {
    "compiled": "open"
  }
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

const options = {
  "template": "nim",
  "params": {
    "compiled": "open"
  }
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Web Components

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

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

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

Language Info

Name

nim

Aliases / Extensions

nim, nims, nimble, nim-js, js.nim

Editor

script

Compiler

The Nim compiler (Nim's js backend) compiled to WebAssembly, packaged as @live-codes/nim-wasm. It is compiled with execute: false, and the emitted program runs in the result page.

Version

Nim v2.2.4.

Example Usage

import std/strutils

echo "Hello, World!"
echo "2 + 2 = ", 2 + 2

Starter Template

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

Links

• Nim official website
• Nim manual
• Nim standard library
• @live-codes/nim-wasm
• Nim (Wasm) in LiveCodes