Your app at any size,
pixel perfect. One HTML tag.
Draw your interface once, at one fixed design size. MagicBox scales the whole surface to fit whatever space it is given, aspect locked, all the way down to a credit card and all the way up to a wall display. Nothing reflows, nothing wraps, nothing breaks. Because nothing ever relayouts.
Free for personal and non‑commercial use, forever. Works with React, Vue, Svelte, Blazor, Rails, plain HTML: it is a standard custom element, so it is just a tag.
Drag the bottom‑right corner, or pick a size. That is a full dashboard: top bar, sidebar, four stat cards, a chart, a live feed and a data table. It never reflows.
Responsive design is the wrong tool for a dense app.
Breakpoints are brilliant for documents. For a control panel, a kiosk, a dashboard
or an embedded widget, they mean maintaining four layouts that all drift apart.
MagicBox takes the other road, the one WPF took with Viewbox: keep one
layout and scale the picture.
REFLOW The usual way
Shrink the window and the layout rearranges itself into something else.
- Four breakpoints, four layouts, four sets of bugs.
- Your careful composition becomes a scroll column nobody designed.
- Every new feature has to be re‑solved at every width.
- At small sizes you get five huge letters and a scrollbar.
SCALE The MagicBox way
Shrink the window and the whole interface gets smaller, exactly as drawn.
- One layout. One design size. One thing to maintain.
- What you drew is what ships, at every size, forever.
- New features are drawn once and they are done.
- At credit‑card size it is tiny, but it is still your app.
Aspect locked by default
Constrain one axis and the other follows your design ratio exactly: a true uniform scale with zero distortion. Constrain both and it fills the space, stretching a little, like a photo. Your call, one attribute.
Nothing to wire up
No CSS to import, no JavaScript to call, no build step, no dependencies. Drop in one script tag, use the element, size it however you already size things: width, flexbox, grid, Bootstrap columns.
Framework safe
Your markup stays yours. Children project through a slot and are never moved or cloned, so React, Vue, Svelte and Blazor keep full ownership of the DOM they rendered. Events, refs and state all keep working.
One observer, no polling
A single ResizeObserver per element catches every source of a size
change: window resize, a flex sibling growing, a panel collapsing, code setting
a style. There is no resize loop and no timer anywhere in it.
Text stays text
It is a CSS transform, not a canvas and not an image. Text stays selectable and searchable, inputs stay focusable, links stay clickable, SVG stays crisp at any scale. Screen readers read the real DOM.
Small and honest
About 11 kB minified, no dependencies, no telemetry, no network calls. It runs on your customers' sites, so it reports nothing to anyone, ever. Read the source you receive, it is one file.
Take the handle. Try to break it.
This is the same dashboard from the top of the page, at its design size of 1280 × 800, in a box you can squash into any shape. Watch the readout: the layout inside never changes, only the scale does.
This one has lock-aspect on: the handle keeps the 16:10 shape it was
drawn at, so it can only ever get bigger or smaller, never distorted. Drop that one
attribute and it squishes freely, like the demo at the top of the page.
Two lines. That is the whole integration.
- Drop in the script One file, self hosted, no CDN and no package manager required. It registers a custom element and gets out of the way.
- Wrap your app in the tag Tell it the size you designed at. Your existing markup goes inside, untouched, and is laid out at exactly that size forever.
- Size it like any other element Give it a width, put it in a flex row, drop it in a grid cell. It scales to whatever it is given. There is no step four.
<!-- 1. one script, anywhere in the page --> <script src="magic-box.min.js"></script> <!-- 2. wrap what you already built --> <magic-box design-width="1280" design-height="800"> <!-- your entire app, exactly as you drew it --> <div class="dashboard"> … </div> </magic-box> <!-- 3. size it however you already size things --> <style> magic-box { width: 100%; } /* height follows the ratio */ </style>
// attributes, all optional resizable // a real drag handle on the corner center‑resize // stay centred through the drag lock‑aspect // the handle keeps the shape bounded // never outgrow the parent hud // the debug pill, for development license="MB1..." // your commercial licence key // methods and events box.setSize(640, 400); box.fitParent(); box.addEventListener('magic-resize', (e) => { // { width, height, scaleX, scaleY } });
Sensible defaults, not a control panel
The default behaviour is the one you want: give it a width and the height follows your design ratio, giving a perfect undistorted scale. Everything past that is a single attribute you opt into, and you can ignore all of them.
There is no configuration object, no theme system and no plugin API. It does one job. That is the feature.
Buy it once. It is yours.
A perpetual licence for the version you buy, plus a year of updates. No subscription, no seat counting, no runtime that phones home. Free for personal and non‑commercial projects, always.
Personal
Personal projects, learning, prototypes, anything you are not paid for.
- The complete component, nothing withheld
- Unlimited personal projects
- Silent on localhost and file://
- No licence key needed
Single domain
One commercial site or product. The usual choice for a client build.
- Commercial use on one domain
- All subdomains included
- Perpetual, plus 12 months of updates
- Signed, domain‑locked licence key
- Email support
TODO: point at the real Lemon Squeezy checkout
Unlimited
Agencies and product teams: every domain you own or build for.
- Unlimited domains and projects
- Client work and redistribution in your apps
- Perpetual, plus 12 months of updates
- Priority support
TODO: point at the real Lemon Squeezy checkout
What it is, and what it is not.
Is this a responsive layout library?
No, and that is deliberate. It does not reflow anything, it does not rearrange anything and it has no breakpoints. It takes the layout you drew and changes its size. If what you want is a layout that becomes a different layout on a phone, you want CSS media queries, not this.
What happens if the shape does not match my design?
Your choice. Constrain one axis only and the other follows your design ratio,
which gives a perfect undistorted scale. Constrain both and it fills the space
exactly, stretching slightly, the way stretching a photo looks. A small amount
of skew is usually invisible and beats letterbox bars. Add
lock-aspect if you never want any.
Does the text get blurry?
No. It is a CSS transform on live DOM, not a bitmap. The browser rasterises text at the final scale, so it stays crisp, selectable, searchable and readable by screen readers. Inputs still focus and links still click. SVG and borders scale cleanly too.
Which browsers?
Every current browser: Chrome, Edge, Firefox and Safari, desktop and mobile. It
relies on custom elements, shadow DOM, ResizeObserver and CSS
transforms, all of which have been baseline since 2020. There are no polyfills
and no transpilation.
Will it work with my framework?
Yes. It is a standard custom element, which every framework treats as ordinary HTML. Your children are projected through a slot and are never moved or recreated, so React, Vue, Svelte, Angular and Blazor keep complete ownership of their own DOM, refs and event handlers.
Does it phone home?
Never. The library makes no network requests of any kind, sets no cookies and collects nothing. Licence keys are verified entirely in your visitor's browser using an embedded public key, offline. It runs on your site, so it answers to you.
What does an unlicensed commercial site actually see?
One quiet console.info line, once, mentioning that commercial use
needs a licence. That is the whole enforcement. It never blocks, never overlays,
never degrades and never breaks a page. Your users will not see anything.
What exactly am I buying?
A perpetual commercial licence and a signed licence key locked to your domain, plus the minified library to self host. You are not renting anything and there is no service to go down. Twelve months of updates are included and the version you have keeps working forever.
Stop maintaining four layouts.
Draw it once, at the size you actually designed. Let it be that, everywhere.