@playertwo/ide

Embeddable multiplayer game IDE with dual-view local testing.

Features (Phase 1 MVP)

- ✅ Dual-view local testing - See two players side-by-side in the same browser
- ✅ CodeMirror editor - Syntax highlighting for TypeScript/JavaScript
- ✅ ESBuild-WASM bundler - In-browser bundling with cached SDK + import maps
- ✅ Sandbox execution - Isolated iframe for safe code execution
- ✅ Local transport - Test multiplayer without network
- ✅ Phaser engine - Built for Phaser 3 games
- ✅ File management - Virtual file system with multiple files
- ✅ DevTools overlay - Per-player debugging with console logs, state inspection, and action history

Note: TypeScript type checking is deferred to Phase 2

Installation

``bash
pnpm add @playertwo/ide
`

Usage

`svelte



`

API

$3

`typescript
interface playertwoIDEConfig {
/* Initial project files /
files: Record;

/* Game engine (Phase 1: phaser only) /
engine: 'phaser';

/* Multiplayer transport (Phase 1: local only) /
transport: { type: 'local' };

/* Layout mode /
layout?: 'dual' | 'code-only';

/* Editor settings /
editor?: {
theme?: 'dark' | 'light';
fontSize?: number;
};

/* Callbacks /
onChange?: (files: Record) => void;
onError?: (error: GameError) => void;
onReady?: () => void;
onRun?: () => void;
}
`

DevTools

Each game preview has a built-in DevTools overlay that can be toggled with the 🛠️ button in the preview header.

$3

- Console Tab - View console.log(), console.warn(), and console.error() from each player
- State Tab - Real-time game state inspection (coming soon)
- Actions Tab - Action history with timestamps (coming soon)
- Draggable - Move the overlay anywhere within the game preview
- Minimize - Click the minimize button to collapse the overlay

$3

To send messages to the DevTools console from your game code, the sandbox runtime intercepts standard console methods:

`typescript
console.log('Player position:', x, y); // Shows as info
console.warn('Low health!'); // Shows as warning
console.error('Failed to connect'); // Shows as error
`

Each console message includes:
- Timestamp (HH:MM:SS.mmm)
- Level indicator (ℹ️, ⚠️, ❌)
- Message content

Architecture

`
@playertwo/ide/
src/
lib/
PlayerTwoIDE.svelte # Main IDE component
components/
CodeEditor.svelte # CodeMirror wrapper
GamePreview.svelte # Dual-view game preview
DevToolsPanel.svelte # Per-game debugging overlay
core/
VirtualFS.ts # In-memory file system
ESBuildManager.ts # ESBuild-powered preview runtime
`

Demo

Run the demo to see it in action:

`bash
cd @playertwo/demos
pnpm dev
`

Then visit http://localhost:5173/ide`

Phase 2 (Coming Soon)

- ⏭ Hot Module Replacement (HMR)
- ⏭ Code formatting (Biome)
- ⏭ Multi-transport support (Trystero P2P, WebSocket)
- ⏭ Web Component wrapper
- ⏭ Three.js engine support

See spec-phase-2.ts for details.

License

MIT