Web editor

The web editor

The Web Editor contains a set of features to increase the accessibility of complex tools like git, setup, review flows, contributions, and visualizing components.

Here is an overview of the web editor structure:


The web editor

The header is where you perform general operations on your Repositories.

1. Navigation

  • Repositories: Click to return to the Repositories level.
  • Branch: Checkout to other branches.

2. Devtool menu

  • Add Devtools: Set up devtools to facilitate your work and automatize repetitive tasks.

3. Connections

  • Avatars: See who's currently online and click to follow their steps.

4. Collaborate

  • Share: Invite friends to work together.
  • Branch: Quickly start a new branch and propose changes.


The web editor

The sidebar is a quick way to operate and navigate your codebase. It allows you to:

  • View and manipulate your files
  • Search inside your Repository
  • Interact with source control

You can change the sidebar view using the icons at the top.

You can drag and drop elements and shift or command click to select multiple items in the lists.

Code Editor

The web editor

The code editor is where the magic happens ✨. We provide a base experience for all developers, with support for:

  • Code formatting (Prettier or ESLint)
  • LSP
  • Intellisense
  • Code completion
  • Optimized syntax highlight
  • Ligatures
  • Multiple Editors
  • Diff view

If you want more advanced features, you can download our VS Code extension (opens in a new tab) and open the Repository in your local IDE with your own customizations.


CodeSandbox signature layout with three columns and a runnable preview is back with superpowers. The new panel on the right supports useful tools to help you complete your work faster and more efficiently. Read more about it here.


CodeSandbox Web Editor allows you to customize the three-panel layout to maximize the space for the task you are working on. Hover the mouse near the edge of each column to see the resize cursor; click and hold to change the layout.

After reaching the proportional limit, keep dragging to hide the entire column.

Keyboard Shortcuts

Press Cmd/Ctrl B to hide the Sidebar.

Press Cmd/Ctrl ' to hide the DevTools.