D is a general-purpose, statically typed, compiled programming language with C-like syntax, garbage collection, and a rich standard library.
D in LiveCodes is compiled to WebAssembly by DMD and run in the browser, with
no server. It uses the WebAssembly backend of dkorpel's dmd-explorer,
packaged as @live-codes/dlang-wasm.
Usage
Demo:
show code
- JS
- TS
- React
- Vue
- Svelte
- Solid
- Preact
- Web Components
import { createPlayground } from 'livecodes';
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "d-wasm",
"content": "import std.stdio;\n\nvoid main()\n{\n writeln(\"Hello, World!\");\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"config": {
"activeEditor": "script",
"script": {
"language": "d-wasm",
"content": "import std.stdio;\n\nvoid main()\n{\n writeln(\"Hello, World!\");\n}"
},
"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": "d-wasm",
"content": "import std.stdio;\n\nvoid main()\n{\n writeln(\"Hello, World!\");\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
}
};
return (<LiveCodes {...options} />);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "d-wasm",
"content": "import std.stdio;\n\nvoid main()\n{\n writeln(\"Hello, World!\");\n}"
},
"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": "d-wasm",
"content": "import std.stdio;\n\nvoid main()\n{\n writeln(\"Hello, World!\");\n}"
},
"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": "d-wasm",
"content": "import std.stdio;\n\nvoid main()\n{\n writeln(\"Hello, World!\");\n}"
},
"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": "d-wasm",
"content": "import std.stdio;\n\nvoid main()\n{\n writeln(\"Hello, World!\");\n}"
},
"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": "d-wasm",
"content": "import std.stdio;\n\nvoid main()\n{\n writeln(\"Hello, World!\");\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
};
</script>
Communication with JavaScript
The program runs in the context of the result page. A few helpers are available in the browser global
livecodes.d object:
livecodes.d.input: the standard input passed to the program.
livecodes.d.loaded: a promise that resolves when the compiler has downloaded and the program
has run. Other helpers should be used after it resolves.
livecodes.d.output: the program's output (standard output and standard error, in the order they
were written).
livecodes.d.error: the compiler diagnostics, if the code failed to compile.
livecodes.d.exitCode: the exit code of the program.
livecodes.d.run: compiles and runs the code again with new input, returning a promise that
resolves with output, error and exitCode.
The same object is also available as livecodes.dlang.
Example:
show code
- JS
- TS
- React
- Vue
- Svelte
- Solid
- Preact
- Web Components
import { createPlayground } from 'livecodes';
const options = {
"template": "d-wasm",
"params": {
"activeEditor": "markup"
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"template": "d-wasm",
"params": {
"activeEditor": "markup"
}
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"template": "d-wasm",
"params": {
"activeEditor": "markup"
}
};
return (<LiveCodes {...options} />);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"template": "d-wasm",
"params": {
"activeEditor": "markup"
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import LiveCodes from 'livecodes/svelte';
const options = {
"template": "d-wasm",
"params": {
"activeEditor": "markup"
}
};
</script>
<LiveCodes {...options} />
import LiveCodes from 'livecodes/solid';
export default function App() {
const options = {
"template": "d-wasm",
"params": {
"activeEditor": "markup"
}
};
return (<LiveCodes {...options} />);
}
import LiveCodes from 'livecodes/preact';
export default function App() {
const options = {
"template": "d-wasm",
"params": {
"activeEditor": "markup"
}
};
return (<LiveCodes {...options} />);
}
<live-codes
template="d-wasm"></live-codes>
<script type="module">
import "livecodes/web-components";
const playground = document.querySelector("live-codes");
playground.params = {
"activeEditor": "markup"
};
</script>
import std.stdio;
void main()
{
writeln("Hello, World!");
}
Templates, ranges and the algorithms in Phobos behave as expected:
import std.stdio;
import std.algorithm : map, sum;
import std.range : iota;
void main()
{
auto squares = iota(1, 6).map!(x => x * x);
writeln(squares); // [1, 4, 9, 16, 25]
writeln(squares.sum); // 55
}
readln reads from the stdin pane, in the same way as the other console languages.
Language Info
Name
d-wasm
Aliases / Extensions
d, di, dlang, dmd
Editor
script
Compiler
DMD (the D reference compiler) compiled to WebAssembly, with druntime and
Phobos, from dkorpel's dmd-explorer.
Version
DMD: v2.113
Not currently supported.
Live Reload
By default, new code changes are sent to the result page for re-evaluation without a full page reload. This behavior can be disabled by adding the code comment // __livecodes_reload__ to the D code, which forces a full page reload.
This comment can be added in the hiddenContent property of the editor for embedded playgrounds.
Example Usage
import std.stdio;
void main()
{
int sum = 0;
foreach (i; 1 .. 6)
{
sum += i;
}
writeln("Sum = ", sum); // Sum = 15
writeln("Mean = ", sum / 5); // Mean = 3
}
Starter Template
https://livecodes.io/?template=d-wasm
Links