Easily, instantly, and all within your familiar VS Code environment.
Live Code Playground
Prototype, play, and experiment with your web development ideas. No setup required.
Create your sandbox with the command:
Start coding in the provided text editors.
As you type, the results update in the live preview.
Save Your Work
In the Explorer view, you can use the "Download" context option to save files, or the sandbox itself as a folder.
Sandbox: Reopen Editors
- Accidentally close an editor or move the editor grid around? You can restore the editors back to normal with this command.
Sandbox: Close Sandbox
- The sandbox can be closed and removed from your workspace with this command.
Using the VS Code provided Webview Developer Tools has some quirks. The details are documented here.
- Elements: Your sandbox DOM is contained in the "active-frame"
- Console: To evaluate code in your sandbox, switch to the "active-frame" option using the top-left dropdown. It's set to "top" initially.
- Sources: For convenience, the script with your JS code is mapped as
script.js in the file tree and in the "Open file" selector.
In the Explorer view, using the "Download" context menu item on the workspace folder causes the Windows File save dialog to open instead of a Folder save dialog.
- This incorrectly saves the folder with a default ".txt" extension.
- The download still succeeds, but it will likely append the extension to the folder name.
Initial release of Sandbox!
Change default styles to not conflict with user's