@alphinex/theme-builder

Embeddable, no-code editor over @alphinex/theme's semantic tokens. Live preview against real ui components, export as CSS custom properties or a ThemeDefinition JSON.

Usage

import { ThemeBuilder } from "@alphinex/theme-builder";

function BrandSettingsPage() {
  return (
    <ThemeBuilder
      onExport={(format, value) => {
        if (format === "json") {
          // Persist the ThemeDefinition however the app wants — a backend call,
          // localStorage, a design-system repo PR, etc. This package has no
          // storage opinion of its own.
          void saveBrandTheme(JSON.parse(value));
        } else {
          void navigator.clipboard.writeText(value);
        }
      }}
    />
  );
}

useThemeBuilder is the headless layer underneath, if you want to build a custom editing UI.

How the live preview stays isolated

The preview panel renders its own <ThemeProvider> scoped via the target prop to the preview <div> itself, not document.documentElement — editing a token never leaks CSS custom properties onto the rest of the host page, even though <ThemeBuilder> is meant to be embedded inside an app that already has its own top-level <ThemeProvider>.

Known limitations

• Font family is not editable — falls back to the primitive default. Add if a real need surfaces.
• Color fields accept any string (hex, rgb(), a CSS variable reference, ...) — there's no color-picker widget, just a swatch preview and a text field, since SemanticColorTokens values aren't constrained to hex.