Which languages are supported?

53 programming languages including JavaScript, TypeScript, Python, Java, C++, C, C#, Go, Rust, Ruby, PHP, Swift, Kotlin, Scala, Haskell, Lua, R, MATLAB, SQL, HTML, CSS, SCSS, JSON, XML, YAML, Markdown, Shell/Bash, PowerShell, and many more. Each language has tailored syntax highlighting and formatting support.

Does the editor support Vim keybindings?

Yes! Full Vim mode with Normal, Insert, and Visual modes is available. Toggle it from the settings panel. All standard Vim motions, operators, and text objects work as expected — h/j/k/l navigation, d/c/y operators, w/b/e word motions, and more. Great for developers who prefer modal editing.

How many themes are available?

10 editor themes ranging from light to dark variants, designed for comfortable coding in any lighting condition. Themes affect syntax highlighting colors, background, and UI elements. Your theme preference is saved and persists across sessions.

What keyboard shortcuts are available?

45 keyboard commands including: Ctrl+Enter to run code, Ctrl+S to format, Ctrl+/ to toggle line comments, Ctrl+H for find and replace, Ctrl+D for selecting next occurrence, Ctrl+L to select line, and many more. Access the full command list from the Command Palette within the editor.

Is my code uploaded to any server?

No. All code execution happens in a sandboxed environment within your browser. Your code is never transmitted to or stored on any server. When you generate a shareable link, the code is encoded in the URL itself — we do not store it in any database. Your code remains completely private.

Can I share my code with others?

Yes! Click the Share button to generate a URL that encodes your entire editor state — code, language, and theme. Anyone who opens the link sees your exact setup and can edit their own copy. No account required, no server storage — the code lives entirely in the URL.

Does the Code Playground work on mobile?

Yes, the editor is fully responsive and works on smartphones and tablets. Touch interactions are supported for editing, scrolling, and selecting text. However, for complex coding sessions with keyboard shortcuts and multiple panels, a desktop or laptop with a physical keyboard provides the best experience.

How does the AI assistant work in the IDE?

The AI assistant panel is integrated directly into the editor. Highlight code and ask for explanations, bug fixes, or optimizations. The AI uses the platform's dual-provider infrastructure — local GPU for speed, cloud fallback for reliability. Your code stays private and is never stored or used for training.

Can I use Emmet in the editor?

Yes! Emmet abbreviation expansion is built in for HTML, CSS, JSX, and TSX files. Type an Emmet abbreviation (e.g., div>ul>li*5) and press Tab to expand it into full markup. This dramatically speeds up HTML and CSS authoring directly in the editor.

What file formats can I import and export?

You can drag and drop any text file onto the editor to import it, and the language is auto-detected from the file extension. Export your code as a file with the correct extension for your selected language (.js, .py, .rs, .go, etc.) or copy to clipboard. Shareable links also serve as a portable format for code exchange.

Code Playground Documentation

Guide to the browser-based IDE with 53 programming languages, 10 editor themes, 45 keyboard commands, Vim mode, Emmet support, AI code assistance, and instant sharing — all running securely in your browser.

Last updated: March 2026

Choose a Language
Select from 53 programming languages including JavaScript, TypeScript, Python, Java, C++, Go, Rust, Ruby, PHP, Swift, Kotlin, C#, and many more. Each language comes with proper syntax highlighting, language-aware auto-completion, and appropriate formatting rules. The language selector is searchable for quick access.
Write Your Code
Write code in a full-featured editor powered by CodeMirror with syntax highlighting, intelligent auto-completion, bracket matching, line numbers, code folding, and find/replace (Ctrl+H). Enable Vim mode for full Normal, Insert, and Visual mode keybindings. Use Emmet for rapid HTML/CSS expansion. The AI Assist panel provides inline code suggestions and explanations.
Run & Share
Execute code directly in your browser's sandboxed environment — nothing is uploaded to servers. Use Ctrl+Enter to run instantly, Ctrl+S to format, and Ctrl+/ to toggle comments. Generate shareable links that preserve your code, selected language, and theme settings so colleagues can view and edit your snippets with one click.

53Languages

10Themes

45Commands

89Modules

53 Supported Languages

Full syntax highlighting for every language. The 6 marked with a lightning bolt are directly executable in the browser.

JavaScript

TypeScript

Python

HTML

CSS

SQL

Lua

JSON

Markdown

YAML

XML

TOML

PHP

C++

Rust

Ruby

Java

Kotlin

Swift

Dart

Perl

Haskell

Erlang

OCaml

Shell

PowerShell

Dockerfile

Diff

SCSS

Solidity

CoffeeScript

Groovy

Clojure

