Open Web Components glassmorphism

Zero-dependency web component library. Drop in one script tag.

Theme

Keyboard shortcuts

Show this overlay?

Go to o-button1

Go to o-panel2

Go to o-toast3

Go to o-toggle4

Go to o-table5

Go to o-search6

Go to combined demo7

Fire random toastT

Close this overlayEsc

o-button

<o-button>Click me</o-button> // Event btn.addEventListener('o-click', () => console.log('clicked'))

o-panel

Draggable + snap 20px

Grab ⠿ to move. Snaps to 20px grid.

Resizable panel

Drag the right / bottom / corner handles.

Drag + snap 40px + resize

All features combined.

Static panel

No attributes.

<o-panel>Static content</o-panel> <o-panel move>Draggable</o-panel> <o-panel move snap="20">Snaps to 20px grid while dragging</o-panel> <o-panel resize>Resizable (right / bottom / corner handles)</o-panel> <o-panel move snap="20" resize>All combined</o-panel>

o-panel — attribute playground

<o-panel>Content</o-panel>

o-toast

Programmatic toast notifications. Call window.toast(message, type?, options?) after loading the CDN bundle.

// type: 'success' | 'error' | 'warning' | 'info' (default: 'info') toast('File saved!', 'success') toast('Connection failed', 'error') toast('Long message', 'info', { duration: 8000 })

o-toggle

Segmented control toggle. Pass options as a comma-separated string or array. Fires o-change with { value, index }.

<o-toggle options="Day,Week,Month" value="day"></o-toggle> // Or set via JS toggle.options = [{ label: 'Day', value: 'day' }, { label: 'Week', value: 'week' }] toggle.value = 'week' // Event toggle.addEventListener('o-change', e => console.log(e.detail)) // { value, index, prev }

o-table

Sortable, resizable, glassmorphic data table. Supports column persistence and optional row selection.

<o-table selectable></o-table> table.columns = [ { key: 'name', label: 'Name', width: 160, sortable: true }, { key: 'score', label: 'Score', width: 90, sortable: true, minWidth: 60 }, ] table.data = [{ name: 'Alice', score: 92 }, ...] // Events table.addEventListener('o-sort', e => console.log(e.detail)) // { col, dir } table.addEventListener('o-row-select', e => console.log(e.detail)) // { selected: row[] } // Attributes // storage="local|session" storage-key="my-key" — persists sort + column widths // selectable — adds checkbox column

o-search

Glassmorphic search bar with built-in filtering and optional dropdown. Add no-dropdown to use it as a pure filter input.

<o-search placeholder="Search..." no-dropdown></o-search> search.data = [{ name: 'Apple' }, { name: 'Banana' }] search.searchKeys = ['name'] search.valueKey = 'name' // fills input on select search.renderItem = item => `<b>${item.name}</b>` // custom dropdown row // Custom filter (overrides searchKeys) search.filterFn = (query, item) => item.name.startsWith(query) // Events search.addEventListener('o-input', e => console.log(e.detail)) // { query } search.addEventListener('o-results', e => console.log(e.detail)) // { query, results } search.addEventListener('o-select', e => console.log(e.detail)) // { item, query }

Search + Table + Pagination

Live example combining o-search, o-table (selectable), o-toggle for pages + page size, and o-button for prev/next.

Kitchen sink

All components inside a single draggable + resizable o-panel — a practical multi-component composition.