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:
Header
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.
Sidebar
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 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.
DevTools
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.
Layout
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.