C/C++ (Wasm)

The C++ (Wasm) language support in LiveCodes uses Clang compiled to WebAssembly via @chriskoch/cpp-wasm. Unlike the JSCPP-based C++ interpreter, this provides a real C/C++ compiler running on WebAssembly.

Usage

Demo

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "template": "cpp-wasm"
};
createPlayground('#container', options);

TS

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

const options: EmbedOptions = {
  "template": "cpp-wasm"
};
createPlayground('#container', options);

React

import LiveCodes from 'livecodes/react';

export default function App() {
  const options = {
  "template": "cpp-wasm"
};
  return (<LiveCodes {...options} />);
}

Vue

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

const options = {
  "template": "cpp-wasm"
};
</script>
<template>
  <LiveCodes v-bind="options" />
</template>

Svelte

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

const options = {
  "template": "cpp-wasm"
};
</script>

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

export default function App() {
  const options = {
  "template": "cpp-wasm"
};
  return (<LiveCodes {...options} />);
}

Preact

import LiveCodes from 'livecodes/preact';

export default function App() {
  const options = {
  "template": "cpp-wasm"
};
  return (<LiveCodes {...options} />);
}

Web Components

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

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

Standard I/O

C++ programs use cin for input and cout for output. Input is passed from JavaScript via livecodes.cpp.run(), and output is returned as a string.

JavaScript Interoperability

JavaScript can interact with the C++ runtime using the livecodes.cpp global:

• livecodes.cpp.input — set this to pass input to the program (read by cin)
• livecodes.cpp.run(input?) — execute the program with optional input, returns a promise that resolves to { input, output, exitCode, error }
• livecodes.cpp.loaded — a promise that resolves when the runtime is ready

Live Reload

The Clang WebAssembly compiler is a large download. Initial loading may take some time, after which subsequent runs should be faster.

By default, when code is updated, the environment is re-used. This behavior is used for performance reasons. However, in order to get full reload and start a new environment, insert this comment in the code:

// __livecodes_reload__

This comment can be added in the hiddenContent property of the editor for embedded playgrounds.

Language Info

Name

cpp-wasm

Aliases

clang, c++-wasm

Extensions

.wasm.cpp, .cppwasm, .cwasm, .clang.cpp, .clang, .cpp, .c, .C, .cp, .cxx, .c++, .cppm, .ixx, .ii, .hpp, .h

Editor

script

Compiler

Clang compiled to WebAssembly via @chriskoch/cpp-wasm

Code Formatting

Not supported.

Starter Template

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

Links

• Clang
• @chriskoch/cpp-wasm
• C++ (JSCPP) in LiveCodes