Solang Playground

Open-source web IDE for Solidity smart contracts on Stellar

Overview

Solang Playground is an open-source web IDE for writing, compiling, deploying, and invoking Solidity smart contracts on the Stellar blockchain. Part of the Hyperledger ecosystem, it provides a full development environment in the browser — code editor with intelligent completions, real-time error diagnostics, one-click compilation, contract deployment to Soroban, and function invocation with return value parsing.

Core contributor responsible for the entire editor experience, the Next.js frontend migration, Stellar blockchain integration, the analytics system, and multi-file compilation support. The work involved building across the full stack: TypeScript frontend, Rust/WASM language server, NestJS analytics backend, and Docker infrastructure.

The playground is hosted at solang.io and serves as the primary development tool for Solidity developers targeting Stellar/Soroban. Contributions span 23+ commits across editor intelligence, blockchain integration, analytics, and infrastructure — touching every layer of the application from the in-browser language server to the deployment pipeline.

Technical Highlights

In-Browser LSP via WebAssembly: The Solang compiler's language server runs entirely in the browser as a WASM module compiled from Rust. It provides real-time diagnostics, code completion, hover documentation, and symbol navigation — all without server roundtrips. Built the LSP client integration with Monaco Editor, including a custom protocol converter that replaced 1,962 lines of deprecated library code with a minimal ~370-line implementation handling bidirectional conversion between Monaco and LSP protocol types.

Cross-File Editor Intelligence: Extended the editor beyond single-file editing to support multi-file workspaces with import resolution. All .sol files in the workspace are opened in the LSP on initialization, enabling Go to Definition across files — clicking a function in main.sol navigates to its definition in lib.sol — Find References, and Signature Help. The file explorer, tab system, and editor state are synchronized so cross-file navigation feels seamless.

Stellar Contract Pipeline: Built the complete lifecycle for smart contracts on Stellar/Soroban: compile Solidity to WASM via the Rust backend, upload the WASM binary to the blockchain, deploy the contract with constructor arguments, and invoke functions with typed parameters. Includes Solidity-to-Soroban type mapping (uint256 → u256, address → address, etc.), Freighter wallet integration, and diagnostic event parsing to extract return values and log outputs from transactions.

Analytics Platform: Designed and built a standalone NestJS analytics service with Prisma and PostgreSQL. Tracks deployments, invocations, and compilations with user attribution via wallet addresses. The frontend dashboard displays summary stats, activity-over-time charts, unique/active user trends, and transaction distribution — giving the project maintainers visibility into how the playground is being used.

Key Features

• Monaco Editor: Custom Solidity syntax highlighting with 5 token categories — types, control flow, visibility, storage, and built-ins — using VSCode-inspired colors
• In-Browser LSP: WASM language server providing real-time diagnostics, code completion, hover docs, and symbol navigation without server roundtrips
• Go to Definition: Cross-file navigation — clicking a symbol jumps to its definition even in a different file, with automatic file switching
• Find References & Signature Help: Reference lookups and function parameter hints with active parameter highlighting
• Code Snippets: 14+ snippets (contract, function, struct, modifier, event, etc.) and keyword completions with documentation
• Multi-File Compilation: Import resolution with all workspace files sent to the Rust backend for cross-file compilation
• Contract Deployment: One-click deployment to Stellar/Soroban with constructor parameter input and Freighter wallet signing
• Function Invocation: Typed parameter inputs, return value parsing, and console log extraction from transaction diagnostics
• Analytics Dashboard: Tracking deployments, invocations, compilations, active users, and usage trends with Recharts visualizations

Challenges & Solutions

Monaco–LSP Protocol Bridge: Monaco Editor and the Language Server Protocol use different coordinate systems (1-based vs 0-based), different completion item formats, and different diagnostic severity levels. The upstream library for conversion was deprecated and unmaintained at 1,962 lines. Wrote a minimal custom converter (~370 lines) that handles bidirectional translation — positions, ranges, diagnostics, completions, hover content, symbols, and text edits — while being maintainable and type-safe.

WASM LSP Stability: The Solang language server compiled to WASM would panic on certain inputs — incomplete code during typing, malformed change notifications, and reference lookups on undefined symbols. Tracked down three separate panic sources in the completion handler, didChange notification processor, and reference builder. Fixed each with proper null checks and error boundaries, then rebuilt the WASM binary with the fixes.

Cross-File Import Resolution: Single-file editors can't resolve imports like import "./lib.sol". The LSP needs all workspace files opened simultaneously to build a complete symbol table. Built an EditorService that batch-opens all .sol files on initialization, tracks document versions independently, and synchronizes file state between the Monaco model layer and the LSP server — using consistent file:///workspace/ URI formatting across both systems.

Solidity-to-Soroban Type Mapping: Solidity and Soroban use fundamentally different type systems. Solidity has uint8–uint256, address, bytes, and string; Soroban uses ScVal with u32, u64, u128, u256, i32, etc. Built a type mapping layer that converts Solidity parameter types to their Soroban equivalents for contract deployment and invocation, handling edge cases like array types mapped to vectors and address types.

Multi-Service Docker Architecture: The playground requires three services (Rust backend, Next.js frontend, NestJS analytics) plus PostgreSQL, all coordinated in Docker Compose. The Rust backend needs Sysbox runtime for Docker-in-Docker compilation, which conflicts with standard Docker networking. Built a multi-stage Dockerfile that compiles Rust, builds Next.js, and generates TypeScript bindings in a single builder stage, then copies minimal artifacts to the Sysbox-compatible runtime image.

Tech Stack