Julia

Fortran

Pascal

Crystal

COBOL

Forth

Scheme

Common Lisp

Assembly

VBScript

Factor

Elm

Tcl

Octave

Brainfuck

10 Built-in Themes

Each theme defines 40+ color tokens for every UI surface with full CodeMirror syntax highlighting integration.

Dark+

Light+

Monokai

Dracula

Solarized Dark

Solarized Light

One Dark Pro

GitHub Dark

Nord

Catppuccin Mocha

Feature Highlights

Code Execution
Run JavaScript, TypeScript, Python, HTML, SQL, and Lua directly in the browser with real-time console output.
Syntax Highlighting
Full CodeMirror 6 syntax highlighting for all 53 languages with bracket pair colorization and indent guides.
Vim Mode
Toggle Vim keybindings for a keyboard-centric editing experience with full modal editing support.
Find & Replace
Powerful search across files with regex support, find in files sidebar, and go-to-line navigation.
Split Editing
Split the editor horizontally or vertically into up to 3 groups with drag-and-drop tab reordering.
Virtual File System
Create, rename, and organize files and folders in a virtual workspace with localStorage persistence.
AI Code Assistant
Built-in AI panel for code generation, explanation, refactoring, and debugging with streaming responses.
Canvas Minimap
VS Code-style minimap for quick navigation through large files with click-to-scroll.
Command Palette
Ctrl+Shift+P to access 45 commands across 5 categories: run, editor, file, view, and settings.
Emmet & Formatting
Emmet abbreviation expansion for HTML/CSS and Prettier-style formatting for JS, TS, HTML, JSON, CSS, YAML, and XML.
Workspace Templates
Quick-start with pre-built templates for HTML+CSS+JS, Python, Node.js, and more project types.
Mobile Responsive
Fully responsive layout with mobile-optimized activity bar, panels, and modals for coding on any device.

45 Commands in 5 Categories

Open the Command Palette with Ctrl+Shift+P to access every command with fuzzy search.

Run

Execute code, Clear console

Editor

Format, Find, Go to Definition, Multi-cursor, Fold/Unfold

File

Save snippet, Download, Share, Quick Open, Templates

View

Split editor, Toggle sidebar/panel, Show terminal, Shortcuts

Settings

Toggle Vim/theme/word-wrap, Font size

Architecture Overview

The IDE is built as a fully decomposed modular system with 89 source files across 13 sub-directories, each with its own test file.

VS Code Layout Shell
CSS Grid with activity bar, sidebar, editor area, bottom panel, and status bar.
Modular Architecture
89 source modules across 13 sub-directories with clean separation of concerns.
Web Worker Execution
Python, SQL, and Lua run in isolated Web Workers for non-blocking execution.
Theme Engine
10 themes with 40+ color tokens each, mapped to CodeMirror syntax highlighting.
Sandboxed Runtime
Code runs in sandboxed iframes and workers for safe, isolated execution.
Lazy Loading
Dynamic imports and code splitting keep the initial bundle size minimal.

Component Directory Structure

src/components/ide/
  ai/           AI Assist panel, code block, result renderer
  commands/     Command palette, Quick Open, Go to Line
  editor/       Editor groups, tabs, minimap, breadcrumbs
    extensions/ Bracket colors, indent guides
  language/     Language data and CodeMirror extensions
  layout/       IDE layout shell, activity bar, sidebar, panels
  modals/       Shortcuts, workspace templates, QR code
  output/       Console, problems, SQL table output
  panels/       Settings, theme picker, external libs, history
  shared/       Context menu, file icons, language colors
  sidebar/      File explorer, outline view, search view
  terminal/     Terminal emulator panel
  toolbar/      Playground toolbar, language selector, snippets

Keyboard-First Design

Every action is accessible via keyboard. Core shortcuts include:

Ctrl+Shift+PCommand Palette

Ctrl+PQuick Open File

Ctrl+GGo to Line

F12Go to Definition

Ctrl+/Toggle Comment

Ctrl+Shift+FFind in Files

Related Documentation

53 Supported Languages

Full syntax highlighting for every language. The 6 marked with a lightning bolt are directly executable in the browser.

JavaScript

TypeScript

Python

HTML

CSS

SQL

Lua

JSON

Markdown

YAML

XML

TOML

PHP

C++

Rust

Ruby

Java

Kotlin

Swift

Dart

Perl

Haskell

Erlang

OCaml

Shell

PowerShell

Dockerfile

Diff

SCSS

Solidity

CoffeeScript

Groovy

Clojure

Julia

Fortran

Pascal

Crystal

COBOL

Forth

Scheme

Common Lisp

Assembly

VBScript

