All the details about the latest CodeSandbox updates.
Features
We've added support for Vue 3. Including a new template with native Hot Module Reloading that uses Vetur for TypeScript IntelliSense, snippets, Emmet, and linting.
New Dependency Modal, which makes adding dependencies faster - with a quick input field, support for keyboard shortcuts and adding multiple dependencies at once.
Console improvements to load faster and better handle large updates.
Fixes
Fixed permissions on personal workspace sandboxes
@jyash97 fixed an alignment issues in the tests splitpane resizer
Fixed showing personal workspace in the share sheet
We now delay the refresh after registering a preview secret
@Saurabhdaware
added .abell language features to vscode-extensions
Fixes
Fixed Stackbit sign in
Fixed create sandbox modal for mobile devices
Fixed reloading the source sandbox after dealing with a sync
Fixed UI where “configuration indicator” was covering the search box
Features
Repositories Sandboxes in the Dashboard
Quickly access all our sandboxes linked with GitHub from the dashboard
Codesandbox now sets the TypeScript version of the editor dynamically
Added Sass and CSS support to Svelte template
Fixes
Fixed several smaller issues related to GitHub syncing
Fixed updating git changes after doing a sync
Fixed reloading the source sandbox after dealing with a sync
Several improvements to the new Dashboards
Toggle fullscreen view on Safari
Added env variable to SSE docs
A New Dashboard Built for Collaboration
We've introduced workspaces and refreshed the design of the dashboard to make
working with teams and more sandboxes a better experience.
Features
Workspaces enable you to work on sandboxes with teams of people and keep your
personal projects separate
A new start screen that lists only the most recent stuff you're likely to
want to dive back in to
By default, new projects now go into drafts so important sandboxes are easier
to find
List view is perfect for those of you with a large number of sandboxes
The dashboard is now keyboard accessible, so you can move around and open
sandboxes using only keys
The design is responsive, so you can get to your sandboxes quicker when on
mobile
You can now reload the preview with CMD+SHIFT+R
Fixes
Made bracket matches more apparent in the CSB Black theme
We now close the modal after importing a GitHub repo on the Create Sandbox
screen
Fixed an issue with being unable to save all after reloading a sandbox with
unsaved changes
@jyash97 made
sure you can't invite yourself to a workspace
A Better GitHub Workflow
You've been able to import and export projects to and from GitHub on CodeSandbox
for a while, but the workflow was confusing. This update makes working with
GitHub repos more user-friendly.
Features
Refined the core GitHub flow - you can now start a PR while staying in the
same sandbox
GitHub sandboxes are now visually distinct from regular sandboxes, with
status indicators and instructions so next steps are clearer
Added new functionality to keep a sandbox in sync with a GitHub repo and
resolve conflicts
Fixes
Improved execution time of custom Babel presets and plugins, reducing
transpilation time of Vue from 18 to 2 seconds
Added caching to Vue project transpilation
Fixed an issue that meant we'd refresh the preview instead of hot reload in
some cases
Squashed a regression with dynamic imports
Fixed a UI issue where old and new sandbox names would overlap while changing
the name
Resolved a UI issue with templates not being shown correctly in Template
Universe for some users
@sunnyssr fixed
a bug with showing the incorrect branch name
@jyash97 fixed
an issue with invalid color codes that could cause a crash
@akash-joshi
resolved a styling bug on the recent page of the dashboard
Features
We now allow markdown in sandbox descriptions
Fixes
We changed how we handle browser authentication to make it more reliable
Fixed edge-cases in Live for those with flaky connections
Resolved an issue with changing files after forking
Fixed an issue with the upload icon not showing in private sandboxes
Made further fixes for handling edge-cases in ES Modules
@tehnuge fixed
icon padding in the deployment modal
We now show huge text files properly in the editor although they are
read-only
Handlebar files are now handled correctly
Thanks to
@jyash97 we now
hide delete buttons on the liked sandboxes page of user profiles
We now support showing type definitions from dependencies that have git dependencies
Features
Following of read-only users and seeing their cursors if you follow them
@tanmoyopenroot
added a keyboard shortcut Ctrl + Backtick to toggle opening and closing the
console
Thanks to
@jamime,
sandboxes can now consume packages that use an npm alias
Fixes
Fixed an alignment issue with the Share icon
@tanmoyopenroot
made the template icon popup close upon selecting the icon
We now correctly reset live counters after a sandbox is changed
Fixed up an issue impacting live throttling when editing a sandbox solo
Selections are now more stable in live sessions
Fixed React Refresh HMR for class components
You can now fork a sandbox twice again
Fixed creating private github repos from private sandboxes
Improved stability of reconnects in CodeSandbox Live
Live 2.0
We're working to redefine how folks collaborate on code. This upgrade to
CodeSandbox Live delivers a step-change in collaboration on CodeSandbox, making
it easier for teams to code together and lays the groundwork for further
improvements.
Features
All sandboxes are now live by default
Added a new access control panel to invite others and set permissions
Avatars of team members and guests appear in the editor
Follower mode now supports scrolling
A Snappier, New Look Editor
When chatting with folks in the CodeSandbox community, there’s one word that
comes up more than any other: Speed! So we've evolved the design of the editor
and undertaken a range of performance optimization tasks so that the editor now
loads more quickly, and feels more responsive.
Features
Added progressive loading of each part of the editor instead of waiting for
everything to be ready upfront
Re-designed the activity bar and all component parts
Updated the navigation bar design
Added a new default theme: CodeSandbox Black
Fixes
Performance improvements
Introducing Template Universe
Template Universe enables you to share and use templates created by the
community and makes it possible for the maintainers of frameworks and libraries
to add official ones too.
Features
New 'Explore Templates' section added to Create Sandbox screen curating
community-created and official templates into categories
Added ability to search templates by keyword on the Create Sandbox screen
You can now bookmark templates you find useful for quick access in future
Fixes
We removed sandbox creation limits for all users
Features
Stable support for CodeSandbox Containers, which execute the code you write
on a server instead of in the browser.
You can now add environment variables to a container
Fixes
Made infrastructure changes to deliver performance improvements to containers.
Increased container creation limits
Trashed sandboxes no longer count towards sandbox creation limits
Features
VS Code is now the core editor in CodeSandbox, enabling keybindings, user
snippets, commands, editor grid view and more
We now support some VS Code extensions, including native TypeScript type
checking, automatic import of variables, refactoring support, and VIM mode
Added a devtool view with tabs for tests and console
A new design, including menu and status bar and UI changes
Added GraphQL, styled-components and yarn.lock syntax
highlighting/autocompletions
Fixes
VS Code elements like the configuration UI and the image viewer now work
We no longer hide the activity bar when viewing a sandbox you don't own
Features
Thanks to @xyc, the console now supports multiline
commands and syntax highlighting
We now support configuration files for Prettier, Babel, CodeSandbox, and
others
Added a UI for some configuration files, like sandbox.config.json, to make
changing settings more intuitive
Community and official Babel plugins are now supported
@gautamarora added native Jest integration
for running tests within the editor
Hot Module Reloading is available in previews
Features
You can now commit and open PRs on GitHub as well as create repositories from
a sandbox
We've added support for static file hosting so you can use binary assets
within your projects
Features
We now use the Monaco editor adding support for IntelliSense, so you can use
Peek Definition, Go to Definition, Find all References, etc.
ESLint, Prettier, and Emmet.io are now built into the editor
For React, we've added support for react-error-overlay for clear error
descriptions and fix suggestions
You can open the editor and the preview while offline
It's possible to open sandbox previews in a new window
Fixes
The packager has been rewritten resulting in significant performance
improvements
