A WebAssembly port of MicroQuickJS - Run a minimal JavaScript engine in your browser with Canvas API support.
This entire WASM port, IDE, Canvas API bridge, benchmark page, and deployment was created by Claude Code with zero human code review or modification.
| Page | Description |
|---|---|
| IDE | Full JavaScript IDE with Canvas API |
| Benchmark | WASM vs Browser JS performance comparison |
| Quickstart Demo | Minimal example - copy this code! |
Current Version: v19 (2025-12-24)
- CodeMirror Editor with syntax highlighting
- Canvas API for graphics and games
- Console output with timestamps
- Benchmark suite - Compare WASM vs native JS
- Mobile responsive design
Live Demo of this Quickstart - See the code below running live!
Add MQuickJS-WASM to your website in 2 minutes! Just copy this complete example:
Save as mquickjs-demo.html and open in browser:
<!DOCTYPE html>
<html>
<head>
<title>MQuickJS-WASM Demo</title>
<style>
body { font-family: sans-serif; max-width: 800px; margin: 40px auto; padding: 20px; }
textarea { width: 100%; height: 150px; font-family: monospace; font-size: 14px; }
button { padding: 10px 20px; font-size: 16px; cursor: pointer; margin: 10px 0; }
#output { background: #1e1e1e; color: #0f0; padding: 15px; font-family: monospace;
min-height: 100px; white-space: pre-wrap; border-radius: 4px; }
.status { color: #888; font-size: 12px; }
</style>
</head>
<body>
<h1>MQuickJS-WASM Demo</h1>
<p class="status" id="status">Loading WASM engine...</p>
<textarea id="code">// Try some JavaScript!
var sum = 0;
for (var i = 1; i <= 100; i++) {
sum += i;
}
console.log("Sum of 1-100:", sum);
// Fibonacci
function fib(n) {
if (n <= 1) return n;
return fib(n-1) + fib(n-2);
}
console.log("Fibonacci(20):", fib(20));
"Done!";</textarea>
<br>
<button id="run" disabled>Run Code</button>
<button id="reset">Reset Engine</button>
<h3>Output:</h3>
<div id="output"></div>
<!-- Load MQuickJS-WASM from GitHub -->
<script src="https://raw.githubusercontent.com/franzenzenhofer/mquickjs-wasm/main/dist/mquickjs.js"></script>
<script>
var engine = null;
var runCode = null;
var resetEngine = null;
var output = document.getElementById('output');
// Capture console.log from WASM
var logs = [];
MQuickJS().then(function(Module) {
engine = Module;
// Setup API functions
var init = Module.cwrap('mquickjs_init', 'number', []);
runCode = Module.cwrap('mquickjs_run', 'string', ['string']);
resetEngine = Module.cwrap('mquickjs_reset', 'number', []);
// Initialize
init();
// Ready!
document.getElementById('status').textContent = 'WASM engine ready! (168KB loaded)';
document.getElementById('run').disabled = false;
});
document.getElementById('run').onclick = function() {
var code = document.getElementById('code').value;
logs = [];
// Wrap code to capture console.log
var wrappedCode = 'var __logs = [];' +
'var console = { log: function() { ' +
' var args = []; for(var i=0; i<arguments.length; i++) args.push(String(arguments[i]));' +
' __logs.push(args.join(" ")); } };' +
code + ';__logs.join("\\n") + "\\n---\\nResult: " + (' + code.split(';').pop() + ')';
try {
var result = runCode(code);
output.textContent = result || '(no output)';
} catch(e) {
output.textContent = 'Error: ' + e.message;
}
};
document.getElementById('reset').onclick = function() {
if (resetEngine) {
resetEngine();
output.textContent = 'Engine reset.';
}
};
</script>
</body>
</html><!-- Add to your HTML -->
<script src="https://raw.githubusercontent.com/franzenzenhofer/mquickjs-wasm/main/dist/mquickjs.js"></script>
<script>
MQuickJS().then(function(Module) {
// Initialize
var init = Module.cwrap('mquickjs_init', 'number', []);
var run = Module.cwrap('mquickjs_run', 'string', ['string']);
init();
// Run JavaScript in the WASM sandbox!
var result = run('1 + 2 + 3');
console.log('Result:', result); // "6"
// Run more complex code
var fib = run('function fib(n){return n<=1?n:fib(n-1)+fib(n-2)} fib(20)');
console.log('Fibonacci(20):', fib); // "6765"
});
</script>| File | URL | Size |
|---|---|---|
| JS Loader | https://raw.githubusercontent.com/franzenzenhofer/mquickjs-wasm/main/dist/mquickjs.js |
~15KB |
| WASM Binary | https://raw.githubusercontent.com/franzenzenhofer/mquickjs-wasm/main/dist/mquickjs.wasm |
168KB |
The JS loader automatically fetches the WASM binary from the same directory.
Download both files to your server:
curl -O https://raw.githubusercontent.com/franzenzenhofer/mquickjs-wasm/main/dist/mquickjs.js
curl -O https://raw.githubusercontent.com/franzenzenhofer/mquickjs-wasm/main/dist/mquickjs.wasmThen use <script src="mquickjs.js"></script> with your local path.
This is a fork of bellard/mquickjs that adds WebAssembly compilation support.
wasm_wrapper.c- Browser-friendly C wrapper for WASMMakefile.wasm- Emscripten build configurationdist/index.html- Full IDE with CodeMirror editor- Canvas API Bridge - Draw graphics from JS running in WASM
- Animation support - requestAnimationFrame bridge
- Keyboard input - Play games like Snake!
- Cloudflare Pages deployment
| Metric | Value |
|---|---|
| WASM Size | 168 KB |
| JS Engine Memory | 1 MB |
| Original ROM Size | ~100 KB |
| Min RAM Required | ~10 KB |
- GCC (for host tools)
- Emscripten (for WASM compilation)
# Install Emscripten (macOS)
brew install emscripten
# Build WASM module
make -f Makefile.wasm
# Output files in dist/
ls dist/
# mquickjs.js mquickjs.wasm index.html<script src="mquickjs.js"></script>
<script>
MQuickJS().then(function(Module) {
// Initialize engine
var init = Module.cwrap('mquickjs_init', 'number', []);
init();
// Run JavaScript code
var run = Module.cwrap('mquickjs_run', 'string', ['string']);
var result = run('1 + 2 + 3');
console.log(result); // "6"
// Reset engine
var reset = Module.cwrap('mquickjs_reset', 'number', []);
reset();
});
</script>| Function | Description |
|---|---|
mquickjs_init() |
Initialize the JavaScript engine |
mquickjs_run(code) |
Execute JavaScript code, returns result as string |
mquickjs_reset() |
Reset the engine to a fresh state |
mquickjs_version() |
Get version information |
mquickjs_memory_size() |
Get allocated memory size in bytes |
mquickjs_cleanup() |
Free all resources |
mquickjs-wasm/
├── mquickjs.c # Original MicroQuickJS engine
├── mquickjs.h # Public API header
├── wasm_wrapper.c # WASM-specific wrapper (by Claude Code)
├── Makefile # Original native build
├── Makefile.wasm # WASM build (by Claude Code)
└── dist/
├── index.html # Interactive demo (by Claude Code)
├── mquickjs.js # Generated JS loader
└── mquickjs.wasm # Compiled WASM module
MicroQuickJS (aka. MQuickJS) is a JavaScript engine targetted at embedded systems. It compiles and runs JavaScript programs using as little as 10 kB of RAM. The whole engine requires about 100 kB of ROM (ARM Thumb-2 code) including the C library. The speed is comparable to QuickJS.
MQuickJS only supports a subset of JavaScript close to ES5. It implements a stricter mode where some error prone or inefficient JavaScript constructs are forbidden.
- Only strict mode constructs are allowed
- Arrays cannot have holes
- Only global
evalis supported - No value boxing (e.g.
new Number(1)) - Regexp case folding only works with ASCII
- String
toLowerCase/toUpperCaseonly handle ASCII - Date: only
Date.now()is supported
for ofloops (arrays only)- Typed arrays
\u{hex}in string literals- Math functions:
imul,clz32,fround,trunc,log2,log10 - Exponentiation operator
- String functions:
codePointAt,replaceAll,trimStart,trimEnd globalThisglobal property
- Authors: Fabrice Bellard, Charlie Gordon
- Copyright: (c) 2017-2025
- License: MIT
- Repository: github.com/bellard/mquickjs
- Website: bellard.org/mquickjs
- Created by: Claude Code
- Date: December 24, 2024
- Human involvement: Zero code review or modification
- Repository: github.com/franzenzenhofer/mquickjs-wasm
MIT License - See LICENSE file.
This project demonstrates AI-assisted software development. The WASM compilation, browser wrapper, interactive demo, and Cloudflare deployment were all generated autonomously by Claude Code.