Factor

Elm

Tcl

Octave

Brainfuck

Feature Highlights

Code Execution

Run JavaScript, TypeScript, Python, HTML, SQL, and Lua directly in the browser with real-time console output.

Syntax Highlighting

Full CodeMirror 6 syntax highlighting for all 53 languages with bracket pair colorization and indent guides.

Vim Mode

Toggle Vim keybindings for a keyboard-centric editing experience with full modal editing support.

Find & Replace

Powerful search across files with regex support, find in files sidebar, and go-to-line navigation.

Split Editing

Split the editor horizontally or vertically into up to 3 groups with drag-and-drop tab reordering.

Virtual File System

Create, rename, and organize files and folders in a virtual workspace with localStorage persistence.

AI Code Assistant

Built-in AI panel for code generation, explanation, refactoring, and debugging with streaming responses.

Canvas Minimap

VS Code-style minimap for quick navigation through large files with click-to-scroll.

Command Palette

Ctrl+Shift+P to access 45 commands across 5 categories: run, editor, file, view, and settings.

Emmet & Formatting

Emmet abbreviation expansion for HTML/CSS and Prettier-style formatting for JS, TS, HTML, JSON, CSS, YAML, and XML.

Workspace Templates

Quick-start with pre-built templates for HTML+CSS+JS, Python, Node.js, and more project types.

Mobile Responsive

Fully responsive layout with mobile-optimized activity bar, panels, and modals for coding on any device.

45 Commands in 5 Categories

Open the Command Palette with Ctrl+Shift+P to access every command with fuzzy search.

Run

Execute code, Clear console

Editor

Format, Find, Go to Definition, Multi-cursor, Fold/Unfold

File

Save snippet, Download, Share, Quick Open, Templates

View

Split editor, Toggle sidebar/panel, Show terminal, Shortcuts

Settings

Toggle Vim/theme/word-wrap, Font size

Architecture Overview

The IDE is built as a fully decomposed modular system with 89 source files across 13 sub-directories, each with its own test file.

VS Code Layout Shell

CSS Grid with activity bar, sidebar, editor area, bottom panel, and status bar.

Modular Architecture

89 source modules across 13 sub-directories with clean separation of concerns.

Web Worker Execution

Python, SQL, and Lua run in isolated Web Workers for non-blocking execution.

Theme Engine

10 themes with 40+ color tokens each, mapped to CodeMirror syntax highlighting.

Sandboxed Runtime

Code runs in sandboxed iframes and workers for safe, isolated execution.

Lazy Loading

Dynamic imports and code splitting keep the initial bundle size minimal.

Component Directory Structure

src/components/ide/
  ai/           AI Assist panel, code block, result renderer
  commands/     Command palette, Quick Open, Go to Line
  editor/       Editor groups, tabs, minimap, breadcrumbs
    extensions/ Bracket colors, indent guides
  language/     Language data and CodeMirror extensions
  layout/       IDE layout shell, activity bar, sidebar, panels
  modals/       Shortcuts, workspace templates, QR code
  output/       Console, problems, SQL table output
  panels/       Settings, theme picker, external libs, history
  shared/       Context menu, file icons, language colors
  sidebar/      File explorer, outline view, search view
  terminal/     Terminal emulator panel
  toolbar/      Playground toolbar, language selector, snippets

Getting Started

Choose a Language

Write Your Code

Run & Share

IDE Statistics

53 Supported Languages

10 Built-in Themes

Feature Highlights

Code Execution

Syntax Highlighting

Vim Mode

Find & Replace

Split Editing

Virtual File System

AI Code Assistant

Canvas Minimap

Command Palette

Emmet & Formatting

Workspace Templates

Mobile Responsive

45 Commands in 5 Categories

Run

Editor

File

View

Settings

Architecture Overview

VS Code Layout Shell

Modular Architecture

Web Worker Execution

Theme Engine

Sandboxed Runtime

Lazy Loading

Component Directory Structure

Keyboard-First Design

Related Documentation

Getting Started

Choose a Language

Write Your Code

Run & Share

IDE Statistics

53 Supported Languages

10 Built-in Themes

Feature Highlights

Code Execution

Syntax Highlighting

Vim Mode

Find & Replace

Split Editing

Virtual File System

AI Code Assistant

Canvas Minimap

Command Palette

Emmet & Formatting

Workspace Templates

Mobile Responsive

45 Commands in 5 Categories

Run

Editor

File

View

Settings

Architecture Overview

VS Code Layout Shell

Modular Architecture

Web Worker Execution

Theme Engine

Sandboxed Runtime

Lazy Loading

Component Directory Structure

Keyboard-First Design

Related Documentation