Code Editor

Code Editor puts VS Code’s editor in a browser tab. Open a folder from your disk and edit it with the same shortcuts, multi-cursor, minimap and TypeScript-aware autocomplete; Ctrl+S writes straight back to the file. No install, no account, and your files never leave your computer.

Features

How to use it

  1. Click Open folder and pick your project (or open a .zip, or try the sample).
  2. Edit with autocomplete; Ctrl+P jumps between files and Ctrl+Shift+F searches them all.
  3. Press Ctrl+S to save the file back to your disk.

FAQ

Are my files uploaded?

No. The editor runs entirely in your browser. A folder you open is read and written on your own disk; other projects are kept in this browser’s storage.

Which browsers can save to my disk?

Chrome and Edge (and other Chromium browsers) can open a folder and save to it. Elsewhere a folder opens as a copy kept in the browser, and you download your changes as a .zip.

Is this the real VS Code?

It uses Monaco, the editor at the heart of VS Code, so editing feels the same. It has its own terminal; VS Code’s extensions and debugger aren’t part of it.

Can I run npm install and node?

Yes, in the terminal (Ctrl+`). npm install downloads real packages from the npm registry and keeps them in your browser, and node runs your JavaScript or TypeScript in a sandbox. It isn’t a full Node.js: there’s no network, servers or native modules, so dev servers like Vite don’t run.

Does autocomplete understand my imports?

Yes: types flow across the project’s TypeScript and JavaScript files, and packages you npm install bring their types too.

More developer tools

API Studio

Build, test and automate HTTP requests right in your browser.

  • API Studio: Build, test and automate HTTP requests: collections, environments, tests and a runner.

Diagrams

Draw cloud architectures and watch the data flow.

  • Architecture Builder: Draw cloud architectures and data flows with AWS, Azure, GCP and 1,000+ components.

CI/CD

See, edit and check your CI/CD pipelines.

  • Pipeline Studio: See and edit your Bitbucket pipelines as a metro map, with checks for mistakes Bitbucket would reject.

Data

Query, browse and edit data files and SQLite databases.

  • Database Studio: Query, browse and edit CSV, Excel, Parquet and SQLite files with SQL, right in your browser. Nothing is uploaded.

System Design

Simulate traffic through a system design and find its limits.

  • System Design Simulator: Design a system, send it traffic and watch where it melts: latency, errors and the bottleneck.

Team Knowledge

Every error your team has hit, and how it was fixed.

  • Error Memory: Search every error your team has hit and how it was fixed; log new ones with their fix.

Codebase

How your services and flows really work.

  • Code Flow Map: See how your codebase works: services and business flows, every step linked to its code.

Snippets

Your team’s reusable code, searchable.

  • CodeVault: Your team’s library of reusable code: save, search, version and share snippets.

Editor

VS Code’s editor, in the browser.

  • Code Editor: VS Code’s editor in the browser: open a folder, edit with autocomplete, save back to disk.

Formatters & Beautifiers

Make messy payloads, queries and markup readable.

  • JSON & Log Formatter: Repair, beautify and deep-decode JSON, Python dicts and log lines.
  • SQL Formatter: Pretty-print queries for 12 SQL dialects.
  • XML / HTML Beautifier: Beautify or minify HTML and XML, with validation.
  • JSON Diff: Compare two payloads side by side or as a change list.
  • SQL Diff: Compare queries, scripts or schemas as SQL, with schema changes and the migration.
  • JQ / JSONPath: Filter JSON with jq or JSONPath expressions.

Encoders & Decoders

Look inside tokens, encodings and escaped text.

Generators

IDs, hashes, keys, placeholder text and typed code.

Converters

Move data between formats, times and color spaces.

API & Debugging

Reproduce requests, read errors and sanitise logs.