CSS Box Playground

An interactive, drag-and-resize CSS playground that runs directly inside VS Code. Build up nested boxes, tweak box-model/flex/border/shadow/animation properties with live controls, and copy out the generated CSS — all without leaving the editor.

Usage

1. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
2. Run CSS Box Playground: Open.
3. A panel opens with the playground. Click boxes to select them, drag to move, drag the bottom-right handle to resize, and use the controls panel to edit styles. Use the Copy button to grab the generated CSS, or Download HTML to export a standalone file.

Running from source (development)

npm install

Then press F5 in VS Code (with this folder open as the workspace) to launch an Extension Development Host with the extension loaded. Run the CSS Box Playground: Open command there.

Packaging into a .vsix

npm install -g @vscode/vsce
vsce package

This produces a css-box-playground-1.0.0.vsix file. Install it via:

• Command Palette → Extensions: Install from VSIX..., or
• code --install-extension css-box-playground-1.0.0.vsix

Notes

• All playground logic lives in media/panel.html, unchanged from the original standalone tool, and is rendered inside a VS Code Webview.
• src/extension.js registers the cssBoxPlayground.open command and injects a Content-Security-Policy suited to the webview sandbox.