Logo Svelte Widgets

Svelte 5 · TypeScript · MIT v1.8.0

Components, attachments, and tools

Accessible, keyboard-friendly components, element attachments, and documentation tools for Svelte 5.

npm install svelte-widgets
View example

Demo categories

Component and attachment guides with working examples and API details.

Forms and inputs

Choose values, collect files, and organize settings.

Includes MultiSelect recipes for async loading, forms, grouping, and custom rendering.

Navigation and search

Help users move through pages, commands, and trees.

Command palettes, site search, heading navigation, and page layout essentials.

Dialogs and overlays

Present dialogs, contextual actions, and notifications.

Confirmations, prompts, action menus, and queued notifications with dismissal and focus handling.

Data and layout

Inspect data, arrange content, and show application state.

Code and documentation

Write interactive documentation and edit code.

Live code examples, checked snippets, content manifests, and scientific references.

Markdown API

Element attachments

Add reusable behavior to ordinary elements.

MultiSelect example

Select options in MultiSelect with the mouse or keyboard. Expand the code to view the source.

  • Svelte

Selected: Svelte

svelte<script lang="ts">
  import { MultiSelect } from 'svelte-widgets'

  const options = [`Svelte`, `TypeScript`, `CSS`, `Markdown`, `JavaScript`]
  let selected = $state([`Svelte`])
</script>

<label for="home-languages">Your toolkit</label>
<MultiSelect
  id="home-languages"
  {options}
  bind:value={selected}
  placeholder="Choose your languages…"
/>
<p aria-live="polite">Selected: {selected.join(`, `) || `None yet`}</p>

Explore MultiSelect and its recipes →

Guides and APIs

Markdown documentation Markdown with Svelte, syntax highlighting, math, live examples, and validated links. Package API reference Headless helpers for storage, themes, clipboard, search, canvas, CSV, and URL state. Full export reference in the README. Data workbench A working data explorer combining file loading, JSON inspection, progress, and resizable panels.