DevBench Workspace

DevBench, the JavaScript playground for Windows, Linux and macOS.

DevBench Workspace is a high-performance cross-platform JavaScript playground and execution environment. Designed to offer instant feedback, it allows developers to write, transform, and execute JavaScript and TypeScript code locally without friction, integrating a live preview for web development.

---

Preview

Typescript transform results

Dynamic DOM preview

Top-level Await

---

Key Features

• Native & Fast Execution: Integrated JavaScript engine (Rust-based) to execute code without relying on heavy Node.js environments on the frontend.
• Real-time Transformation: Native support for modern syntax and TypeScript thanks to a lightning-fast compiler powered by SWC.
• Professional-Grade Editor: Fluid typing experience with Monaco Editor, featuring custom decorations and inline evaluations to show results directly next to code lines.
• Smart Live Preview: Dynamic injection of HTML structures, styles (<style>), and scripts (<script>) to preview interfaces instantly.
• Cross-platform: Optimized binaries for Windows, macOS, and Linux distributions.

---

Architecture & Tech Stack

DevBench is built on a modern architecture, separating a high-performance core from a reactive user interface.

Core & Backend (Rust & Tauri)

• Tauri: The foundational framework of the application. It provides the native window, cross-platform lifecycle, and blazingly fast IPC (Inter-Process Communication) via Commands and Events between the UI and the OS.
• boa_engine: A JavaScript engine written 100% in Rust. Used to safely and efficiently interpret and execute user code, managing complex structures like JsValue and JsObject for precise console output formatting.
• @devbench/engine: A custom compiler wrapper powered by SWC. Transforms modern JavaScript/TypeScript code at unmatched speeds prior to execution.

Frontend (Web Technologies)

• React: Main library for building a structured user interface (modals, activity bars, split panes).
• Tailwind CSS: Utility-first framework used for styling the app, ensuring a clean, modern, and consistent design.
• Monaco Editor: The core of the typing experience. Deeply integrating its API to render complex decorations.

Tooling & Project Structure

• Turborepo: Utilized as our high-performance build system to orchestrate tasks across the monorepo, maximizing caching and significantly speeding up development and build workflows.
• Monorepo with pnpm: The project is structured using pnpm workspaces across distinct layers (apps/*, packages/*, plugins/*). We heavily utilize pnpm catalogs to manage and share dependencies across the repository strictly and cleanly.
• Cargo Workspaces: The Rust backend mirrors the modular structure using Cargo workspaces. It cleanly separates the main Tauri application (apps/main) from custom system plugins (plugins/engine, plugins/settings, plugins/workspace) for optimal maintainability.

---

Quick Start (Development)

Prerequisites

Ensure you have the following installed on your system:

• Node.js (v24+)
• pnpm (v11.5+)
• Rust (cargo, rustc)
• OS dependencies to build Tauri applications (check official documentation).

Development Status & Source Code

DevBench Workspace is currently in active development within a private repository and is closed-source at this time.

We have chosen to keep the codebase private during this phase to focus intensely on stabilizing the core architecture, refining the custom boa_engine integration, and ensuring a polished, high-performance user experience. Once the foundational API and core features meet our quality standards, we plan to share more details with the community. Stay tuned!

Roadmap & Goals

DevBench is continuously evolving. Here is a look at what we have achieved and our vision for the future:

Current Capabilities

• Integrated Rust-based JavaScript execution via boa_engine.
• Lightning-fast code transformation using SWC (@devbench/engine).
• Top-Level Await: Built-in support for top-level asynchronous execution.
• Custom SWC Plugins: Implemented specific AST transformations for console interception and inline expression evaluation.
• Smart Live Preview for HTML/CSS/JS with automatic DOM structure injection.
• Professional editing experience with Monaco Editor.
• Custom Theming: Partial support for personalized application and editor themes, including seamless compatibility with VS Code themes.

Planned Features & Enhancements

• Interactive Debugging: Implement visual breakpoints within Monaco Editor for step-by-step code execution and variable inspection.
• Multiple Runtime Support: Seamless integration with Node.js, Bun, and Deno, giving developers the flexibility to choose their preferred execution environment.
• Advanced Console Integration: Significantly improve the console output rendering directly within Monaco Editor for a more native, interactive, and visually polished debugging experience.
• Open Source?