AlexanderKaan/uisandbox

Restyle your app without rebuilding it. Your built web app, 1:1, with its own knobs. MIT.

About uisandbox

Play with your real app's design, live. Restyle your app without rebuilding it — drop the build, turn the knobs, watch it follow 1:1, export the patch. Test your design on the real thing.

uisandbox.org · npm: uisandbox-mcp · MCP registry · MIT

Or drop a zip on uisandbox.org — no build at hand? Try a sample under the drop zone (the Bootstrap docs, a VitePress site, an admin dashboard). Or, in Claude Code: /plugin marketplace add AlexanderKaan/uisandbox → /plugin install uisandbox@uisandbox and say "open this app in UISandbox".

1. Bring the build — three ways in: a zip of dist/, build/, out/ (or a whole repo with the build inside); a folder (a build renders, a source folder is read for the knob stand); a public GitHub or GitLab repo URL (fetched as a zip through a same-origin route — the one thing that leaves the tab, see notes/security.md). While it works, the door shows the stages with their numbers. Otherwise nothing leaves the tab: files are read in the page and served to the frame by a service worker on this origin. 2. See it 1:1. Every colour, radius, font, size, spacing, line-height, letter-spacing, weight, border-width, duration, gradient angle and shadow literal in your CSS becomes a variable holding the very same value, so the page renders exactly as it was — runtime styles too (style="" set by JS, your framework appends, insertRule/replaceSync from styled-components, Emotion, Lit, Ant's cssinjs; CDN stylesheets through a same-origin proxy; nested same-origin frames such as Storybook's). 3. Turn the knobs. Brand, and the colour families your CSS actually contains

From the project README.

Maintaining this server?

Add the radar badge to your README — it shows your project was picked up by MCP Radar and links to this page:

[![On MCP Radar](https://mcp.liqiwa.com/badge.svg)](https://mcp.liqiwa.com/s/AlexanderKaan--uisandbox.html)

Related MCP servers