SVAR UI v.2.0: Advanced UI Components for Svelte 5

If you're developing with Svelte 5 and looking for an advanced, editable data grid, a Gantt chart component, or a library of ready-to-use form controls, the recent release of SVAR Svelte v2.0 delivers all these features using the latest Svelte 5 syntax. You can now enjoy smaller bundle sizes, cleaner code, optimized APIs, and improved performance.

We've already written about our Svelte 5 migration experience on our blog, so you can refer to this post if you're interested in all the details of the upgrade process. It describes how we approached the migration, what choices we've made, and how we dealt with the challenges of adopting the new patterns of $effect and $derived.

Get the Update

You can get version 2.0 of open-source SVAR components from our GitHub page or install the latest version via NPM:

SVAR Core Components:

npm install wx-svelte-core
npm install wx-svelte-menu
npm install wx-svelte-toolbar
npm install wx-svelte-uploader

Advanced SVAR Widgets:

npm install wx-svelte-grid
npm install wx-svelte-gantt
npm install wx-svelte-filemanager

Major Changes in the API to Comply with Svelte 5

While most properties of SVAR components remain unchanged during the migration to Svelte 5, there are two significant updates to note.

The first one is related to event handling syntax. Svelte 5 has deprecated the old event handling syntax, and SVAR components have adopted this change as well. In earlier versions, events were bound using the on: syntax, such as:

<Text on:change={handler} />

With the latest update, this has been changed to more straightforward syntax:

<Text onchange={some} />

Another major change in API concerns Svelte DataGrid, Gantt, and File Manager components. In version 1.x their APIs could be accessed like this:

<Grid bind:api={api} />

In Svelte 5, this approach is discouraged. Instead, you should now use the bind:this construct, as shown below:

<Grid bind:this={api} />

What Else is New in Version 2.0

With version 2.0, these SVAR UI components were updated:

Svelte Core UI Library: Our set of form controls and basic UI components has been enhanced for better API consistency, improved usability, and alignment with modern development practices.

A comprehensive update introduces a Clear button across input-based controls, standardizes API of dropdowns and selectors with consistent id and label structure, and improves event handling with change events containing the same structure across all controls. The update also includes component renaming for better clarity and enhanced window control events, including oncancel and onconfirm triggers.

SVAR Svelte DataGrid The DataGrid’s API has been streamlined for improved clarity, ease of use, and to eliminate unnecessary duplications in the code, simplifying actions and enhancing row selection management.

Join the Community

Whether you're already using SVAR or discovering it for the first time, version 2.0 is a great opportunity to explore our library of powerful UI components. Designed for modern Svelte 5 applications, SVAR components combine efficiency with ease of use, helping you build rich, interactive interfaces with minimal effort.

We always welcome your feedback, so feel free to share your experiences, report bugs, or suggest features on our GitHub page or community forum. If you enjoy using SVAR, don’t forget to give us a star and spread the word among fellow developers.

Happy coding with Svelte 5!