Objective-C++ is the combination of Objective-C and C++ in a single translation unit, allowing C++ classes and Objective-C messaging to be used together.
In LiveCodes, Objective-C++ runs in the browser using Clang compiled to WebAssembly, with GNUstep's libobjc2 as the Objective-C runtime.
Usage
Demo:
show code
- JS
- TS
- React
- Vue
- Svelte
- Solid
- Preact
- Web Components
import { createPlayground } from 'livecodes';
const options = {
"config": {
"activeEditor": "script",
"script": {
"language": "objcpp-wasm",
"content": "#import <objc/runtime.h>\n\n#include <iostream>\n#include <string>\nusing namespace std;\n\n__attribute__((objc_root_class))\n@interface Greeter {\n Class isa;\n}\n- (void)greet:(string)name;\n@end\n\n@implementation Greeter\n- (void)greet:(string)name {\n cout << \"Hello, \" + name + \"!\" << endl;\n}\n@end\n\nint main() {\n Greeter *greeter = class_createInstance(objc_getClass(\"Greeter\"), 0);\n [greeter greet:string(\"World\")];\n return 0;\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": "objcpp-wasm",
"content": "#import <objc/runtime.h>\n\n#include <iostream>\n#include <string>\nusing namespace std;\n\n__attribute__((objc_root_class))\n@interface Greeter {\n Class isa;\n}\n- (void)greet:(string)name;\n@end\n\n@implementation Greeter\n- (void)greet:(string)name {\n cout << \"Hello, \" + name + \"!\" << endl;\n}\n@end\n\nint main() {\n Greeter *greeter = class_createInstance(objc_getClass(\"Greeter\"), 0);\n [greeter greet:string(\"World\")];\n return 0;\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": "objcpp-wasm",
"content": "#import <objc/runtime.h>\n\n#include <iostream>\n#include <string>\nusing namespace std;\n\n__attribute__((objc_root_class))\n@interface Greeter {\n Class isa;\n}\n- (void)greet:(string)name;\n@end\n\n@implementation Greeter\n- (void)greet:(string)name {\n cout << \"Hello, \" + name + \"!\" << endl;\n}\n@end\n\nint main() {\n Greeter *greeter = class_createInstance(objc_getClass(\"Greeter\"), 0);\n [greeter greet:string(\"World\")];\n return 0;\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": "objcpp-wasm",
"content": "#import <objc/runtime.h>\n\n#include <iostream>\n#include <string>\nusing namespace std;\n\n__attribute__((objc_root_class))\n@interface Greeter {\n Class isa;\n}\n- (void)greet:(string)name;\n@end\n\n@implementation Greeter\n- (void)greet:(string)name {\n cout << \"Hello, \" + name + \"!\" << endl;\n}\n@end\n\nint main() {\n Greeter *greeter = class_createInstance(objc_getClass(\"Greeter\"), 0);\n [greeter greet:string(\"World\")];\n return 0;\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": "objcpp-wasm",
"content": "#import <objc/runtime.h>\n\n#include <iostream>\n#include <string>\nusing namespace std;\n\n__attribute__((objc_root_class))\n@interface Greeter {\n Class isa;\n}\n- (void)greet:(string)name;\n@end\n\n@implementation Greeter\n- (void)greet:(string)name {\n cout << \"Hello, \" + name + \"!\" << endl;\n}\n@end\n\nint main() {\n Greeter *greeter = class_createInstance(objc_getClass(\"Greeter\"), 0);\n [greeter greet:string(\"World\")];\n return 0;\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": "objcpp-wasm",
"content": "#import <objc/runtime.h>\n\n#include <iostream>\n#include <string>\nusing namespace std;\n\n__attribute__((objc_root_class))\n@interface Greeter {\n Class isa;\n}\n- (void)greet:(string)name;\n@end\n\n@implementation Greeter\n- (void)greet:(string)name {\n cout << \"Hello, \" + name + \"!\" << endl;\n}\n@end\n\nint main() {\n Greeter *greeter = class_createInstance(objc_getClass(\"Greeter\"), 0);\n [greeter greet:string(\"World\")];\n return 0;\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": "objcpp-wasm",
"content": "#import <objc/runtime.h>\n\n#include <iostream>\n#include <string>\nusing namespace std;\n\n__attribute__((objc_root_class))\n@interface Greeter {\n Class isa;\n}\n- (void)greet:(string)name;\n@end\n\n@implementation Greeter\n- (void)greet:(string)name {\n cout << \"Hello, \" + name + \"!\" << endl;\n}\n@end\n\nint main() {\n Greeter *greeter = class_createInstance(objc_getClass(\"Greeter\"), 0);\n [greeter greet:string(\"World\")];\n return 0;\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": "objcpp-wasm",
"content": "#import <objc/runtime.h>\n\n#include <iostream>\n#include <string>\nusing namespace std;\n\n__attribute__((objc_root_class))\n@interface Greeter {\n Class isa;\n}\n- (void)greet:(string)name;\n@end\n\n@implementation Greeter\n- (void)greet:(string)name {\n cout << \"Hello, \" + name + \"!\" << endl;\n}\n@end\n\nint main() {\n Greeter *greeter = class_createInstance(objc_getClass(\"Greeter\"), 0);\n [greeter greet:string(\"World\")];\n return 0;\n}"
},
"mode": "simple",
"editor": "auto",
"tools": {
"status": "full"
}
};
</script>
Communication with JavaScript
The Objective-C++ code runs in the context of the result page. A few helper properties and methods are available in the browser global livecodes.objcpp object:
livecodes.objcpp.input: The initial standard input passed to the code.
livecodes.objcpp.loaded: A promise that resolves when the environment is fully loaded. Other helpers should be used after this promise resolves.
livecodes.objcpp.output: The standard output from the code execution.
livecodes.objcpp.error: The compiler diagnostics, if the code failed to compile.
livecodes.objcpp.exitCode: The exit code of the program.
livecodes.objcpp.run: A function that compiles and runs the 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.
The same API is available as livecodes.clangWasm for all Clang-based languages.
Language Info
Name
objcpp-wasm
Aliases / Extensions
mm, objcpp, objcpp-wasm, objc++, objective-c++, wasm.mm, clang.mm, clang-objcpp
Editor
script
Compiler
Clang compiled to WebAssembly via @live-codes/clang-wasm, with a complete libc++.
Version
Clang v22.1.8. The standards gnu++11, gnu++14, gnu++17, gnu++20 and gnu++23 are supported (default: gnu++23).
Limitations
The Objective-C runtime is GNUstep's libobjc2, which is a runtime and not a class library. There is no NSObject and no NSString, and Foundation is not available. Programs declare their own root class (as in the example above) and create instances directly.
Objective-C exceptions (@try/@catch/@throw) are not supported.
Custom Settings
The Clang compiler can be configured using custom settings added to the property objcpp-wasm:
| Property | Type | Description |
|---|
std | string | The Objective-C++ standard to compile with: gnu++11, gnu++14, gnu++17, gnu++20 or gnu++23. Defaults to gnu++23. |
compileArgs | string[] | Extra clang flags, e.g. ["-Wall", "-O2"]. |
args | string[] | Command-line arguments passed to the program (argv). |
Custom Settings
{
"objcpp-wasm": {
"std": "gnu++20",
"compileArgs": ["-Wall", "-O2"],
"args": ["--name", "LiveCodes"]
}
}
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 code, which forces a full page reload.
This comment can be added in the hiddenContent property of the editor for embedded playgrounds.
Links