https://github.com/mrubyedge/playground
mruby/edge playground on browser
https://github.com/mrubyedge/playground
mruby wasm
Last synced: 18 days ago
JSON representation
mruby/edge playground on browser
- Host: GitHub
- URL: https://github.com/mrubyedge/playground
- Owner: mrubyedge
- Created: 2026-02-08T15:51:20.000Z (about 1 month ago)
- Default Branch: master
- Last Pushed: 2026-02-27T11:41:58.000Z (24 days ago)
- Last Synced: 2026-02-27T16:39:23.329Z (24 days ago)
- Topics: mruby, wasm
- Language: Rust
- Homepage: https://mrubyedge.github.io/playground/
- Size: 4.31 MB
- Stars: 0
- Watchers: 0
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
rustup target add wasm32-unknown-emscripten
```
### 2. Install Emscripten SDK
```bash
# 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:
```bash
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
```bash
# 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://.github.io//`
## 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:
```bash
source /path/to/emsdk/emsdk_env.sh
```