maptiveui/tunable
v0.1 · maptiveui.dev coming soon

Live-edit CSS on your React componentswithout leaving the browser.

Wrap any element in <Tunable>, open a floating glass panel in dev mode, drag sliders and pick colors — then copy the final CSS or Tailwind into your code.

Install the packageTry it liveStar on GitHub
React 17+
~10 kB gzipped
Dev-only by default
MIT
What this is

A dev-only tool for tuning component styles directly in your browser. Wrap a component in <Tunable>, define which CSS properties you want to tweak, and get a floating control panel that edits the element live. When it looks right, copy the final CSS or Tailwind classes and paste them into your code.

What this isn't
  • Not a visual page builder
  • Not a design system
  • Not shipped to your end users (gated to NODE_ENV === "development" by default)
01 · Install

One package. Dev dependency only.

Peer deps are React 17+ and React DOM 17+. No runtime configuration, no build-step plugins. Install, import, wrap.

bash
npm i -D maptiveui-tunable
react ≥ 17
react-dom ≥ 17
no peer config
02 · Five-line example

Wrap it. Tune it. Ship it.

In dev mode you'll see a ◆ HERO badge appear when you hover the section. Click it to open the tune panel.

1
Import Tunable and wrap any element.
2
Declare which CSS properties you want to tweak.
3
Run your app — the panel only appears in dev.
app/hero.tsx
import { Tunable } from "maptiveui-tunable";

<Tunable
  label="Hero"
  controls={{
    padding: { type: "range", min: 0, max: 80, default: 24 },
    borderRadius: { type: "range", min: 0, max: 32, default: 12 },
    background: { type: "color", default: "#818cf8" },
  }}
>
  <section>My hero section</section>
</Tunable>
03 · Playground

Try it yourself — right here.

This is a real <Tunable> instance with enabled forced on. Your tweaks persist between reloads via persistKey.

Hover a card below and click the ◆ badge — or Alt-click the element.
Loading…
1. Open
Click the ◆ badge on hover, or Alt-click the element.
2. Tweak
Drag sliders, pick a color, toggle switches. Changes apply live.
3. Copy
Hit Copy CSS or Copy TW — paste into your source.
04 · How to drive it

Keyboard-first, mouse-friendly.

Every control is reachable from the keyboard while a panel is open. Drag the header to reposition; drag the bottom-right corner to resize.

Open the panel

Click the floating ◆ badge on hover, or hold Alt/Option and click the element.

Work in the panel

Drag sliders, pick colors from the HSV picker (alpha, eyedropper, presets), toggle switches, choose from dropdowns.

Keyboard shortcuts
  • Esc
    Close the panel
  • ⌘Z
    Undo (or Ctrl + Z)
  • ⌘⇧Z
    Redo (or Ctrl + Shift + Z)
  • AltClick
    DevTools-style inspect & open panel
Export your work

Copy CSS → clipboard as a ready-to-paste CSS block. Copy TW → Tailwind utility classes (falls back to arbitrary-property syntax when needed).

05 · Persist across reloads

Pick up where you left off.

Pass a persistKey and values are saved to localStorage under __tunable_v1:<key>.

tsx
<Tunable label="Hero" persistKey="hero-section" controls={{ ... }}>
06 · Controls

Four building blocks.

Every control writes to a CSS property. Omit maps and the object key is used directly.

Numeric slider mapped to a CSS property.

ts
{
  type: "range",
  min: 0,
  max: 100,
  step: 1,
  default: 20,
  unit: "px",
  maps: "padding",
}
The maps field

Specifies which CSS property a control writes to. If omitted, the object key is used directly. So { padding: { type: "range", ... } } writes to padding; { heroPad: { type: "range", maps: "padding" } } writes to padding but shows "Hero Pad" in the UI.

Special range mappings

When a range's maps is one of these keys, its value composes into richer CSS:

maps valueEffect
depth / boxShadowComposes a realistic drop shadow with spread, blur, offset
blur / backdropBlurMaps to backdrop-filter: blur(...)
glowComposes a colored outer glow
07 · API reference

<Tunable> props

PropTypeDefaultDescription
childrenReactNode—Element(s) to wrap
controlsTunableControls—Control definitions (required)
labelstringundefinedName shown in the panel header and hover badge
enabledbooleanNODE_ENV === "development"Whether the tool is active
panelPosition"right" | "left" | "bottom""right"Where the panel appears relative to the element
collapsedbooleanfalseStart with panel collapsed
asElementType"div"Wrapper element tag (span, tr, etc.)
persistKeystringundefinedIf set, saves values to localStorage under this key
08 · FAQ

Frequently asked.

If you have a question that isn't here, open an issue on GitHub — we'd rather add it to the docs than answer it twice.

09 · Roadmap

Things in the air.

01

Theme-aware Tailwind output (p-16 instead of p-[64px] when your config allows)

02

Save-to-source-file via a build plugin (Vite / Next)

03

Preset control bundles (container, text, button, …)

04

Component-library-specific adapters (maptiveui-tunable-shadcn, etc.)

05

A full interactive site at maptiveui.dev

Ready to tune?

Install, wrap a component, hit save. Star the repo to follow updates as the rest of the Maptive UI family lands.

npm install Star on GitHub