V is a statically typed, compiled programming language designed for building maintainable software.
In LiveCodes, V runs in the browser using WebAssembly: the V compiler is compiled to WebAssembly and
the C it emits is compiled and linked by the same Clang toolchain the C/C++ languages use. No server is
involved.
Usage
Demo:
show code
- JS
- TS
- React
- Vue
- Svelte
- Solid
- Preact
- Web Components
import { createPlayground } from 'livecodes';
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "v-wasm",
"content": "fn main() {\n\tprintln('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": "v-wasm",
"content": "fn main() {\n\tprintln('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": "v-wasm",
"content": "fn main() {\n\tprintln('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": "v-wasm",
"content": "fn main() {\n\tprintln('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": "v-wasm",
"content": "fn main() {\n\tprintln('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": "v-wasm",
"content": "fn main() {\n\tprintln('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": "v-wasm",
"content": "fn main() {\n\tprintln('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": "v-wasm",
"content": "fn main() {\n\tprintln('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.v object:
livecodes.v.input: the standard input passed to the program.
livecodes.v.loaded: a promise that resolves when the compiler has downloaded and the program has
run. It rejects if the environment fails to load. Other helpers should be used after it resolves.
livecodes.v.output: the program's standard output.
livecodes.v.error: the compiler diagnostics, if the code failed to compile.
livecodes.v.exitCode: the exit code of the program.
livecodes.v.run: compiles and runs the code again with new input, returning a promise that
resolves with output, error and exitCode.
Example:
show code
- JS
- TS
- React
- Vue
- Svelte
- Solid
- Preact
- Web Components
import { createPlayground } from 'livecodes';
const options = {
"template": "v-wasm",
"params": {
"activeEditor": "markup"
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"template": "v-wasm",
"params": {
"activeEditor": "markup"
}
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"template": "v-wasm",
"params": {
"activeEditor": "markup"
}
};
return (<LiveCodes {...options} />);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"template": "v-wasm",
"params": {
"activeEditor": "markup"
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import LiveCodes from 'livecodes/svelte';
const options = {
"template": "v-wasm",
"params": {
"activeEditor": "markup"
}
};
</script>
<LiveCodes {...options} />
import LiveCodes from 'livecodes/solid';
export default function App() {
const options = {
"template": "v-wasm",
"params": {
"activeEditor": "markup"
}
};
return (<LiveCodes {...options} />);
}
import LiveCodes from 'livecodes/preact';
export default function App() {
const options = {
"template": "v-wasm",
"params": {
"activeEditor": "markup"
}
};
return (<LiveCodes {...options} />);
}
<live-codes
template="v-wasm"></live-codes>
<script type="module">
import "livecodes/web-components";
const playground = document.querySelector("live-codes");
playground.params = {
"activeEditor": "markup"
};
</script>
fn main() {
println('Hello, World!')
}
The program can read from the stdin pane, in the same way as the other console languages:
import os
fn main() {
name := os.input('What is your name? ')
println('Hello, ' + name + '!')
}
Language Info
Name
v-wasm
Aliases / Extensions
v, vlang, v-wasm, wasm.v, vsh
Editor
script
Compiler
The V compiler compiled to WebAssembly, with its generated C compiled and linked by
Clang compiled to WebAssembly.
Version
V 0.5.2, built with Emscripten, and the @live-codes/clang-wasm toolchain.
Not currently supported.
Live Reload
By default, new code changes are sent to the result page for re-evaluation without a full page reload, avoiding the need to reinitialize the V WebAssembly environment. This behavior can be disabled by adding the code comment // __livecodes_reload__ to the V code, which forces a full page reload.
This comment can be added in the hiddenContent property of the editor for embedded playgrounds.
Starter Template
https://livecodes.io/?template=v-wasm
Links