C (Wasm)

C is a general-purpose, procedural programming language.

In LiveCodes, C runs in the browser using Clang compiled to WebAssembly. Unlike the JSCPP-based C++ interpreter, this is a real C compiler running entirely client-side.

Usage

Demo:

show code

JS

import { createPlayground } from 'livecodes';

const options = {
  "config": {
    "activeEditor": "script",
    "script": {
      "language": "c-wasm",
      "content": "#include <stdio.h>\n\nint main(void) {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}"
    },
    "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": "c-wasm",
      "content": "#include <stdio.h>\n\nint main(void) {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}"
    },
    "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": "c-wasm",
      "content": "#include <stdio.h>\n\nint main(void) {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}"
    },
    "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": "c-wasm",
      "content": "#include <stdio.h>\n\nint main(void) {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}"
    },
    "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": "c-wasm",
      "content": "#include <stdio.h>\n\nint main(void) {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}"
    },
    "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": "c-wasm",
      "content": "#include <stdio.h>\n\nint main(void) {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}"
    },
    "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": "c-wasm",
      "content": "#include <stdio.h>\n\nint main(void) {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}"
    },
    "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": "c-wasm",
      "content": "#include <stdio.h>\n\nint main(void) {\n    printf(\"Hello, World!\\n\");\n    return 0;\n}"
    },
    "mode": "simple",
    "editor": "auto",
    "tools": {
      "status": "full"
    }
  };
</script>

Communication with JavaScript

The C code runs in the context of the result page. A few helper properties and methods are available in the browser global livecodes.c object:

• livecodes.c.input: The initial standard input passed to the C code.
• livecodes.c.loaded: A promise that resolves when the C environment is fully loaded. Other helpers should be used after this promise resolves.
• livecodes.c.output: The standard output from the C code execution.
• livecodes.c.error: The compiler diagnostics, if the code failed to compile.
• livecodes.c.exitCode: The exit code of the program.
• livecodes.c.run: A function that compiles and runs the C code with new input. This function takes a string as input and returns a promise that resolves with an object containing the output, error and exitCode properties.

Example:

show code

JS

import { createPlayground } from 'livecodes';

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

TS

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

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

React

import LiveCodes from 'livecodes/react';

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

Vue

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

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

Svelte

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

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

<LiveCodes {...options} />

Solid

import LiveCodes from 'livecodes/solid';

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

Preact

import LiveCodes from 'livecodes/preact';

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

Web Components

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

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

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

The same API is available as livecodes.clangWasm for all Clang-based languages.

Language Info

Name

c-wasm

Aliases / Extensions

c, h, cwasm, c-wasm, wasm.c, clang.c, clang-c

Editor

script

Compiler

Clang compiled to WebAssembly via @live-codes/clang-wasm, with a complete libc.

Version

Clang v22.1.8. The standards gnu11, gnu17 and gnu23 are supported (default: gnu23).

Custom Settings

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

Property	Type	Description
std	string	The C standard to compile with: gnu11, gnu17 or gnu23. Defaults to gnu23.
compileArgs	string[]	Extra clang flags, e.g. ["-Wall", "-O2"].
args	string[]	Command-line arguments passed to the program (argv).

Custom Settings

{
  "c-wasm": {
    "std": "gnu17",
    "compileArgs": ["-Wall", "-O2"],
    "args": ["--name", "LiveCodes"]
  }
}

Code Formatting

Using @wasm-fmt/clang-format, applying Google's C++ style guide.

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. This behavior can be disabled by adding the code comment // __livecodes_reload__ to the C code, which forces a full page reload.

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

Example Usage

#include <stdio.h>

int main(void) {
    char name[] = "LiveCodes";
    printf("Hello, %s!\n", name);
    return 0;
}

Starter Template

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

Links

• Clang
• @live-codes/clang-wasm
• C language reference
• C++ (Wasm) in LiveCodes
• Objective-C (Wasm) in LiveCodes
• Objective-C++ (Wasm) in LiveCodes