A powerful bridge between C and the web, enabling frontend development directly in C through WebAssembly.
C2Wasm is an Emscripten facilitator that provides a seamless interface between C and JavaScript. It allows developers to control JavaScript directly from C code, making it easier to develop complex frontend applications using the power and performance of C with the flexibility of web technologies.
With C2Wasm, you can:
- Manipulate the DOM directly from C code
- Handle browser events
- Create and modify JavaScript objects
- Leverage the full power of WebAssembly while writing familiar C code
- Emscripten SDK: C2Wasm requires the Emscripten SDK to compile C code to WebAssembly.
Install Emscripten by following the official documentation.
Alternatively, you can use our quick install setup for a simplified installation process.
Download the latest version of c2wasm.c and save it in your project directory.
Create a test.c file in the same directory where you saved c2wasm.c:
#include "c2wasm.c"
#include <stdio.h>
long set_div_value() {
// Create an array to hold function arguments
c2wasm_js_var find_args = c2wasm_create_array();
c2wasm_append_array_string(find_args, "test_div");
// Get the DOM element with id "test_div"
c2wasm_js_var element = c2wasm_call_object_prop(c2wasm_document, "getElementById", find_args);
// Set the innerHTML of the element
c2wasm_set_object_prop_string(element, "innerHTML", "Hello World from C");
return c2wasm_undefined;
}
int main() {
// Initialize C2Wasm
c2wasm_start();
// Expose the C function to JavaScript
c2wasm_set_object_prop_function(c2wasm_window, "set_div_value", set_div_value);
}Compile the C code to JavaScript using Emscripten:
emcc test.c -o test.jsCreate an HTML file to test your code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>C2Wasm Demo</title>
<script src="test.js"></script>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
#test_div {
margin: 20px 0;
padding: 15px;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
</head>
<body>
<h1>C2Wasm Demo</h1>
<div id="test_div">Original Text</div>
<button onclick="set_div_value()">Update Text</button>
</body>
</html>WebAssembly requires a server to work. You can use one of these methods:
python3 -m http.server 8080Then navigate to http://localhost:8080/test.html
If you don't have Python, you can use Yahr:
yahr
If you want to build c2wasm.c from source, you'll need Darwin version 0.2.1 or later.
curl -L https://github.com/OUIsolutions/Darwin/releases/download/0.2.1/darwin.out -o darwin.out && sudo chmod +x darwin.out && sudo mv darwin.out /usr/bin/darwindarwin run_blueprint| Topic | Description |
|---|---|
| Setting Object Properties | Learn how to set properties on JavaScript objects from C |
| Setting Array Properties | Detailed guide on manipulating JavaScript arrays |
| Getting Object Properties | How to retrieve properties from JavaScript objects |
| Getting Array Properties | Methods for accessing JavaScript array elements |
| Working with DOM | Techniques for DOM manipulation from C |
| Example | Description |
|---|---|
| Accumulator | Implementation of a JavaScript accumulator object created in C |
| Array Set | Demonstrates setting values in JavaScript arrays |
| Array Append | Shows how to append elements to JavaScript arrays |
| Array Iteration | Methods for iterating through JavaScript arrays |
| Object Iteration | Techniques for iterating through JavaScript objects |
| Object Set Any | Set any value type to a JavaScript object |
| Object Set | Basic object property manipulation |
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.