How to Leverage SvelteKit, Skeleton, and Chart.js for Rapid Prototyping and Efficient Execution

Author:Murphy | View: 24231 | Time: 2025-03-22 23:08:21

Svelte and SvelteKit are a rapidly growing web development alternative for the React/Next and Vue/Nuxt ecosystems and a "must-know" technology set for web developers and data scientists with a strong focus on rapid prototyping, data visualization and efficient execution at runtime.

generated by DALL·E – prompt by the author

The biggest benefit of Svelte is its unique approach to building web interfaces – it compiles components to highly efficient imperative code at build time, rather than relying on a virtual DOM at runtime. This results in faster runtime performance and much smaller bundle sizes.

React vs. Svelte vs. Vue: Which is Better for Business in 2023?

Whereas Svelte is a language, compiler and component framework, SvelteKit is an app framework (or metaframework) that solves the problems of building something production-ready including Routing, SSR, Data fetching, Service workers, Prerendering, SPAs and more.

This article shows the strength of Svelte and SvelteKit on an exemplary server-side rendered (SSR) web app including the Skeleton UI Toolkit and Chart.js for advanced charting.

This is a 100% free setup and a great starting point to learn and experiment with SvelteKit, Skeleton and Chart.js.

Our final demo app will be based on three web pages in an App Shell including a Header- and LeadSpace -component and will show two responsive, clickable cards that will hold Chart.js charting examples:

landing page of boilerplate app – image by author

In this article, I will take you through all the steps necessary to build the app from the scratch. For the impatient, I recommend cloning it from its GitHub repo and jump right to the Deployment to Vercel chapter below.

GitHub – thomasreinecke/sveltekit-skeleton-chartjs: code repository for Medium article "Svelte &…

A running demo is deployed here.

Inception

Instead of using SvelteKit directly, we're going to use the Skeleton CLI to bootstrap the project, which will give us a seamlessly integrated development environment with Svelte, SvelteKit, Tailwind, and Skeleton in one simple step:

> npm create skeleton-app@latest svelte-skeleton-boilerplate-step1

* select Bare Bones starter
* select the theme (I personally love Crimson)
* add Tailwind forms, Tailwind topography, Add popups
* add Type checking with Typescript
* add Eslint, Prettier, Playwright, Vitest, Svelte Inspector

configuration of sveltekit project – image by author

You can now install the project dependencies and start the app locally:

> cd svelte-skeleton-boilerplate-step1

# with yarn
> yarn
> yarn dev --open

# with npm
> npm install
> npm run dev -- --open

Point your browser to its local deployment point and expect to see this:

sveltekit project welcome page – image by author

We now have a running template with Svelte, SvelteKit, Skeleton and Tailwind CSS. Now let's step in and customize it with a basic Header and Leadspace component on the app layout. We'll also add a nicer landing page and two more public routes with some placeholder text elements:

Adding Basic Layout, Components and Routing

Before we get started with the Layout, we will need to add support for some icons – in this example we are going to include the Iconify Svelte icons and the free version of the FontAwesome icons.

We're also adding the dependency to svelte-chartjs and Chart.js for Charting:

# with yarn
> yarn add @iconify/svelte 
> yarn add @fortawesome/fontawesome-free
> yarn add svelte-chartjs
> yarn add chart.js

# with npm
> npm install @iconify/svelten
> npm install @fortawesome/fontawesome-free
> npm install svelte-chartjs
> npm install chart.js

Let's now focus on the App Layout:

The App Layout is a great SvelteKit concept that allows to define the elements that should be visible on every page – such as top-level navigation or a footer – on a single place and globally for the entire app, instead of repeating them on the codes of every page.

The App Layout applies for all the child pages under a specific route folder and it can be extended with more specific layouts in deeper levels of the routing hierarchy to create rich experiences efficiently.

With the code below, you create a Skeleton AppShell with an AppBar at the top of the page, holding the page name and icon and several actions. SvelteKit will use the directive to bring in the actual page contents as the user navigates.

Sveltekit app shell layout – image by author

Modify the existing App Layout it under src/routes/+layout.svelte and add replace it with the following code.

To show the concept of Svelte components, we're going to create a very simple LeadSpace component that uses a 4-color gradient animation in the background and provides some text. This component will be used on our three content pages later.

Create the file src/lib/components/LeadSpace.svelte and add this code to define the LeadSpace component:

The next step is to add the pages to enable a simple routing demonstration. As by the SvelteKit documentation:

At the heart of SvelteKit is a filesystem-based router. The routes of your app – i.e. the URL paths that users can access – are defined by the directories in your codebase:

src/routes is the root route

src/routes/about creates an /about route

src/routes/blog/[slug] creates a route with a parameter, slug, that can be used to load data dynamically when a user requests a page like /blog/hello-world

We are planning for three pages – the root page will provide two clickable cards (holding the charts) that could represent articles or any sort of content and lead to the routes /page1 and /page2.

However, let's first add the main page – edit src/routes/+page.svelte and include the following contents:

Adding Charting

As you can see, we're using a Chart.svelte component, which gets reused in two different divs in the main page section to create the two cards we want. Their parent section provides a responsive behaviour of the page, but the key is that we can parametrize the Chart components based on the type property. The Chart component herewith provides both, the Bar- and the Scatter chart.

We'll have to add the src/lib/components/Chart.svelte component we just talked about:

As you can see, we are using ChartJs to register the library elements we'll need to render Bar and Scatter plots and svelte-chartjs provides us with a wrapper allowing to utilize Chart.js as Svelte components.

Our Chart.svelte component provides the flexibility to select the chart type based on the type parameter. This approach generally allows to use any charting capability from the Chart.js library to create rich Data Visualization experiences. For more examples refer to the svelte-chartjs documentation.

This demo uses a static dataset to allow Chart.js rendering the charts. As a next step, we will now create a library that provides the data in the right structure for us. Create src/lib/data.ts and add the following source code to it:

Replace this with a proper data handler, when you apply this demo to your own scenarios.

Cool! We now have the contents of our landing page. Another step is to create the following folders and files under src/routes/ – these will represent the target routes we need to host the additional pages under the /page1 and /page2 routes:

src/routes/(public)/page1/+page.Svelte
src/routes/(public)/page2/+page.svelte

At this point, we're just adding the LeadSpace component and placeholder contents to these pages and both will looks the same for now – replace this with whatever content you need:

Thats it! You're done building the static pieces of the boilerplate app and you can start and try it locally with either


> yarn dev --open
> npm run dev -- --open

Your demo application should look like this:

Both Charts represent cards and are clickable. When you click either of them, you'll land on one of the nested child pages:

page contents for /page1 and /page2 – image by author

Deployment to Vercel

The easiest way to deploy the app is to upload your project to your GitHub account. As alternative, fork https://github.com/thomasreinecke/sveltekit-skeleton-chartjs

Create a free Account on Vercel.com and log in – I used "Login with GitHub" to make it very easy to connect to and load the project from GH.

On your personal Dashboard: "Add New Project". If you're doing this the very first time, you need to enable access for Vercel on your GitHub repository. Use the "Adjust GutHub App Permissions" option to do that. Once you've properly configured the access, you'll be able to see your project like this – hit "Import".