Type Safety

Liquid Glass is written in TypeScript and provides comprehensive type definitions for all its exports. This ensures a robust development experience with autocompletion and compile-time error checking.

Typed Handles

Every factory function (like createLiquidButton, createLiquidSwitch, etc.) returns a typed handle object. These handles inherit from common interfaces like LiquidGlassHandle, but also include component-specific properties and methods.

import { createLiquidButton, LiquidButtonHandle } from '@avenra/liquid-glass';

const btn: LiquidButtonHandle = createLiquidButton('#save-btn', {
  label: 'Save'
});

// TypeScript knows that setLabel exists on btn
btn.setLabel('Saving...');

Typed Events

The library uses a custom EventEmitter base class that provides typed event subscriptions via .on(), .off(), and .once().

btn.on('click', (event: MouseEvent) => {
  console.log('Clicked at', event.clientX, event.clientY);
});

const slider = createLiquidSlider('#volume');
slider.on('input', ({ value }: { value: number }) => {
  // value is correctly typed as a number
  console.log('Volume:', value);
});

By providing full generic typing for events, Liquid Glass helps you avoid common pitfalls when working with DOM and custom component events.