The template documents itself.
A full-width SDK reference for developers using Liquiddy. Search components, copy markup, call the public JavaScript API and use Theme Lab to generate your own token set.
Use Liquiddy without a build step
Liquiddy is plain HTML, CSS and vanilla JavaScript. Include the stylesheet and script, then compose components from the documented classes and data attributes.
<link rel="stylesheet" href="assets/css/liquiddy.css"> <script src="assets/js/liquiddy.js"></script>
The core visual primitive
Use .glass for elevated, blurred surfaces and .glass-soft for lightweight inline surfaces. Radius, blur and opacity are controlled by root variables.
<section class="card glass"> <h2>Glass card</h2> <p>Your content</p> </section>
Timed, persistent and semantic feedback
Call Liquiddy.toast() from any integration. duration is milliseconds. Set it to 0 for a persistent toast that remains until dismissed.
Liquiddy.toast({
title: 'Profile saved',
message: 'Your changes are live.',
type: 'success',
duration: 3200
});Control overlays from JavaScript
Existing markup can be opened by selector through the public SDK. The same API works after you connect Liquiddy to a backend framework.
Liquiddy.modal.open('#confirmModal');
Liquiddy.modal.close('#confirmModal');
Liquiddy.drawer.open('#filters');Dependency-free canvas charts
Mount a chart with labels and one or more series. Hover crosshair, active points and glass tooltips are included automatically.
Liquiddy.chart.mount('#revenue', {
labels: ['Mon','Tue','Wed'],
max: 100,
series: [{
name: 'Revenue',
values: [38, 62, 81],
colorVar: '--primary'
}]
});Drag events and select ranges
Calendar event blocks are draggable between dates. On desktop, dragging across empty date cells creates a visual date range.
Liquiddy.calendar.refresh(); // Re-scan the calendar after rendering events.
Product viewer, cart and checkout
Open products, add items and inspect cart data from your own app code. Checkout reads the same local cart state in this static demo.
Liquiddy.commerce.open('orbit-headphones');
Liquiddy.commerce.add('orbit-headphones', 2);
Liquiddy.commerce.cart();
const items = LiquiddyCommerce.getCart();Replace browser-default form chrome
Liquiddy progressively enhances number, range, color, date, time and datetime-local fields while keeping the original input value available to your forms and backend code. Custom selects are opt-in with data-liquiddy-select.
<input class="input" type="number" min="1" max="20" value="4"> <input class="input" type="date" value="2026-08-17"> <input class="range" type="range" min="0" max="100"> <input data-liquiddy-color type="color" value="#7c8cff"> <select class="select" data-liquiddy-select>...</select> // after adding fields dynamically Liquiddy.controls.refresh(container);
Switch themes programmatically
Theme preference is persisted in localStorage. The light-mode parity layer keeps glass, forms, modals and semantic colors readable.
Liquiddy.theme.set('light');
Liquiddy.theme.set('dark');
Liquiddy.theme.toggle();Build a new identity from root variables
The visual system is token-driven. Change primary color, cyan accent, blur, radius and surface values without rewriting each component.
:root {
--primary: #7c8cff;
--cyan: #5ee7f7;
--blur: 26px;
--radius-xl: 28px;
}Public JavaScript surface
Small methods intended to stay stable when the template is connected to real application code.
Liquiddy.toast(options)Create semantic toast feedback with duration control.Liquiddy.theme.toggle()Switch between light and dark modes.Liquiddy.modal.open(selector)Open a modal by CSS selector.Liquiddy.drawer.open(selector)Open a drawer/backdrop surface.Liquiddy.tabs.select(root,index)Select a tab in a tab group.Liquiddy.chart.mount(canvas,config)Mount an interactive canvas chart.Liquiddy.calendar.refresh()Re-bind calendar drag/range behavior.Liquiddy.controls.refresh(root)Enhance newly-rendered number, range, color and temporal controls.Liquiddy.commerce.add(sku,qty)Add a product to the demo cart.