css-var-bind - Interactive Demo

Interactive Demo

This entire page is styled using CSS custom properties. Use the control panel in the top-right corner to adjust the design in real-time. Every change you make demonstrates css-var-bind in action.

Adjust colors, typography, spacing, and layout
See instant updates across the entire page
Click the
That's the one!
icons for control descriptions
Click "Reset" to restore defaults

Features

A lightweight web component that binds HTML input elements to CSS custom properties (variables).

Zero dependencies, minimal footprint
Works with range, number, color, text inputs
Automatic value syncing between inputs
Flexible scoping strategies (closest, global, self)
Simple, declarative API

Installation

npm install css-var-bind

Then import in your JavaScript:

import 'css-var-bind';

Basic Usage

Wrap any input element with <css-var-bind> and specify the CSS variable name.

<css-var-bind variable="--scale" target=":root" strategy="global">
  <input type="range" value="1" min="0.5" max="2" step="0.1">
</css-var-bind>

The component automatically updates the CSS variable when inputs change, syncs values between multiple inputs, and applies units to values.

API Reference

Attributes

Attribute	Required	Default	Description
`variable`	Yes	-	CSS custom property name (must start with `--`)
`unit`	No	`""`	Unit to append (e.g., `px`, `rem`, `%`, `deg`)
`target`	No	-	CSS selector for the element to set the variable on
`strategy`	No	`"closest"`	How to resolve the target: `"closest"`, `"global"`, or `"self"`

Strategy Options

closest (default): Finds the nearest ancestor matching the target selector
global: Uses document.querySelector(target) for global lookup
self: Sets the variable on the component itself (ignores target)

Examples

Color Picker

<css-var-bind target="body" variable="--bg-color">
  <input type="color" value="#b4d455" />
</css-var-bind>

Scoped to Ancestor

<div class="card">
  <css-var-bind variable="--card-padding" unit="rem" target=".card">
    <input type="number" min="0" max="5" value="2" />
  </css-var-bind>
</div>

Self-Binding

<css-var-bind variable="--opacity" strategy="self">
  <input type="range" min="0" max="1" step="0.1" value="1" />
</css-var-bind>