BMB Playground

Online playground for BMB (Bare-Metal-Banter) programming language.

Features

• Monaco Editor: Full-featured code editor with BMB syntax highlighting
• Real-time Execution: Run BMB code directly in the browser
• Contract Verification: Visual feedback for pre/post conditions
• Example Gallery: 10+ curated examples across multiple categories
• URL Sharing: Share code snippets via compressed URL links
• Keyboard Shortcuts: Efficient workflow with keyboard controls
• Responsive Design: Works on desktop and mobile devices

Development

Prerequisites

• Node.js 18+
• npm or pnpm

Setup

# Install dependencies
npm install

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Project Structure

playground/
├── public/               # Static assets
├── src/
│   ├── components/       # React components
│   │   ├── Editor.tsx        # Monaco editor wrapper
│   │   ├── Header.tsx        # App header with controls
│   │   ├── Output.tsx        # Output panel
│   │   └── ExampleGallery.tsx # Example browser modal
│   ├── monaco/           # Monaco configuration
│   │   └── bmb-language.ts   # BMB language definition
│   ├── utils/            # Utility functions
│   │   └── sharing.ts        # URL sharing with compression
│   ├── App.tsx           # Main app component
│   ├── compiler.ts       # BMB interpreter
│   ├── main.tsx          # Entry point
│   └── index.css         # Styles
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Usage

Running Code

1. Write BMB code in the editor
2. Press Ctrl+Enter or click "Run"
3. View output in the right panel

Example Gallery

1. Click "Examples" to browse available examples
2. Filter by category (Basics, Algorithms, Math, etc.)
3. Click an example to load it into the editor

Sharing

1. Click "Share" or press Ctrl+S to copy a shareable link
2. The link contains your code compressed in the URL hash
3. Anyone with the link can view and run your code

Keyboard Shortcuts

Shortcut	Action
Ctrl+Enter	Run code
Ctrl+S	Share (copy link)
Escape	Close modals

Example Categories

Category	Examples
Basics	Hello World, Factorial
Algorithms	Fibonacci, GCD, Binary Search
Math	Prime Check, Power
Contracts	Safe Division, Range Validator
Real World	Leap Year Calculator

Technical Details

BMB Interpreter

The playground includes a JavaScript-based BMB interpreter that supports:

• Function definitions with contracts (pre/post)
• Recursive function calls
• If-then-else expressions
• Let bindings and block expressions
• Arithmetic and comparison operators
• Boolean operators (and, or, not)
• Built-in println function

Future versions will use a WASM-compiled BMB runtime.

Monaco Integration

• Custom BMB language definition with syntax highlighting
• Contract keywords (pre, post) highlighted distinctly
• Memory keywords (own, ref, mut) styled differently
• Custom dark theme optimized for BMB code

URL Sharing

Uses LZ-String compression to encode code into URL hash:

• Efficient compression for sharing
• No server required for link generation
• Code persists in browser history

Roadmap

• Monaco editor with BMB syntax
• JavaScript-based interpreter
• URL sharing with compression
• Example gallery
• Keyboard shortcuts
• WASM-based BMB compiler
• Full contract verification visualization
• Multiple file support
• Standard library documentation

Related

• BMB Compiler - Main compiler repository
• BMB Samples - Example programs
• VS Code Extension - VS Code support

License

MIT