mruby/edge Playground

An interactive mruby playground that runs entirely in your browser using WebAssembly.

Features

• 💻 Write and execute mruby code in the browser
• 🎨 Beautiful console-style interface
• 🚀 Powered by mruby/edge and Emscripten
• 📦 No server required - runs completely client-side

Requirements

• Rust (rustup)
• Emscripten toolchain

Setup

1. Add Emscripten Target

rustup target add wasm32-unknown-emscripten

2. Install Emscripten SDK

# Clone Emscripten SDK
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk

# Install latest version
./emsdk install latest
./emsdk activate latest

# Set environment variables (run for each session)
source ./emsdk_env.sh

Build Instructions

Build options are configured in .cargo/config.toml, so you can build with the following command:

cargo build --target wasm32-unknown-emscripten --release

This will generate the following files in the docs/ directory:

• docs/playground.js - JS glue code generated by Emscripten
• docs/playground.wasm - Compiled WebAssembly binary

Running Locally

Start Local Server

# Using Python
cd docs
python3 -m http.server 8000

# Or using npm serve
npx serve docs

Open in Browser

Access http://localhost:8000 to use the playground. Architecture

src/main.rs exports functions that can be called from JavaScript:

1. load_ruby_script: Compiles and executes mruby code, returns the result
2. systemMessage: JavaScript callback for system messages (defined in library.js)

The playground uses Emscripten's Module interface to bridge Rust and JavaScript.

1. Push your changes including the docs/ directory
2. Go to your repository Settings → Pages
3. Set Source to "Deploy from a branch"
4. Select branch: main (or your default branch)
5. Select folder: /docs
6. Save and wait for deployment

The playground will be available at https://<username>.github.io/<repository>/

Code Explanation

src/main.rs outputs messages to the console in two ways:

1. println! macro: Emscripten automatically redirects to console.log
2. emscripten_run_script: Directly executes JavaScript code

Troubleshooting

CORS Errors

Opening files directly with the file:// protocol will cause CORS errors. Always use a local HTTP server.

Build Errors

Make sure Emscripten environment variables are properly set:

source /path/to/emsdk/emsdk_env.sh