Even though there isn’t a native Svelte Kendo UI library, you can still use one of the Kendo UI component libraries with Svelte.
Progress Kendo UI does not have a Svelte version by default. It specializes in Angular, Vue, React and jQuery. However, that does not mean you Svelte fans out there are out of luck! JavaScript is just JavaScript, and there are work arounds to meet different needs.
TL;DR
You can use Kendo UI for jQuery in any JavaScript framework, or you can use Astro to mix components from multiple frameworks (React, Vue, Angular). The jQuery version is not perfect for server-side rendering, but it can work in pure Svelte, while Astro can work wonders with any framework component.
✔️ Svelte with Kendo UI for jQuery
Svelte allows you to import any JS you want. It is just JavaScript.
Create a New SvelteKit Project
Install Tailwind and any other SvelteKit options you need.
Install Packages
with types:
Activate Kendo UI
Get your key ready and follow any other activation instructions.
Create a jQuery Declaration File
Put it in lib/types/kendo-ui-module.d.ts or wherever makes sense.
- jQuery types do not work as expected on the client without it.
Dynamically Import jQuery on the Browser
This allows you to load Kendo UI dynamically. Kendo UI for jQuery cannot run on the server, as it needs window objects, etc.
Handle CSS
Make sure your global layout.css or app.css file contains tailwind and the correct Progress theme CSS.
Load a Grid Element
- We load Kendo UI in onMount so that it won’t have problems loading on the server.
- We use a $state signal to show a loading skeleton.
- jQuery and kendoGrid are dynamically loaded, and then the products are added to the grid.
Create a Loader
Since the component takes a second to load, we want to show a loading skeleton in the interim. Notice we use kendo style classes to match our grid.
We could equally have used a spinner.
✔️ Kendo UI in Astro
Using is by far the best approach. You are not building in Svelte, but you can use any other framework with Astro, and have everything else built with Svelte.
Install Astro
Create a new Astro project.
- Don’t forget to add Tailwind.
Choose Your Kendo UI Framework
- KendoReact
- Kendo UI for Vue
- Kendo UI for Angular
Install the Svelte Astro Plugin:
Install the proper Astro plugin:
- Angular (unofficial)
For this demo, I chose Vue and I copied all the Kendo UI for Vue grid components in Astro.
Install Dependencies
Configure CSS
Put in styles/global.css.
Activate Your Kendo UI License
- KendoReact Setup
- Kendo UI for Vue Setup
- Kendo UI for Angular Setup
📝 You can also use more than one or all of them with Astro! (Progress offers a DevCraft bundle, if you code in more than one framework.)
Create Svelte Component
We want to mix our components, so we create a Svelte Component that can accept any other component as a child.
This component has a simple button counter that uses Runes.
Create our Grid Component
The Grid component is broken up in several files and is copied directly from the Grid Demo.
Load Vue with Svelte
We create our Astro page under pages/index.astro.
- Notice we are importing both a .svelte and a .vue component in the same file!
- We use client:load to show that the component is dynamic.
- Grid is a child of Panel.
And we have Kendo UI for Vue and a Svelte Component in one!
Resources
Try Kendo UI
All the Progress Kendo UI component libraries come with a free 30-day trial so you can explore them yourself.
Try Now
