C# (Wasm)
C# is a high-level, general-purpose, object-oriented programming language developed by Microsoft.
In LiveCodes, C# runs in the browser using Blazor WebAssembly with a WebAssembly-based .NET runtime.
Usage
Demo:
show code
- JS
- TS
- React
- Vue
- Svelte
- Solid
- Ripple
import { createPlayground } from 'livecodes';
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "csharp-wasm",
"content": "using System;\n\npublic class Program\n{\n public static void Main()\n {\n int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };\n int itemToSearch = 7;\n\n int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);\n\n if (result == -1)\n {\n Console.WriteLine(\"Result: Item not found in the array.\");\n }\n else\n {\n Console.WriteLine($\"Result: Item found at index -> {result}\");\n }\n }\n\n public static int BinarySearch(int[] arr, int left, int right, int item)\n {\n if (right >= left)\n {\n int mid = left + (right - left) / 2;\n if (arr[mid] == item)\n {\n return mid;\n }\n\n if (arr[mid] > item)\n {\n return BinarySearch(arr, left, mid - 1, item);\n }\n\n return BinarySearch(arr, mid + 1, right, item);\n }\n return -1;\n }\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": "csharp-wasm",
"content": "using System;\n\npublic class Program\n{\n public static void Main()\n {\n int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };\n int itemToSearch = 7;\n\n int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);\n\n if (result == -1)\n {\n Console.WriteLine(\"Result: Item not found in the array.\");\n }\n else\n {\n Console.WriteLine($\"Result: Item found at index -> {result}\");\n }\n }\n\n public static int BinarySearch(int[] arr, int left, int right, int item)\n {\n if (right >= left)\n {\n int mid = left + (right - left) / 2;\n if (arr[mid] == item)\n {\n return mid;\n }\n\n if (arr[mid] > item)\n {\n return BinarySearch(arr, left, mid - 1, item);\n }\n\n return BinarySearch(arr, mid + 1, right, item);\n }\n return -1;\n }\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": "csharp-wasm",
"content": "using System;\n\npublic class Program\n{\n public static void Main()\n {\n int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };\n int itemToSearch = 7;\n\n int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);\n\n if (result == -1)\n {\n Console.WriteLine(\"Result: Item not found in the array.\");\n }\n else\n {\n Console.WriteLine($\"Result: Item found at index -> {result}\");\n }\n }\n\n public static int BinarySearch(int[] arr, int left, int right, int item)\n {\n if (right >= left)\n {\n int mid = left + (right - left) / 2;\n if (arr[mid] == item)\n {\n return mid;\n }\n\n if (arr[mid] > item)\n {\n return BinarySearch(arr, left, mid - 1, item);\n }\n\n return BinarySearch(arr, mid + 1, right, item);\n }\n return -1;\n }\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
}
};
return (<LiveCodes {...options}></LiveCodes>);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "csharp-wasm",
"content": "using System;\n\npublic class Program\n{\n public static void Main()\n {\n int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };\n int itemToSearch = 7;\n\n int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);\n\n if (result == -1)\n {\n Console.WriteLine(\"Result: Item not found in the array.\");\n }\n else\n {\n Console.WriteLine($\"Result: Item found at index -> {result}\");\n }\n }\n\n public static int BinarySearch(int[] arr, int left, int right, int item)\n {\n if (right >= left)\n {\n int mid = left + (right - left) / 2;\n if (arr[mid] == item)\n {\n return mid;\n }\n\n if (arr[mid] > item)\n {\n return BinarySearch(arr, left, mid - 1, item);\n }\n\n return BinarySearch(arr, mid + 1, right, item);\n }\n return -1;\n }\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
"config": {
"activeEditor": "script",
"script": {
"language": "csharp-wasm",
"content": "using System;\n\npublic class Program\n{\n public static void Main()\n {\n int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };\n int itemToSearch = 7;\n\n int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);\n\n if (result == -1)\n {\n Console.WriteLine(\"Result: Item not found in the array.\");\n }\n else\n {\n Console.WriteLine($\"Result: Item found at index -> {result}\");\n }\n }\n\n public static int BinarySearch(int[] arr, int left, int right, int item)\n {\n if (right >= left)\n {\n int mid = left + (right - left) / 2;\n if (arr[mid] == item)\n {\n return mid;\n }\n\n if (arr[mid] > item)\n {\n return BinarySearch(arr, left, mid - 1, item);\n }\n\n return BinarySearch(arr, mid + 1, right, item);\n }\n return -1;\n }\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
}
});
let container = $state(null);
onMount(() => {
createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
import { createPlayground, type EmbedOptions } from 'livecodes';
export default function App() {
const options: EmbedOptions = {
"config": {
"activeEditor": "script",
"script": {
"language": "csharp-wasm",
"content": "using System;\n\npublic class Program\n{\n public static void Main()\n {\n int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };\n int itemToSearch = 7;\n\n int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);\n\n if (result == -1)\n {\n Console.WriteLine(\"Result: Item not found in the array.\");\n }\n else\n {\n Console.WriteLine($\"Result: Item found at index -> {result}\");\n }\n }\n\n public static int BinarySearch(int[] arr, int left, int right, int item)\n {\n if (right >= left)\n {\n int mid = left + (right - left) / 2;\n if (arr[mid] == item)\n {\n return mid;\n }\n\n if (arr[mid] > item)\n {\n return BinarySearch(arr, left, mid - 1, item);\n }\n\n return BinarySearch(arr, mid + 1, right, item);\n }\n return -1;\n }\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
}
};
const onMounted = (container: HTMLElement) => {
createPlayground(container, options);
};
return <div ref={onMounted}></div>;
}
import { createPlayground, type EmbedOptions } from 'livecodes';
export default component App() {
const options: EmbedOptions = {
"config": {
"activeEditor": "script",
"script": {
"language": "csharp-wasm",
"content": "using System;\n\npublic class Program\n{\n public static void Main()\n {\n int[] sortedArray = { 1, 3, 5, 7, 9, 11, 13, 15 };\n int itemToSearch = 7;\n\n int result = BinarySearch(sortedArray, 0, sortedArray.Length - 1, itemToSearch);\n\n if (result == -1)\n {\n Console.WriteLine(\"Result: Item not found in the array.\");\n }\n else\n {\n Console.WriteLine($\"Result: Item found at index -> {result}\");\n }\n }\n\n public static int BinarySearch(int[] arr, int left, int right, int item)\n {\n if (right >= left)\n {\n int mid = left + (right - left) / 2;\n if (arr[mid] == item)\n {\n return mid;\n }\n\n if (arr[mid] > item)\n {\n return BinarySearch(arr, left, mid - 1, item);\n }\n\n return BinarySearch(arr, mid + 1, right, item);\n }\n return -1;\n }\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
}
};
const onMount = (container: HTMLElement) => {
createPlayground(container, options);
};
<div {ref onMount}></div>
}
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.csharp object:
livecodes.csharp.input: The initial standard input passed to the C# code.livecodes.csharp.loaded: A promise that resolves when the C# environment (Blazor WebAssembly) is fully loaded. Other helpers should be used after this promise resolves.livecodes.csharp.output: The standard output from the C# code execution.livecodes.csharp.run: A function that runs the C# code with new input. This function takes a string as input and returns a promise that resolves with an object containing theoutput,error, andexitCodeproperties.
Example:
show code
- JS
- TS
- React
- Vue
- Svelte
- Solid
- Ripple
import { createPlayground } from 'livecodes';
const options = {
"template": "csharp-wasm",
"params": {
"activeEditor": "markup"
}
};
createPlayground('#container', options);
import { createPlayground, type EmbedOptions } from 'livecodes';
const options: EmbedOptions = {
"template": "csharp-wasm",
"params": {
"activeEditor": "markup"
}
};
createPlayground('#container', options);
import LiveCodes from 'livecodes/react';
export default function App() {
const options = {
"template": "csharp-wasm",
"params": {
"activeEditor": "markup"
}
};
return (<LiveCodes {...options}></LiveCodes>);
}
<script setup>
import LiveCodes from "livecodes/vue";
const options = {
"template": "csharp-wasm",
"params": {
"activeEditor": "markup"
}
};
</script>
<template>
<LiveCodes v-bind="options" />
</template>
<script>
import { onMount } from 'svelte';
import { createPlayground } from 'livecodes';
let options = $state({
"template": "csharp-wasm",
"params": {
"activeEditor": "markup"
}
});
let container = $state(null);
onMount(() => {
createPlayground(container, options);
});
</script>
<div bind:this="{container}"></div>
import { createPlayground, type EmbedOptions } from 'livecodes';
export default function App() {
const options: EmbedOptions = {
"template": "csharp-wasm",
"params": {
"activeEditor": "markup"
}
};
const onMounted = (container: HTMLElement) => {
createPlayground(container, options);
};
return <div ref={onMounted}></div>;
}
import { createPlayground, type EmbedOptions } from 'livecodes';
export default component App() {
const options: EmbedOptions = {
"template": "csharp-wasm",
"params": {
"activeEditor": "markup"
}
};
const onMount = (container: HTMLElement) => {
createPlayground(container, options);
};
<div {ref onMount}></div>
}
Language Info
Name
csharp-wasm
Aliases / Extensions
cs, csharp, wasm.cs, cs-wasm
Editor
script
Compiler
Blazor WebAssembly with .NET WebAssembly runtime.
Version
.NET 9.0
Code Formatting
using Prettier
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 Blazor environment. 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
using System;
public class Program
{
public static void Main()
{
Console.WriteLine("Hello, LiveCodes C#!");
}
}
Starter Template
https://livecodes.io/?template=csharp-wasm