Unlike many other well-known frameworks, it doesn’t use a virtual DOM. Instead, it turns your code into efficient JavaScript during the build step, which makes apps smaller and faster. It also makes things reactive in a simple way, so it’s easier to manage data and keep your code clean.

Recently, the buzz around Svelte caught my attention. I wanted to understand what all the hype was about.

After polling the Reddit community for their opinions, their strong recommendations persuaded me to dive in and try it myself.

So, I did some more research to learn more about its distinctive features, and now I want to share this info with you here.

What We’ll Cover:

• 1. Why Svelte Stands Out

• 2. Charts

  • Layer Cake

  • FusionCharts

  • Highcharts

• 3. Pivot Tables

  • Flexmonster

• 4. Grids

  • SVAR

• 5. Wrapping Up

Why Svelte Stands Out

One of Svelte's key features is that it has no virtual DOM and compiles your code during the build process. This makes your apps built with Svelte much faster compared to those built with other frameworks.

Svelte also makes apps reactive in a simple way by declaring variables. The code stays clean and easy to read, with scoped styles that don’t mix into other parts of the app.

It also has built-in animations and transitions, plus an easy store system for sharing state between components.

Beyond all this, Svelte focuses on accessibility, supports TypeScript, and delivers excellent performance thanks to its compile-time approach.

I think this quote from Svelte creator Rich Harris perfectly sums up his reason for creating this framework:

“We're not trying to be the most popular framework; we're trying to be the best framework. Sometimes that means making choices that we believe in but that go against the grain of web development trends.”

It seems like many developers admire this approach. According to the 2025 StackOverflow Developer Survey, Svelte is admired by 62.4% of respondents and desired by 11.1%. This suggests that it's catching up to more established frameworks like React, Angular, and Vue.

I've also noticed the continuous growth of the Svelte community. This expanding network provides strong support, with a variety of tools and libraries, and active channels on Reddit and Discord where you can get advice from experienced developers.

My recent work on personal data visualization projects has shown me how powerful and enjoyable Svelte can be. But in my experience, there aren't yet many tools for working with Svelte. So to help my fellow developers, I’ve decided to share my experiences and recommend my 5 favorite data visualization tools that smoothly integrate with Svelte and work perfectly with it.

For convenience, I’ve divided them into three categories: Charts, Pivot Tables, and Grids. So, if you want to find something specific, you can go to the appropriate section.

Charts

You use charts when you need to explain data clearly and visually, such as showing trends over time, comparing groups, or quickly highlighting key differences.

Here are some charting tools that integreat well with Svelte:

1. Layer Cake

Layer Cake is an open-source graphics framework for Svelte that allows you to create a wide variety of charts, from columns to a multilayer map. On Reddit, the creator of LayerCake shares some insights about his project:

“It’s designed to give you the basic elements you need to make a responsive chart (D3 scales, SVG, canvas, etc) and lets you customize the rest in user-land.”

The nice thing is that the creator actively responds to feedback, which helps make the product better.

LayerCake suggests using five types of components:

• Axis

• Chart

• Map

• Interaction

• Annotation

Also, with over 1.5k stars on GitHub, the project is actively maintained and can be easily installed via npm.

Layer Cake is a good option when you need to build something unique rather than use pre-built chart templates.

License: MIT

2. FusionCharts

FusionCharts is a JavaScript charting library that suggests over 100 interactive charts and around 2,000 data-driven maps. It offers a special Svelte component called svelte-fusioncharts that makes adding charts to apps simple.

FusionCharts is a commercial tool, but there's a trial version that you can use to try it out. You can also use it for free for non-commercial purposes (there will be a watermark).

Based on user reviews on G2, devs like FusionCharts for its extensive variety of chart types, its ability to handle large datasets quickly, and its easy implementation with strong customization options.

But they also report a decline in product support over the last few years, noting that fixing bugs can take a long time.

I really liked using their new FusionDev AI feature. It was super convenient to quickly get answers from the documentation and even some guidance on creating or customizing charts.

They work pretty well for business dashboards and enterprise apps that need a wide variety of ready-made charts and a quick setup (especially useful when working with large datasets).

License: Commercial

3. Highcharts

Like FusionCharts, Highcharts is a commercial charting library that provides various chart types. Users highlight its ease of use and effortless setup using simple code. It also has many customization options available.

While it may be pricier than some alternatives, many businesses find its advantages worthwhile: after all, 80 of the world's 100 largest companies use Highcharts. It's also a great option for non-commercial projects, which can use its free version.

Their wrapper @highcharts/svelte lets you quickly integrate Highcharts into Svelte apps. It works with all their chart types and provides full customization.

Also, if you want an active community, Highcharts is a great option. They recently they created a Discord server, where you can share your projects or get inspiration for new ones.

Highcharts is a great choice for analytical platforms and financial dashboards. So if you need reliable, interactive charts with minimal effort, it's a perfect match.

License: Commercial

Pivot Tables

You use pivot tables to quickly group and summarize big datasets. It lets you group data by categories, calculate totals or averages, and reorganize your information dynamically.

Flexmonster

Flexmonster is a JavaScript pivot table library that allows you to quickly analyze and visualize data.

It's a commercial product, but it also has a full-featured trial version, plus they have a free entry license for dev purposes.

From the reviews on G2 and Capterra, user feedback highlights a consistent trade-off: while the price is often cited as a con, the consensus is that its value justifies the cost. Users praise its speed, smooth integration with web apps, similarity to Excel, and ability to manage vast datasets without problems. People also cite the ability to create clear reports and exports.

As an enterprise solution, Flexmonster offers a wide range of options to customize reports entirely according to a project's specific needs. Also, the product is continuously updated, and customer support is one of its core strengths. Users consistently note that support is responsive, clear, and helpful, which ensures smooth adoption and reliable problem-solving.

Flexmonster now provides a wrapper for Svelte, which makes it easy to integrate pivot tables into Svelte apps without extra setup. They also provide a GitHub sample that demonstrates many useful features. For example, it shows how to configure a pivot table, handle user interactions through events, work with Flexmonster's API, and much more. Altogether, it gives a clear picture of how to build a fully interactive reporting dashboard in a Svelte app.

By the way, their video about integrating Flexmonster with Svelte was the one I used, and it was very helpful.

Flexmonster also smoothly integrates with Highcharts and FusionCharts. You can find tutorials about these on their official webpage.

Flexmonster is a great fit for a wide range of data-heavy applications. It’s a powerful engine for data visualization and analysis, and thanks to its flexibility and customization options, it can be easily integrated into almost any application, such as financial reporting, sales analysis, and audit systems.

License: Commercial

Grids

A grid presents data in a structured table format, focusing on viewing, managing, and interacting with individual records.

SVAR

SVAR is lightweight and compatible with Svelte's datagrid component, which helps you work quickly with big datasets.

It’s a relatively new tool, released in 2025, so there are fewer user reviews, but it seems to be growing in popularity. And for now, you can try it yourself because it’s completely free! It also covers all the key data viz use cases, like sorting, filtering, grouping, and editing data.

User support is one of SVAR’s strengths. The creators and community are active, and the SVAR Forum offers reliable help whenever you need it.

So, it's a good option for apps that need to display and edit structured data, such as admin panels.

License: MIT

Wrapping Up

This was a small list of tools I recommend for data visualization while using Svelte. There are many more tools out there, but these stand out as stable, helpful, and easy to integrate. I hope that after reading this article, you’ve found the one that suits you the most.

Personally, these caught my attention because they're all pretty intuitive and provide powerful results. If you know other great tools, feel free to share your favorites with me!

So, if you want to cater to people everywhere, your app needs to support multiple languages.

Fortunately, Svelte is easy to work with, and it makes localization (l10n) and internationalization (i18n) quite straightforward.

But it lacks built-in i18n support—so you need to use a library like svelte-i18n or one of the others available. Let’s create a simple Svelte app to demonstrate how localization can be implemented.

We’ll create a welcome screen that can be used in both English and Spanish and then build some more advanced features.

Table of Contents

• What Makes Svelte Unique?
• How to Localize a Svelte Application?
• Adding Language Support
• Updating Components to Use Translations
• Creating a Language Switcher
• Adding Advanced Features
Formatting Numbers and Currencies
Formatting Dates
Localizing Images
Dynamic Image Paths
Integrating Alternative Text Localization
Switching SVG Content Dynamically
Handling Multiple Forms of Pluralization
Handling Missing Translations
• Making Your App Production-Ready
• Best Practices for Scaling Your Localization
• Wrapping Up

What Makes Svelte Unique?

Similar to Vue i18n, Svelte converts code to vanilla JS during the build process. This means your app ships with minimal code and offers excellent performance.

While other frameworks like React and Vue have longer startup times, Svelte’s compilation process changes that. It creates much smaller bundles, and apps run faster by default.

Svelte’s reactive syntax and lightweight nature make it an excellent choice for developers who want efficient, modern applications.

Its minimalism aligns well with the simplicity required in cloud development languages, ensuring that applications are lean, scalable, and optimized for cloud environments.

This minimalism also means you may not always have all the required built-in features. But pretty much all the limitations are resolved with the help of external libraries.

How to Localize a Svelte Application

Let’s jump right into creating a Svelte project now. I’ll create the project using the npm create command. Run the below commands one by one:

npm create svelte@latest freecodecamp-localization-demo
cd freecodecamp-localization-demo
npm install
npm install svelte-i18n

The npm create command will prompt you with a few choices. Here’s what I’ve picked (but you can always adjust this based on your project requirements):

• Skeleton project: Select Yes.

• Add TypeScript support: Select No (or Yes if you prefer TypeScript).

• Add ESLint for code linting: Select Yes.

• Add Prettier for code formatting: Select Yes.

Now that we have our project set up, let's create a welcome component that we'll later enhance with translations.

Create a new file called Welcome.svelte in your src directory:

<!-- src/Welcome.svelte -->
<script>
  export let username;
</script>

<div>Welcome {username}!</div>

This component takes the username property (that I’ve passed from the App.svelte file) and displays a welcome message.

Simple enough for now, but what if your users speak different languages? Let’s add language support.

Adding Language Support

To do this, we need to create translation files for each language. Start by creating a new directory called locales in your src folder. Inside the locales folder, create two JSON files—en.json for English and es.json for Spanish.

// src/locales/en.json
{
  "hello": "Hello {username}!",
  "buttons": {
    "save": "Save",
    "cancel": "Cancel"
  }
}

// src/locales/es.json  
{
  "hello": "¡Hola {username}!",
  "buttons": {
    "save": "Guardar",
    "cancel": "Cancelar"
  }
}

These files contain our translation strings.

Notice how we've organized them in a nested structure—this helps manage translations as your app grows.

The {username} and {count} placeholders will be replaced with actual values during runtime when we dynamically (or statically) pass the required values.

Next, we need to tell Svelte how to use these translations. For this, we need an i18n configuration file:

// src/i18n.js
import { register, init } from 'svelte-i18n';

register('en', () => import('./locales/en.json'));
register('es', () => import('./locales/es.json'));

init({
  fallbackLocale: 'en',
  initialLocale: 'en',
});

We’ve registered our translation files and set English as both the initial language and fallback language. The fallback language is used when a translation is missing in the selected language.

Updating Components to Use Translations

Now we can update our welcome component to use the text from the JSON file:

<!-- src/Welcome.svelte -->
<script>
  import {  } from 'svelte-i18n';
  export let username;
</script>

<div>{$('hello', { username })}</div>

The $_ function is a special helper from svelte-i18n that retrieves translated strings.

When we pass { username } as the second argument, it replaces the placeholder in our translation strings with the actual username.

Creating a Language Switcher

How would someone change the language, though? Let's create a simple language selector component:

<!-- src/LanguageSelect.svelte -->
<script>
  import { locale } from 'svelte-i18n';

  const languages = [
    { code: 'en', name: 'English' },
    { code: 'es', name: 'Español' }
  ];
</script>

<div>
  {#each languages as { code, name }}
    <button on:click={() => locale.set(code)}>{name}</button>
  {/each}
</div>

The bind:value directive automatically updates the active language when users make a selection.

The locale store from svelte-i18n handles all the behind-the-scenes work of switching languages.

Now let's bring everything together in our main App component:

<!-- src/App.svelte -->
<script>
  import { waitLocale } from 'svelte-i18n';
  import Welcome from './Welcome.svelte';
  import LanguageSelect from './LanguageSelect.svelte';

  const  username = 'developer';
</script>

{#await waitLocale()}
  <p>Loading...</p>
{:then}
  <main>
    <LanguageSelect />
    <Welcome {username} />
  </main>
{/await}

The waitLocale function ensures translations are loaded before showing content. This prevents flickering or missing translations when the app first loads.

Adding Advanced Features

As your app grows, you'll need to handle more complex scenarios. Let's look at some common requirements.

Formatting Numbers and Currencies

Different countries handle numbers and currencies quite differently. So for instance, if you show the figure of a hundred thousand to someone from France, and someone from the USA, you’ll need to show the same figure differently.

France → 100 000,00 $

USA → $100,000.00

You see how the thousands are separated by a space and the decimal by a comma in France? Using the US number format will make it quite confusing for someone from France. Here are a few other examples.

• US uses periods for decimals (1,234.56)

• Many European countries use commas for decimals and periods for thousands (1.234,56)

• Some countries group digits differently (like 1,23,456 in India)

// src/lib/formatUtils.js
export function formatCurrency(amount, locale, currency = 'USD') {
  return new Intl.NumberFormat(locale, {
    style: 'currency',
    currency
  }).format(amount);
}

You can now use these formatters in your components:

<!-- src/lib/PriceDisplay.svelte -->
<script>
  import { formatCurrency } from './lib/formatUtils';
  let price = 1234.56;
  let locale = 'en';
</script>

<p>Price: {formatCurrency(price, locale, 'USD')}</p>

With this setup, the app now adapts the currency formats to the different locales based on what outputs you ask from it:

• US: "$1,234.56", "1.2M", "15%"

• German: "1.234,56 €", "1,2 Mio.", "15 %"

Formatting Dates

Similar to currency and number formats, date are formatted differently across different locales.

So, while the US uses MM/DD/YYYY, many European countries use DD/MM/YYYY, and Japan often uses YYYY年MM月DD日.

Luckily, we don’t need to handle this manually. Similar to currency formatting, we have the Intl.DateTimeFormat function that accepts the locale and date in numeric format and returns the appropriately formatted date.

// src/lib/dateUtils.js
export function formatDate(date, locale) {
  return new Intl.DateTimeFormat(locale, {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  }).format(date);
}

You can now use this function in your Svelte app to display the dates correctly for each locale:

<!-- src/lib/DateDisplay.svelte -->
<script>
  import { formatDate } from './lib/dateUtils';
  let locale = 'en';
  let today = new Date();
</script>

<p>Today's date: {formatDate(today, locale)}</p>

Once implemented, you’ll see the dates get formatted automatically, like below:

• English (US): "September 23, 2024"

• Spanish: "23 de septiembre de 2024"

• German: "23. September 2024"

• Japanese: "2024年9月23日"

Localizing Images

Don’t forget that localization isn’t just about translating text—your images need attention, too. Culturally relevant visuals, region-specific content like maps or symbols, and adaptable image formats can make all the difference.

Dynamic Image Paths

Use Svelte's reactivity to dynamically load images based on the current locale. For example, you can store localized image paths in a JSON file or directly in your i18n configuration:

{
  "en": { "logo": "/images/en/logo.png" },
  "fr": { "logo": "/images/fr/logo.png" }
}

Then, in your Svelte component:

<script>
  import { locale } from 'svelte-i18n';
  import translations from './translations.json';

  $: imagePath = translations[$locale].logo;
</script>

<img src={imagePath} alt="Localized logo" />

Integrating Alternative Text Localization

Ensure your images' alt attributes are also localized. You can achieve this by adding an additional field in your translations:

{
  "en": { "logoAlt": "Company Logo" },
  "fr": { "logoAlt": "Logo de l'entreprise" }
}

Then bind the localized alt text dynamically

<img src={imagePath} alt={translations[$locale].logoAlt} />

Switching SVG Content Dynamically

If you need to localize content within SVGs, such as text or icons or want to convert to SVG format, consider using Svelte's templating for seamless integration.

<svg>
  <text x="10" y="20">{$t('svgText')}</text>
</svg>

This approach ensures your SVGs are directly rendered with localized text.

Handling Multiple Forms of Pluralization

While many languages have two forms of plurals (singular and plural), there are many languages with more than two forms, and some don’t pluralize. For example:

• Arabic has six forms

• Japanese doesn't pluralize in the same way

We can easily handle these differences using svelte-i18n's ICU message syntax. I’ve also added an example of how you can handle more than two forms when using Arabic.

// src/locales/en.json
{
  "items": {
    "count": "{count, plural, =0 {No items} one {1 item} other {{count} items}}"
  }
}

// src/locales/es.json

{
  "items": {
    "count": "{count, plural, =0 {Sin elementos} one {1 elemento} other {{count} elementos}}"
  }
}

// src/locales/ar.json
{
  "items": {
    "count": "{count, plural, =0 {لا عناصر} one {عنصر واحد} two {عنصران} few {# عناصر} many {# عنصر} other {# عنصر}}",
  }
}

Now, let's create the pluralization component for our Svelte app where a button increments the count with every click.

<!-- src/lib/ItemCounter.svelte -->
<script>
  import {  } from 'svelte-i18n';
  let count = 0;
</script>

<p>{$('items.count', { count })}</p>
<button on:click={() => count++}>Add Item</button>
<button on:click={() => count--} disabled={count === 0}>Remove Item</button>

With this implemented, your app is fully ready to handle pluralization dynamically (as you’ll notice by clicking on the Add item button).

Handling Missing Translations

Sometimes, translations for certain keys might be missing. This can happen due to oversight, dynamic content, or incomplete translation files. To handle such scenarios gracefully, set up error handling using the missingKeyHandler option in svelte-i18n.

import { register, init } from 'svelte-i18n';

register('en', () => import('./locales/en.json'));
register('es', () => import('./locales/es.json'));

init({
  fallbackLocale: 'en',
  initialLocale: 'en',
  missingKeyHandler: (locale, key) => {
    console.warn(`Missing translation: ${key} (${locale})`);
    return key; // Display the key itself when translation is missing
  }
});

This code logs a warning when a translation is missing and displays the key instead of showing nothing.

Making Your App Production-Ready

When preparing your app for real-world users, optimize it for localization by automatically detecting the user’s language.

You can use the browser’s navigator.language property to set the initial locale:

import { init, getLocaleFromNavigator } from 'svelte-i18n';

init({
  fallbackLocale: 'en',
  initialLocale: getLocaleFromNavigator(),
});

Best Practices for Scaling Your Localization

• Organize translations: Group related translations logically (for example, buttons, menus, notifications) and use consistent naming patterns for keys.

• Use a translation management platform: As your app grows, handling translation files manually starts becoming cumbersome. Translation management platforms are purpose-built to solve this exact issue and help save hours every day, make it easy to collaborate on projects, and keep track of progress.

• Thorough testing: Test your app with real users across all supported languages. You also need to keep in mind the text length changes to avoid issues with layouts, especially with languages like German or Arabic, which can expand text significantly.

• Cultural considerations: Adapt your app for cultural norms, reading directions (for example, RTL for Arabic), and regional preferences (for example, date and currency formats).

Wrapping Up

Localization might feel like a big task at first, but it’s totally worth it. It lets you reach more people and makes your app more inclusive.

Svelte and svelte-i18n streamline the process and keep it fun as you build your skills.

To keep it simple, start with the basics, such as adding translations and a language switcher. Advanced features like handling dates, currencies, and pluralization can follow as you gain confidence.

Take your time, test thoroughly, and build an app that feels natural for all the users you serve!

We just posted a course on the freeCodeCamp.org YouTube channel that will teach you how to use both SvelteKit and TailwindCSS. Developed by James McArthur, this course is a great opportunity for beginners to build an awesome-looking landing page from scratch, covering everything from the initial setup to deployment.

Introduction to SvelteKit & TailwindCSS

Before diving into the course, let’s unpack what SvelteKit and TailwindCSS are.

SvelteKit: The Fast, Flexible Framework

Unlike traditional frameworks that do most of the heavy lifting in the browser, Svelte shifts that work into the compile step, creating apps that are faster and lighter. SvelteKit takes this a step further, offering a framework for building server-side rendered (SSR) applications with Svelte. It's designed for greater flexibility, offering features like file-based routing, server-side rendering, static site generation, and seamless integration with various backends.

TailwindCSS: The Utility-First CSS Framework

TailwindCSS is a utility-first CSS framework that allows developers to style their sites directly within their HTML markup. It emphasizes rapid UI development by providing low-level utility classes that can be composed to build any design directly in your markup. This approach minimizes the need to write custom CSS, making it faster and easier to design responsive, custom-styled web pages without leaving your HTML.

Building a Web Application with SvelteKit & TailwindCSS

The course is structured to take you through the process of building a web application using these two powerful technologies. Here’s what you’ll learn:

Setting Up Your Project

The course begins with setting up a new SvelteKit project and integrating TailwindCSS. This foundational step is critical, ensuring you understand how to start a project from scratch and configure it for success.

Designing a Landing Page

Once the setup is complete, James guides you through the process of designing a landing page. This section of the course emphasizes the utility of TailwindCSS in creating responsive, aesthetically pleasing designs with minimal effort. You’ll learn how to use utility classes to style your application, making the design process more intuitive and efficient.

Implementing Features with SvelteKit

With the design in place, the course delves into SvelteKit’s capabilities, such as reactive variables, stores, and modules. These features enable you to create a dynamic, interactive user experience. You’ll explore how to make your landing page not just visually appealing, but also functional and responsive to user interactions.

Deploying Your Landing Page

The final section of the course covers the deployment of your landing page. James walks you through the process of deploying your project to the web, ensuring your work is accessible to the world. This includes choosing a hosting service, setting up your domain, and deploying your site using continuous integration and continuous deployment (CI/CD) pipelines.

Conclusion

For developers looking to get hands-on with SvelteKit and TailwindCSS, this course offers a practical, project-based approach to learning. By building a landing page, you gain a deep understanding of these technologies in a real-world context.

You can watch the full course on the freeCodeCamp.org YouTube channel (2-hour watch).

And you can learn about two popular web dev tools in the new course we just posted on the freeCodeCamp.org YouTube channel. In this course, you'll learn how to create a web portfolio using SvelteKit & TailwindCSS.

SvelteKit is more than just a flavor of the month; it's a game-changer in building web applications. It comes with built-in server-side rendering, routing, and many other features that simplify the developer's journey.

But what's web development without a touch of aesthetics? Enter Tailwind CSS. A utility-first CSS framework, Tailwind enables developers to rapidly craft custom user interfaces without getting bogged down by custom CSS.

The combination of SvelteKit and Tailwind CSS promises a development experience like no other, allowing for the creation of interactive, responsive, and beautiful web applications.

James McArthur created this course. He is a full-stack developer with a knack for creating engaging tutorials. James delves deep into the process of building a web portfolio from scratch, making it a perfect watch for those aiming to showcase their skills and projects to potential employers or simply wanting to mark their presence on the internet.

This is the front page of the page you will create.

The tutorial takes a hands-on approach, guiding viewers step by step. By the end of it, not only will you have a fully functional web portfolio, but you'll also have it live on the internet. As James amusingly puts it, "you can send it to your mum."

The portfolio demo features a captivating landing page for a fictitious character, Samuel Oak (or as James calls him, "fake small James"). It boasts aesthetically pleasing elements like particle animation effects that add depth and dynamism to the page. The navigation is seamless, leading to sections that display projects, an 'about me' segment, and a unique table that playfully yet effectively pitches you as the top candidate for job applications.

For anyone eager to establish a striking online presence, this course is a great place to start. Not only does it teach the technicalities of web development but also emphasizes the importance of aesthetics and user experience.

You can watch the full course on the freeCodeCamp.org YouTube channel (1-hour watch).

Compared to other front-end frameworks like React, Vue, or Angular, it focuses on a different approach by compiling components.

In most traditional frameworks, you build components using a virtual DOM (Document Object Model) abstraction.

In these frameworks, changes to the UI are first made to a virtual representation of the UI which calculates the differences and updates the actual DOM accordingly. This process can introduce overhead and performance bottlenecks, especially for complex applications.

Svelte, on the other hand, takes a different approach.

It shifts much of the work to the build process, compiling components into highly optimized JavaScript code that directly manipulates the DOM during runtime.

Svelte applications have a smaller runtime footprint and can often achieve better performance compared to applications built with traditional frameworks.

In this tutorial, you will learn how to build a simple calculator using Svelte.

Unlike most frameworks, Svelte does not have a steep learning curve. A basic understanding of HTML, CSS and JavaScript is sufficient to grasp Svelte.

The following are the prerequisites for this tutorial:

• Basic knowledge of HTML, CSS and JavaScript

• Willingness to learn

You can experience how the calculator works here.

How to Plan the Project

Those who fail to plan, plan to fail. It's a good practice to plan what you are building.

We want the calculator application to follow some criteria as follows:

• The calculator should have a user-friendly interface with buttons for digits (0-9), decimal point (.), and arithmetic operations (+, -, *, /).

• It should display the current input and the result on the screen.

• The calculator should support multiple arithmetic operations in sequence (for example: 2 + 3 * 5).

• The user should be able to clear the input and reset the calculator.

• The calculator should handle edge cases and prevent invalid inputs.

Below is a design of how the calculator should look like. You can use tools like Figma or Adobe XD to draw how you want your UI to look or sketch it on paper.

How to Build the User Interface

The calculator you will build is a simple app using Svelte REPL. It's an interactive coding environment that allows you to play with Svelte without going through the hassle of getting it set up locally on your PC.

But if you to prefer to follow locally, ensure you have Node.js installed, and run the following code on your terminal:

npm create svelte@latest <name-of-your-app>
cd myapp
npm install
npm run dev

You can read more here on how to get started.

Svelte allows you to build apps based on components written in a .svelte file. A web application contains components such as buttons, headers and so on.

Svelte simplifies this process by allowing you to create it once and reuse it in any part of your application. Most web applications contain one or more components.

The main application is in App.svelte, which contains the main code for the calculator app you are about to build.

When you open the Svelte REPL, you can see the default application prints Hello World on the screen:

<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>

A .svelte file contains JavaScript, HTML and CSS.

The JavaScript, is written in the <script>...</script> tag, while you can write the HTML code below it, and apply CSS styling in the <style>...</style> tag.

<script>
    let name = 'world';
</script>

<h1>Hello {name}!</h1>
<style>
    h1{
        background: red;
    }
</style>

Variables declared in the script tag are displayed using the curly parentheses {}. Just like you can see Hello Word displayed using the name variable.

Now let's start building the application, copy and paste the following code into App.svelte:

<script>
</script>

<div class="calculator">
    <div class="display"></div>
    <div class="buttons">
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button class="operator">+</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button class="operator">-</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button class="operator">*</button>
        <button>0</button>
        <button>.</button>
        <button class="clear">C</button>
        <button class="operator">/</button>
        <button class="equals">=</button>
    </div>
</div>

<style>

</style>

If you have done that, you have created two divs – calculator and display. calculator is the parent div that contains display and the calculator buttons.

All arithmetic operations carry the class name operator. The clear sign also has the class name clear, and the equal sign has the class name equals.

You might not see the display now because we haven't applied CSS styling.

Inside the <style></style> tag, paste the code below:

<script>

</script>

...

<style>
.calculator {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.display {
    font-size: 24px;
    border: 1px solid #ccc;
    height: 24px;
    padding: 10px;
    margin-bottom: 10px;
    width: 300px;
    text-align: right;
}
</style>

Now let's style the buttons into a grid of four columns.

Update the <style></style> tag with the buttons and button style below:

...

<style>
 ...
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 75px);
    gap: 5px;
}

button {
    padding: 10px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    text-align: center;
}
</style>

Note that buttons is the class name for the div containing the various HTML button tags.

Next, let's style the buttons to improve user experience for anyone using the calculator and make the equal button occupy the empty spaces.

Update the <style></style> tag as follows:

...
<style>
 ...
 .operator{
    border: 0px solid #A46D19;
    background: #F90;
}
.clear{
    border: 0px solid #000;
    background: red;
}
.equals{
    border: 0px solid #000;
    background: #245BE9;
    width: 320px
}
</style>

Not done yet, one last thing to do.

You need to include hovering effect on all buttons, allowing a user to know when the mouse is on a particular button. This will make for a better user experience.

Update the <style></style> tag as follows:

...
<style>
    ...
.operator:hover{
    background: #FFD700;
}
.clear:hover {
    background: #FFC0CB ;
}
.equals:hover {
    background: #ADD8E6; 
}
</style>

Now we are done with the calculator's user interface.

If you did everything right, your code should look like this:

<script>
</script>

<div class="calculator">
    <div class="display"></div>
    <div class="buttons">
        <button>7</button>
        <button>8</button>
        <button>9</button>
        <button class="operator">+</button>
        <button>4</button>
        <button>5</button>
        <button>6</button>
        <button class="operator">-</button>
        <button>1</button>
        <button>2</button>
        <button>3</button>
        <button class="operator">*</button>
        <button>0</button>
        <button>.</button>
        <button class="clear">C</button>
        <button class="operator">/</button>
        <button class="equals">=</button>
    </div>
</div>

<style>
.calculator {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.display {
    font-size: 24px;
    border: 1px solid #ccc;
    height: 24px;
    padding: 10px;
    margin-bottom: 10px;
    width: 300px;
    text-align: right;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 75px);
    gap: 5px;
}

button {
    padding: 10px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    text-align: center;
}
.operator{
    border: 0px solid #A46D19;
    background: #F90;
}
.clear{
    border: 0px solid #000;
    background: red;
}
.equals{
    border: 0px solid #000;
    background: #245BE9;
    width: 320px
}
.operator:hover{
    background: #FFD700;
}
.clear:hover {
    background: #FFC0CB ;
}
.equals:hover {
    background: #ADD8E6; 
}
</style>

Now let's start cooking!

How to Handle Interactivity

Now that you have finished with the UI, let's make the calculator interactive by starting with the number buttons.

Copy and paste the following code into the <script></script> tag in App.svelte:

<script>
    let display_number = "";
    const select = (num) => () => (display_number += num);
    const clear = () => (display_number = "");
</script>
...
...

• display_number is the number displayed on the calculator screen.

• select is the function that allows any number clicked, to appear on the screen.

• clear is the function that clears the screen, resetting the value of display number to an empty string.

Note that display_number is a string data type. Later on you will learn how to convert it to a numeric data type and perform calculations with it.

Next let's implement the select and clear function into the HTML.

Modify the HTML as follows:

...
<div class="calculator">
    <div class="display">{display_number}</div>
        <div class="buttons">
            <button on:click={select(7)}>7</button>
            <button on:click={select(8)}>8</button>
            <button on:click={select(9)}>9</button>
            <button class="operator" >+</button>
            <button on:click={select(4)}>4</button>
            <button on:click={select(5)}>5</button>
            <button on:click={select(6)}>6</button>
            <button class="operator" >-</button>
            <button on:click={select(1)}>1</button>
            <button on:click={select(2)}>2</button>
            <button on:click={select(3)}>3</button>
            <button class="operator">*</button>
            <button on:click={select(0)}>0</button>
            <button on:click={select(".")}>.</button>
            <button on:click={clear} class="clear">C</button>
            <button class="operator">/</button>
            <button class="equals" >=</button>
        </div>
</div>

...

Svelte on:click directive allows you attach an event handler to an element, so that when you call the select function for an element, it displays the number of that element appended to the previous value.

The clear button also has the event handler clear, to clear the screen and reset to "" anytime it's called.

If you get everything right, you should see the value of the buttons clicked on the screen.

Let's create an event handler to perform an addition function and display the result. This will serve as the basis for all other operations in the calculator.

Update the <script></script> tag as follows:

<script>
    ...
    let operand;
    let result;

    function addition() {
        operand = Number(display_number);
        display_number = "";
    }

    function equals() {
        display_number = Number(display_number);
        result = operand + display_number
        display_number = result.toString()
    }
</script>
...
...

When performing calculations, you can have two or more operands – operand is the variable where the previous operand is stored, while display_number contains the current operand.

result is the final result after performing an arithmetic operation.

The addition function takes the initial value displayed, converts it to a Number and stores it in the new variable operand, which resets display_number to its initial value "".

The equals function takes the new currently displayed number, adds it to operand and saves it as the final result. result is now converted to a string and saved as display_number so it appears on the screen.

Note that the equals function converts result to a string. When you want to use it for another calculation, the addition function will handle the conversion to a Number.

Try performing an addition operation to see if you got it right.

By now, App.svelte should look like this:

<script>
    let display_number = "";
    const select = (num) => () => (display_number += num);
    const clear = () => (display_number = "");

    let operand;
    let result;

    function addition() {
            operand = Number(display_number);
            display_number = "";
      }

    function equals() {
            display_number = Number(display_number);
            result = operand + display_number
            display_number = result.toString()
      }
</script>

<div class="calculator">
    <div class="display">{display_number}</div>
        <div class="buttons">
            <button on:click={select(7)}>7</button>
            <button on:click={select(8)}>8</button>
            <button on:click={select(9)}>9</button>
            <button on:click={addition} class="operator" >+</button>
            <button on:click={select(4)}>4</button>
            <button on:click={select(5)}>5</button>
            <button on:click={select(6)}>6</button>
            <button class="operator" >-</button>
            <button on:click={select(1)}>1</button>
            <button on:click={select(2)}>2</button>
            <button on:click={select(3)}>3</button>
            <button class="operator">*</button>
            <button on:click={select(0)}>0</button>
            <button on:click={select(".")}>.</button>
            <button on:click={clear} class="clear">C</button>
            <button class="operator">/</button>
            <button on:click={equals} class="equals" >=</button>
        </div>
</div>

<style>
.calculator {
    display: inline-block;
    border: 1px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.display {
    font-size: 24px;
    border: 1px solid #ccc;
    height: 24px;
    padding: 10px;
    margin-bottom: 10px;
    width: 300px;
    text-align: right;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 75px);
    gap: 5px;
}

button {
    padding: 10px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    font-family: Arial, sans-serif;
    text-align: center;
}
.operator{
    border: 0px solid #A46D19;
    background: #F90;
}
.clear{
    border: 0px solid #000;
    background: red;
}
.equals{
    border: 0px solid #000;
    background: #245BE9;
    width: 320px
}
.operator:hover{
    background: #FFD700;
}
.clear:hover {
    background: #FFC0CB ;
}
.equals:hover {
    background: #ADD8E6; 
}
</style>

Let's improve the code to support other operations – subtraction, multiplication and division:

<script>
...
let operator;
let operators = ["+", "-", "*", "/"];

function operation(sign) {
        operand = Number(display_number);
        operator = sign;
        display_number = "";
  }

function equals() {
    display_number = Number(display_number);
    if (operator === "+") {
      result = operand + display_number;
    } else if (operator === "-") {
      result = operand - display_number;
    } else if (operator === "*") {
      result = operand * display_number;
    } else if (operator === "/") {
      result = operand / display_number;
    }
display_number = result.toString()
</script>
...
...

The addition function changes to operation, which supports the sign argument.

The equals function performs operations based on the value of the sign argument in the function operation.

Update the HTML code to add event handlers to the various arithmetic operations:

<div class="calculator">
    <div class="display">{display_number}</div>
        <div class="buttons">
            <button on:click={select(7)}>7</button>
            <button on:click={select(8)}>8</button>
            <button on:click={select(9)}>9</button>
            <button on:click={() => operation(operators[0])} class="operator" >+</button>
            <button on:click={select(4)}>4</button>
            <button on:click={select(5)}>5</button>
            <button on:click={select(6)}>6</button>
            <button on:click={() => operation(operators[1])} class="operator" >-</button>
            <button on:click={select(1)}>1</button>
            <button on:click={select(2)}>2</button>
            <button on:click={select(3)}>3</button>
            <button on:click={() => operation(operators[2])} class="operator">*</button>
            <button on:click={select(0)}>0</button>
            <button on:click={select(".")}>.</button>
            <button on:click={clear} class="clear">C</button>
            <button on:click={() => operation(operators[3])} class="operator">/</button>
            <button on:click={equals} class="equals" >=</button>
        </div>
</div>

Each function takes its sign value by accessing the respective sign in operators.

We now have a working calculator.

Now, how do we handle something like this?

The above is a bug where the numbers exceed the display boundaries.

To solve this error, update the display div as follows:

...
<div class="calculator">
    <div class="display">{display_number.length < 23? display_number: display_number.substring(0,23)}</div>
    ...
</div>
...

If the length of display_number is greater than 22, which is the number of digits the display screen can contain, the first twenty-two characters is selected.

This will fix the above bug.

Challenge

You can further extend the calculator by:

• Adding advanced mathematical and scientific operations.

• Giving room for users to use their keyboard to input values.

• Displaying the arithmetic operations on screen, before calculating.

Conclusion

In this tutorial, you have learned how to use Svelte to create interactivity in a web app. And you also learned about Svelte event handlers.

You can further your current Svelte knowledge by visiting the official documentation.

We just published a free 23-hour course on the freeCodeCamp.org YouTube channel that will teach you how to use Svelte.

Li Hau Tan developed this course. Li is a core maintainer of Svelte so he is the perfect person to teach this course.

Lee starts at the absolute beginning with creating your first Svelte component and continues on to teach every concept you need to know to develop applications using Svelte.

Here are all the topics covered in this comprehensive course:

• Introduction
• Writing your 1st Svelte component
• Style your Svelte component
• Adding data to Svelte component
• Reactivity in Svelte
• Attaching events in Svelte
• Reactive Declarations and Statements
• tick()
• Component and props
• Component events
• Forwarding component events
• class: directive
• Binding
• bind:group
• bind:this
• Component Lifecycle
• onMount
• {#if} block
• {#each} block
• keyed {#each} block
• keyed {#each} visualised
• {#await} block
• {#key} block
• Context
• Communicating through Context
• Intro to Svelte store
• Writable store
• Readable store
• Svelte store contract
• Redux store as Svelte store
• Valtio state as Svelte store
• XState as Svelte store
• DOM events as Svelte store
• Immer for immutable Svelte store
• derived() Svelte store
• tweened() Svelte store
• tweened() and spring()
• Higher Order Store
• RxJS as Svelte store
• Reactive class property using stores
• Undo / Redo with Svelte store
• Reactive Context
• tips to manage complex store
• get() Svelte store value
• Store vs Context
• Intro to Svelte action
• Dynamic parameter in Svelte action
• What if Svelte action does not exists?
• Integrating UI library with Svelte action
• Reusing event listeners with Svelte action
• Creating events with Svelte action
• The order of Svelte action
• use:clickOutside
• use:tooltip
• use:viewport
• use:popper with Popper
• use:lazyImage
• Ensemble Actions
• Passing data across
• Slot forwarding
• $$slots
• Infinite List
• Tabs

• $$props and $$

  restProps
• Lazy Component
• Passing CSS Custom Properties to Component
• {@html}
• {@debug}
• Intro to Svelte transitions
• Coordinating transitions
• Transition Events
• Easing
• Accessible transitions
• Solid color swipe transition
• Flipboard transition
• Client-side component API
• SSR component API
• Svelte compiler API
• Svelte preprocess API
• Hydrating Svelte component
• svelte/register
• Conclusion

Watch the full course below or on the freeCodeCamp.org YouTube channel (23-hour watch).

Test Driven Development (TDD) is one of the best ways to make sure your code is high quality and works like it's supposed to work. It can also help you create reliable builds during continuous deployments.

In this post, we will learn how to create a Svelte application using TDD methods.

What We're Building

We are going to build a vertical tabs component where we can switch between three tabs. We are going to build this component by writing test cases first and developing the component functionality after that to make the tests more effective.

Final implementation

Prerequisite

I will explain all the steps needed to create an app and you can follow along with the code. It's great if you have basic programming knowledge and fundamental knowledge of HTML and CSS for this tutorial.

Also, you'll need to have Node.js installed. You can see how to do that here if you don't have it already.

What is Test-Driven Development?

The basic idea of test-driven development, or TDD, is to write the test before you implement the actual functionality. This helps you clearly figure out what you're developing and how it works.

You first watch the test fail, and then you write the code to make it pass. This ensures that there are no false positive tests in your code.

TDD is a methodology you can apply to any programming language. It is more prevalent when developing backend applications that contain business logic that you can easily test.

The good news is, you can apply similar techniques to test your front-end applications as well.

Three stages of TDD

The three stages of TDD are:

1. Red stage – Write the test and watch it fail
2. Green stage – Write the minimum code required to make the test pass
3. Refactor – Cleanup and refactor the code to make it more robust

Three stages of TDD

What is Vitest?

Vitest is an up-and-coming testing framework which has similar functionality to Jest.

Since we are using Vite as our build tool for Svelte in this tutorial, Vitest has very good integration with Vite and offers a similar testing environment without needing extra configuration.

How to Create a Svelte Application

We are going to create a Svelte application using Vite as the build tool. You can do that with this command:

npm create vite@latest

This will create a new project, and you can follow the steps below to create and setup the project:

1. Enter the name of the project. This will also create a new folder with the project name. In this example, I will add the project name as svelte-tdd-vitest.
2. You can select the framework in the next step. Let's choose svelte as the framework.
3. Then you can enter the variant of the framework. We can choose the TypeScript variant for this article. If you are not comfortable with TypeScript, you can also choose JavaScript in this option.

Initialise Svelte project with Vite

You can then follow the helpful steps provided in the terminal to install the dependencies and start the application. Run the following command:

cd svelte-tdd-vitest
npm install
npm run dev

npm install will install the dependencies of the project.

npm run dev will start the development server. You should see the app running in the port specified in the terminal.

Vite Server started using npm run dev

Congrats, you can now see the starter app running in your browser. You can open the project in your favourite Code Editor and start working.

How to Set Up Vitest

You can add Vitest to the project right now as a dev dependency. This means that Vitest will not be packaged into the production build of the application since you will be running the test in your local environment.

npm install -D vitest

Vitest can read the config of Vite inside the vite.config.js file and prepare the test environment similar to the build environment. This makes the test more reliable. So you can reuse the Vite config file and add more options for the configuration of Vitest.

You can also override the config for the Vitest by creating a new file called vitest.config.js in the project root. So now, create a new file called vitest.config.js:

import { defineConfig } from 'vitest/config'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    svelte({ hot: !process.env.VITEST }),
  ],
  test: {
    environment: 'jsdom',
  }
})

There are a couple of configs we are adding to the file

1. We are disabling Svelte's hot module reload when tests are running.
2. We are defining the environment for running the test as jsdom. It helps in mocking the DOM API and running the tests in a reliable method.

In order to use the jsdom you need to add it as an Dev Dependency as well. So let's install that package using the terminal.

npm install -D jsdom

After installation, let's add a couple of scripts to the package.json file to start the Vitest test from the npm command line:

"scripts": {
    ...
    "test": "vitest",
        "coverage": "vitest run --coverage"
}

How to Create the First Test

You now have all the setup needed to write your first test. Create a new file called sample.spec.ts inside the lib directory.

import {describe, test, expect } from 'vitest';

describe("Example File", () => {
    test("Sample test", () => {
        expect(1 + 3).equal(4);
    });
});

Let's break down the different functions used to create this test file:

1. describe – you use this to group similar test together and benchmark tests when generating your reports. It takes a name and a function that contains the group of tests.
2. test – Represents a single test. It can contain multiple expectations within it. It is created by passing a name of the test and the function to run the test.
3. expect – Represents the expression which you're testing.

There are multiple different ways to write your test based on what you are testing. You can have a look at the complete API for Vitest in the official API Reference.

Let's run the test using the following npm command:

npm run test

Running the test

How to Add the Global Test Config

You are going to be using the describe, test, and expect functions a lot in the test files and it might be verbose to import them in all the test files. So Vitest has a nice config where you can set these global imports and so you don't have to add them to each file.

So let's update the vitest.config.js file with this configuration:

export default defineConfig({
  ...
  test: {
    ...
    globals: true
  }
})

After adding this globals equals true line in your config, you can now remove the imports in your spec file.

If you are using TypeScript, your TypeScript compiler will complain in your spec file. You can solve that by adding the following line to your tsconfig.json file:

{
  "extends": "@tsconfig/svelte/tsconfig.json",
  "compilerOptions": {
    ...
    "types": ["vitest/globals"]
  },
}

Now your test can look like this. This is not a huge upgrade for this small file, but when you have lots of spec files, this config change is useful.

describe("Example File", () => {
    it("Sample test", () => {
        expect(1 + 3).equal(4);
    });
});

How to Create a Svelte Component

We will create a new svelte component called VerticalTabs.svelte. The requirements are to create a vertical tab component that can contain a few items and for the user to be able to select a particular tab to view its content in the right side.

The component will be divided into two parts. The left side displays all the tabs. The right side displays the content based on the tab.

Let's create the basic HTML and CSS styles needed for the component. We will add the functionality to switch tabs after writing the tests.

<div class="vertical-tab-container">
    <ul class="vertical-tab">
        <li>First Tab</li>
        <li>Second Tab</li>
        <li>Third Tab</li>
    </ul>

    <div class="vertical-tab-content">
        <h2>First Tab Heading</h2>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem aut deserunt veniam tempora deleniti quos reprehenderit natus. Animi, obcaecati dolorum, culpa, maiores maxime ullam soluta unde rerum nihil temporibus quibusdam!</p>
    </div>
</div>

<style>
    .vertical-tab-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        border: 1px solid gray;
        border-radius: 1rem;
    }

    .vertical-tab {
        margin: 0px;
        padding: 3rem;
        list-style: none;
        border-right: 1px solid gray
    }

    .vertical-tab li {
        margin: 2rem 0;
    }

    .vertical-tab-content {
        flex:1
    }
</style>

In this code, you are adding simple elements like an unordered list to display the list of tabs. You are styling it in the <style> tag which will be locally scoped CSS for this component.

Then, you are adding <h2> tag to display the tab heading and a paragraph tag <p> to show more dummy text for the tab. You're using flex to show the two items side by side and the property of flex: 1 on the content will make that container take all the remaining available space to expand.

The component should look like the below image:

Vertical Tab initial

How to Mount the Svelte Component in Test

Now you need to create the first test for the component by mounting the svelte component and then checking to see if you can find the "First Tab" text in the component.

So create a new spec file called VerticalTabs.spec.ts:

import VerticalTabs from "./VerticalTabs.svelte";

describe("VerticalTabs Component", () => {

    test("should render the component", () => {
        // Create a new container for the test
        const host = document.createElement('div');

        // Append the new container in the HTML body
        document.body.appendChild(host);

        // Create an instance of the vertical tab
        const instance = new VerticalTabs({ target: host });

        // Check if the instance has value
        expect(instance).toBeTruthy()

        // Test if we can find the "First Tab Heading"
        expect(host.innerHTML).toContain("First Tab Heading")

    });

})

In order to mount the Svelte component, you need to first create a div container and attach that div to the body of the HTML document. Then you need to attach your component to the div. You can then test the innerHTML of the main container to see if you have the required content.

Now this test should pass since you have the First Tab Heading content displayed in the component.

Going through this long process in all the steps might prove to be difficult. So let's add another package to make the job easier. The package is testing-library/svelte and it provides more features to make the assertions easy and less verbose.

How to Use the Svelte Testing Library

First, you'll need to install the library:

npm install -D @testing-library/svelte

Let's update the previous test to make it less verbose and let testing-library handle all the heavy lifting for us. You can use the render function to add the component to the testing page.

import VerticalTabs from "./VerticalTabs.svelte";
import { render, screen } from '@testing-library/svelte';

describe("VerticalTabs Component", () => {

    test("should render the component", () => {

        render(VerticalTabs);

        const firstTabNode = screen.getByText(/First Tab Heading/i)

        expect(firstTabNode).toBeTruthy()
    });

})

After the render function, add the component to the testing page. You can use the screen object imported from the library to query the nodes that are rendered.

There are multiple methods inside this object to make testing easy, and you will use one of the methods to get the text in the component.

getByText will return the instance of a given text. You are expecting the node to contain some value.

There are three main ways to retrieve the element in the testing library, and each serves a different purpose:

1. getByText – This will throw an error when the text is not found and the test will fail
2. queryByText – This will return null when the text is not found
3. findByText – This will also throw an error when the text is not found and you can use it when doing async tests where the element will take some time to appear/disappear

You can find a useful summary of these helper functions in the official docs page.

Summary screenshot from Official docs of testing library

You can find more details on this API in this official page.

How to Build the Tab Switching Feature

We will start adding the feature to switch tabs in the component and test the component by writing the test first.

Red stage

Let's write a test the switch to a different tab on click of the "Second Tab" list item.

Since we don't have this functionality implemented, we will fail this test first and that's okay. Once we fail the test, we should write the logic to make it pass in the next step.

So let's write a failing test:

test("should switch tabs", async () => {
        render(VerticalTabs);

        const secondTabElement = screen.getByText(/Second Tab/i);

        fireEvent.click(secondTabElement)

        await screen.findByText(/Second Tab Heading/i);
})

We are using the fireEvent from the testing library to simulate the click of the element. We can make the test async and await for the element since the text will change after the element is clicked.

You should have a failing test now:

Test failing unable to find the content

Green stage

Let's add the logic to change the tab in the Svelte component. We can do that easily by creating a selectedIndex variable and changing its value based on the selected tab.

<script lang="ts">
    let selectedIndex = 0;

    const changeSecondTab = () => {
        selectedIndex = 1;
    }
</script>

<div class="vertical-tab-container">
    <ul class="vertical-tab">
        <li>First Tab</li>
        <li on:click={() => changeSecondTab()}>Second Tab</li>
        <li>Third Tab</li>
    </ul>

    <div class="vertical-tab-content">
        {#if selectedIndex == 0}
            <h2>First Tab Heading</h2>
            <p>...</p>
        {:else if selectedIndex == 1}
            <h2>Second Tab Heading</h2>
            <p>...</p>
        {/if}
    </div>
</div>

Note: This is not the best implementation. It is only meant for showing that you can do minimal work to make the test pass. We will clean it up in the next stage

We have a method changeSecondTab that will change the selectedIndex value to 1 which will make the #if condition to change the tab. Even though it is not the best solution to handle all cases, we have a starting point.

Let's look at the test now. It should be working:

Refactor

Let's fix the implementation to make it more generic and have it work for all three tabs. We can also add an indicator to show which tab is currently selected.

<script lang="ts">
    let selectedIndex = 0;

    const changeTab = (index: number) => {
        selectedIndex = index;
    }
</script>

<div class="vertical-tab-container">
    <ul class="vertical-tab">
        <li class:selected={selectedIndex == 0} 
            on:click={() => changeTab(0)}>First Tab</li>

        <li class:selected={selectedIndex == 1} 
            on:click={() => changeTab(1)}>Second Tab</li>

        <li class:selected={selectedIndex == 2} 
            on:click={() => changeTab(2)}>Third Tab</li>
    </ul>

    <div class="vertical-tab-content">
        {#if selectedIndex == 0}
            <h2>First Tab Heading</h2>
            <p>...</p>
        {:else if selectedIndex == 1}
            <h2>Second Tab Heading</h2>
            <p>...</p>
        {:else}
            <h2>Third Tab Heading</h2>
            <p>...</p>
        {/if}
    </div>
</div>

<style>
    ...
    .selected {
        color: blue;
    }
</style>

We have created a method changeTab that will be called on the click of each element and then change the selectedIndex. This will cause the #if logic to change the tab based on its value.

We also have class:selected followed by an expression and when the expression becomes true, the selected class is added to the element. So we have added one more CSS class and we made the text colour blue to show the selected tab.

Finished vertical tabs component

Test after finishing refactor

We have now confirmed that the test is also passing after the refactor. You can continue this process to add more tests and features to your component.

How to Add Animation

Svelte makes it easy to add animation when content is changed. You can make use of the transition directive to add pre-built animation to your application.

So let's add a fly animation when the content changes. You can import the fly animation from svelte/transition and then add it to the element using transition:fly. This will add the default fly animation when the content flies out and new content flies in. Such a neat effect with just a single line of code!

import { fly } from 'svelte/transition';

<div class="vertical-tab-content" >
        {#if selectedIndex == 0}
            <div transition:fly>
                <h2>First Tab Heading</h2>
                <p>...</p>
            </div>
        {:else if selectedIndex == 1}
            <div transition:fly>
                <h2>Second Tab Heading</h2>
                <p>...</p>
            </div>
        {:else}
            <div transition:fly>
                <h2>Third Tab Heading</h2>
                <p>...</p>
            </div>
        {/if}
    </div>

Animation brings life to your application and helps it stand out. I am a big fan of the simple animation transition system in Svelte.

Conclusion

In this tutorial, you have learned how to create a new component using test-driven development methodology. Please share your feedback on this post and let me know your thoughts.

Thanks for reading! You can contact me on Twitter @sriram_thiagar. I regularly post articles on my blog eternaldev.com if you want to read more articles from me.

Hello everyone. I am Sriram, and I work as a Full Stack developer. I like to share my learning with others. I have been blogging for more than a year now on my website.

A developer portfolio is a great way to showcase your current skill level to potential employers.

This guide will go from hello world to a fully-featured portfolio project to show your current projects with images and links to source code. You'll also build an accompanying blog where you can detail what you have learned along the way.

Hi 👋, my name is Scott, and I have been blogging about my journey through web development since July 2016.

I'm a freeCodeCamp alumnus – I started my freeCodeCamp journey back in 2016 – and have been a professional developer since March, 2018.

I have written about how to build a Gatsby blog from scratch in the past and want to take you through doing the same again, this time with Svelte!

This quite an extensive guide (33 sections!) so I've added a table of content's to help you navigate around the post:

• What we're going to build
• Who's this guide for?
• The stack (what technology we'll be using)
• What is Svelte?
• What is SvelteKit?
• What is Vite?
• What is GraphQL?
• What is GraphCMS?
• How to Set Up GraphCMS
• How to Query Content
• How to Create Your Svelte Project
• How to Show GraphQL Data on the Index Page
• How to Add Markup for the Index Page
• How to Build the First Svelte Component
• How to Style in Svelte
• How to Style with Tailwind and DaisyUI
• How to Style the Projects Component
• How to Use the SvelteKit __layout File
• How to Build the Landing Page with Projects Listed
• How to Use SvelteKit Routing
• How to Build the Blog
• How to Build the Navbar and Footer Components
• How to Add a Theme Switch
• How to Add the About Page
• How to Make a Sitemap
• Robots.txt
• RSS Feed Generation
• Email Signup with Revue
• Continuous Deployment with Vercel
• Google Search Console
• Resources
• What we have accomplished

What we're going to build

We will build a fully-featured portfolio and blog with the framework that took the top spot for most loved framework on the Stack Overflow developer survey in 2021 – Svelte.

Using Svelte with GraphCMS means you can control the adding and removing of content on your site without the need to push any changes to Git.

Features:

• Landing page with projects listed
• Blog
• Theme switch
• Sitemap
• RSS feed generation
• Robots.txt
• Continuous Deployment with Vercel
• Build integrations to publish and build the site on content changes

There's also an optional email signup section with resources mentioned, but it's not essential to this project we're about to start. You can find resources for that toward the end.

One thing that's typically not covered with guides like this is actual deployment and getting your site on search engines like Google. But here, I'll be going through the whole process so you can have something you will be proud of at the end.

If you want to take it a step further with analytics, then check out my guide on configuring a Svelte project with Fathom Analytics, the privacy-first analytics provider. But I didn't include it here, as it's a paid feature and out of the scope of free.

Prerequisites

This guide comes with a few presumptions for the reader:

• An understanding of HTML, CSS, and JavaScript (the holy trinity of web development)
• A GitHub account or similar (GitLab or Bitbucket). Not essential but some hosting services require you to connect a Git repository.
• A development environment, Node.js installed on your machine version 14+, a terminal, and a text editor like VS Code.
• There are browser options like GitHub codespaces or Gitpod if you don't have these configured.

If you don't have a development environment set up there's no need to worry – you can use Gitpod to spin up an environment with this link: http://gitpod.io/#https://github.com/spences10/sveltekit-skeleton

This will get you started with the SvelteKit skeleton which is created when you use the CLI to create a new SvelteKit project.

I'll be using Microsoft's Visual Studio Code (VS Code) along with the VS Code integrated Git client.

There'll be a Git commit at the end of each section. This is optional but helps get you into the habit of committing regularly. It's also useful for when you want to deploy the project at the end.

Who's this guide for?

If you are well on your way through the freeCodeCamp curriculum and want to have something to show where your current skill level is, this guide will be a great accompaniment.

This guide will give you all you need to get started with Svelte and give you the confidence to start making your own projects with it.

The stack (what technology we'll be using)

Although I have mentioned a lot of the technology we'll be using, I'll take this opportunity to list out what we'll be using whilst we go through this guide.

• SvelteKit – the framework we'll use to create the pages and components
• Tailwind + daisyUI – how we'll style the project
• Tailwind CSS Typography to take care of styling the text content
• Marked to convert the Markdown content to HTML
• GraphCMS – where we'll store the content for the project details and blog posts
• graphql-request – used to query data from the GraphCMS API

What is Svelte?

Svelte is a component framework that allows you to write pages and components in what you're used to – HTML, CSS and JavaScript. It is an open-source front end compiler created by Rich Harris and maintained by the Svelte core team members.

Note that it is a compiler. This means that all the HTML, CSS, and JavaScript are built up-front into standalone JavaScript modules that reduces the load on the client (the browser).

It's compiled, rather than shipping a JavaScript run-time to the browser like React or Vue. This produces a much leaner project being shipped to the browser.

What is SvelteKit?

SvelteKit is a framework that has the Svelte language at it's core with some added features. These include file-based routing, endpoints, and layouts, to name a few.

Endpoints in SvelteKit are modules that you can write in JavaScript to create HTTP methods (get, post, delete), which can be accessed in SvelteKit via the SvelteKit fetch API. More on this later.

What is Vite?

Vite is the build tool you use to compile SvelteKit projects. Vite was created by Evan You, the creator of Vue. Vite is framework-agnostic and a great addition to the SvelteKit toolset.

What is GraphQL?

GraphQL is a query language for APIs, giving users and clients the flexibility to ask for the data they need when they need it.

A GraphQL query looks like this:

A GraphQL query displaying the query on the left and the results on the right

On the left is the query which is for the name field in the project model with the "data" being returned in the resulting query on the right.

The query returned in JavaScript Object Notation (JSON) is what can be consumed by the client (a browser, a mobile app, an in store display or a fridge).

What is GraphCMS?

GraphCMS is a headless GraphQL-based Content Management System (CMS) that will let you spin up a back end for your content delivery.

You can do this in minutes with the click of a button from one of the provided templates or you can build your own schema with the simple user interface (UI).

How to Set Up GraphCMS

The team over at GraphCMS created a template for this, so setting up the backend for this is a one click deploy.

You'll need to log into GraphCMS first. You can log in with your GitHub account or authenticate via other means.

Once you are logged in you will be presented with your GraphCMS dashboard. If this is your first time using GraphCMS you can scroll down the page to "Developer Portfolio & Blog" in the "Create a new project" section. Select "Developer Portfolio & Blog" and click "+ Create project".

We're then prompted to give our project a name. I'm going to call it "Portfolio and Blog", and the description can be left blank for now. You can pick the data centre closest to you for where your project will be hosted. I'm in the UK so I'll pick the UK data centre.

Pick your data centre

Note, if you are adding your own content then toggle "Include template content?" on.

Leave this toggled if you are going to add your content at a later date.

As a side note, all content for GraphCMS is served from a globally distributed CDN so there's no need to worry about latency for users not near your specified data centre.

Click the "Create project" button at the bottom of the page.

Once the project has finished being provisioned you are presented with what plan you want to use. Pick the community "Free forever" plan.

There will be another prompt to ask you if you want to invite teammates. Just select "Invite later".

The GraphCMS dashboard will look like this. All of the project sections are on the panel on the left. In the next section we'll be taking a look at those.

The GraphCMS dashboard with arrows pointing to the Schema, Content, Assets and API Playground sections.

How to Query Content

Let's make our first GraphQL query. This is going to be a list of all the projects added to the CMS that are in the project model.

Go to the API playground and enter the following GraphQL query into the "New Query" tab in the GraphQL playground.

query GetProjects {
  projects {
    name
    slug
    description
    demo
    sourceCode
    image {
      url
    }
  }
}

This query is selecting the projects model then each field that is contained in that model.

How to Create Your Svelte Project

If you're using Gitpod you can skip to creating a .env file. If you're setting up locally then let's get started. From the terminal we can create our project with the following npm command:

npm init svelte@next my-developer-portfolio

From the CLI I'll pick the following options:

? Which Svelte app template? › - Use arrow-keys. Return to submit.
    SvelteKit demo app
❯   Skeleton project
? Use TypeScript? › No
? Add ESLint for code linting? › No
? Add Prettier for code formatting? › Yes

I'll follow the rest of the instructions from the CLI. If you take a look at the output from the CLI you'll also notice a couple of other features we'll be taking advantage of soon. Here's what my output looks like:

Your project is ready!
✔ Prettier
  https://prettier.io/docs/en/options.html
  https://github.com/sveltejs/prettier-plugin-svelte#options

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: cd my-developer-portfolio
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

Take note of the "Install community-maintained integrations" section with Svelte Adders – we'll be using one of those later for adding Tailwind.

Now to change directory (CD) into the project folder, initialise a Git repository, and install the dependencies:

# cd into project directory
cd my-developer-portfolio
# initialise a new git repo and make first commit
git init && git add -A && git commit -m "Initial commit"
# install dependencies
npm install # or 'npm i' for shorthand

I'll open my text editor and check out the project. I have VS Code installed so using the code command will open it and the . specified the current directory:

code .

Time to check that everything is up and running as expected, so let's spin up the dev server:

# start the dev server
npm run dev

Now that we've validated everything is working as expected, it's time to make a .env file. This is where the GraphQL API URL is going to live. You can create the file with your text editor user interface (UI) if you choose. I'll be using the following command from the root of my project to create the file:

# Ctrl-c to stop the dev server
touch .env
echo VITE_GRAPHQL_API= >> .env

That command from the terminal is creating a .env file then adding VITE_GRAPHQL_API= into that file.

In the .env file, add the "Content API" URL from the GraphCMS project.

The settings panel can be accessed form the sidebar:

GraphCMS project settings

Then "API access":

Then click on the "Content API" URL. This will copy it to the clipboard for you:

Select the content API URL

Now add that to the .env file. It should now look something like this:

VITE_GRAPHQL_API=https://api-region.graphcms.com/v2/projectid/master

How to Show GraphQL Data on the Index Page

Let's make our first request to our GraphQL API!

First up, to get some data on the page we're going to make the request to the GraphQL API from the index page.

To do that we'll need to install a couple of dependencies, graphql-request and graphql. graphql-request is what we'll be using to send our GraphQL queries to the GraphQL API. graphql is the JavaScript implementation of the GraphQL language.

npm i -D graphql-request graphql

Note the -D in the install command there. That's because Svelte doesn't need any run-time dependencies as it compiles the code upfront before sending it to the browser.

Let's start by adding a script block with the context of module <script context="module"> and import the gql tag and the GraphQLClient from graphql-request.

We'll also define a SvelteKit load function. This is so we can grab the data from the API before the page mounts (loads).

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'

  export const load = async () => {

  }
</script>

Inside the SvelteKit load function we can then define a new GraphQL client. The client accepts a URL (the GraphCMS API URL) and an options object.

We're going to put in the VITE_GRAPHQL_API we created earlier. Note that the variable starts with VITE_ which means that Vite can use this variable. We'll need to import it with import.meta.env, and it should look a lot like this:

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'

  export const load = async () => {
    const client = new GraphQLClient(
      import.meta.env.VITE_GRAPHQL_API
    )
</script>

Now that the client is defined we can use it to pass a query to the GraphCMS GraphQL API.

Taking the query we made earlier to query for all projects, we can add that to a query variable to use with the GraphQL client we defined.

The query uses the GraphQL gql language tag inside backticks gql```. Then we can destructure the projects from theawait`'ed response we get from the GraphQL client:

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'

  export const load = async () => {
    const client = new GraphQLClient(
      import.meta.env.VITE_GRAPHQL_API
    )

    const query = gql`
      query GetProjects {
        projects {
          name
          slug
          description
          demo
          sourceCode
          image {
            url
          }
        }
      }
    `

    const { projects } = await client.request(query)
  }
</script>

Now that the client has the query, we can return the data from the response of the client projects and return them as props for the page to use.

The data from the GraphQL API can now be passed to the page as props in the return of the load function:

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'

  export const load = async () => {
    const client = new GraphQLClient(
      import.meta.env.VITE_GRAPHQL_API
    )

    const query = gql`
      query GetProjects {
        projects {
          name
          slug
          description
          demo
          sourceCode
          image {
            url
          }
        }
      }
    `

    const { projects } = await client.request(query)

    return {
      props: {
        projects,
      },
    }
  }
</script>

Now that the data is being returned we need to bring that into the page.

We can do that in the <script> tags on the page. So yes there two sets of script tags – the first <script context="module"> to run the SvelteKit load function before the page loads (or mounts), then the regular <script> tags to define any JavaScript needed on the index.svelte file and to also to accept the props which is projects.

In the last section here we're accepting the projects returned from the load function with export let projects in the <script> tags. Now that variable can be used in the page.

For illustration purposes I'm adding the projects variable into a <pre> tag and stringifying the results with {JSON.stringify(projects, null, 2)}. This is temporary so that we can validate and visualise the data coming into the page.

<script context="module">
  import { gql, GraphQLClient } from 'graphql-request'

  export const load = async () => {
    const client = new GraphQLClient(
      import.meta.env.VITE_GRAPHQL_API
    )

    const query = gql`
      query GetProjects {
        projects {
          name
          slug
          description
          demo
          sourceCode
          image {
            url
          }
        }
      }
    `

    const { projects } = await client.request(query)

    return {
      props: {
        projects,
      },
    }
  }
</script>

<script>
  export let projects
</script>

<pre>{JSON.stringify(projects, null, 2)}</pre>

Time to start up the dev server and see how things look now:

npm run dev

Here's the output which looks really similar to the Projects GraphQL output in the GraphQL playground we made earlier:

localhost output after running npm run dev

I know I really walked you through every step of that one. That's to highlight the different sections of what we're doing.

This will be a similar pattern for the rest of of the project.

The following steps will look like this:

1. Make a GraphQL query to define the data needed.
2. Give that query to the GraphQL client.
3. Work with the returned data from the client in the page.

Refactor the GraphQL client

As we'll be using the GraphQL client in more than one page, it's time to move that out into its own file so that it can be reused throughout the project.

Svelte has a lib folder for files that are reused throughout the project but there's not a folder (or directory if you prefer that term) for that yet – so it's time to create one. We can create a graphql-client.js file for the GraphQL client to go in:

# make the folder
mkdir src/lib
# create the file
touch src/lib/graphql-client.js

Now to move out the client from the index page to the newly created src/lib/graphql-client.js file:

import { GraphQLClient } from 'graphql-request'
const GRAPHQL_ENDPOINT = import.meta.env.VITE_GRAPHQL_API

export const client = new GraphQLClient(GRAPHQL_ENDPOINT)

In the src/routes/index.svelte I can remove the initialisation of the client and import the client from its newly created file in the lib folder.

Here's the difference. If you're not familiar with a Git diff, then the + and - next to the lines means that those lines are added (+ ) or removed (-):

<script context="module">
+  import { client } from '$lib/graphql-client'
-  import { gql, GraphQLClient } from 'graphql-request'
+  import { gql } from 'graphql-request'

  export const load = async () => {
-   const client = new GraphQLClient(import.meta.env.VITE_GRAPHQL_API)

    const query = gql`
      query GetProjects {
        projects {
          name
          slug
          description
          demo
          sourceCode
          image {
            url
          }
        }
      }
    `

    const { projects } = await client.request(query)

    return {
      props: {
        projects,
      },
    }
  }
</script>

<script>
  export let projects
</script>

<pre>{JSON.stringify(projects, null, 2)}</pre>

With that done we can start using the refactored client in our index page.

Let's commit our changes to Git before moving onto the next section:

git add .
git commit -m "Show GraphQL data on index page"

How to Add Markup for the Index Page

Up until now we've really only displayed the data from the API endpoint in a pre tag. Time to change that by breaking up the data returned from the GraphQL API into sections on the index page.

So let's start by removing the <pre> tag, adding in a <h1> for the page title, then in a <div> we can use one of the Svelte expressions to loop through the data with Svelte {#each}.

The each expression takes in the projects object. Then you can work with a variable for that, let's say project, and you can reference the various properties on that variable.

Here's an example of how that could look:

{#each projects as project}
  <div>
    <img src={project.image[0].url} alt={project.name} />
    <a href={`/projects/${project.slug}`}>
      <div>
        <h2>{project.name}</h2>
        <p>
          {project.description.slice(0, 80)}...
        </p>
      </div>
    </a>
  </div>
{/each}

To take it a step further we can de-structure the properties from that part of the loop so there's no need to reference the specific properties from project.

Note that the image.url is also being de-structured here as well.

So instead of {#each projects as project} we can do this {#each projects as { name, slug, description, image }}.

Here's how the src/routes/index.svelte file should look now:

<script context="module">
  import { client } from '$lib/graphql-client'
  import { gql } from 'graphql-request'

  export const load = async () => {
    const query = gql`
      query GetProjects {
        projects {
          name
          slug
          description
          tags
          demo
          sourceCode
          image {
            url
          }
        }
      }
    `
    const { projects } = await client.request(query)

    return {
      props: {
        projects,
      },
    }
  }
</script>

<script>
  export let projects
</script>

<h1>Recent Projects by Me</h1>

<div>
  {#each projects as { name, slug, description, image }}
    <div>
      <img src={image[0].url} alt={name} />
      <a href={`/projects/${slug}`}>
        <div>
          <h2>{name}</h2>
          <p>
            {description.slice(0, 80)}...
          </p>
        </div>
      </a>
    </div>
  {/each}
</div>

How to Build the First Svelte Component

What we're going to do now is make our first Svelte component. This will be for the project card we made in the last code block.

This is so we can reuse that code in other parts of the project. So, it's going to be everything inside the {#each} loop we did to display each project on the index page, this section here:

<div>
  <img src={image[0].url} alt={name} />
  <a href={`/projects/${slug}`}>
    <div>
      <h2>{name}</h2>
      <p>
        {description.slice(0, 80)}...
      </p>
    </div>
  </a>
</div>

Let's create a lib folder and a project-card.svelte component to go in that folder:

# make components folder
mkdir src/lib/components
# create the component file
touch src/lib/components/project-card.svelte

In that file we can now add in the markup for the project card:

<div>
  <img src={image[0].url} alt={name} />
  <a href={`/projects/${slug}`}>
    <div>
      <h2>{name}</h2>
      <p>
        {description.slice(0, 80)}...
      </p>
    </div>
  </a>
</div>

The markup at the moment has the variables for the image URL, the project name, and description. Currently this won't work because those variables are not referenced anywhere.

Inside some <script> tags we can define the variables that are expected by the component.

<script>
  export let url = ''
  export let name = ''
  export let slug = ''
  export let description = ''
</script>

<div>
  <img src={url} alt={name} />
  <a href={`/projects/${slug}`}>
    <div>
      <h2>{name}</h2>
      <p>
        {description.slice(0, 80)}...
      </p>
    </div>
  </a>
</div>

With the component now ready to accept the variables for the project, we can pass them into the component on the index page.

<script context="module">
  import ProjectCard from '$lib/components/project-card.svelte'
  import { client } from '$lib/graphql-client'
  import { gql } from 'graphql-request'

  export const load = async () => {
    const query = gql`
      query GetProjects {
        projects {
          name
          slug
          description
          tags
          demo
          sourceCode
          image {
            url
          }
        }
      }
    `
    const { projects } = await client.request(query)

    return {
      props: {
        projects,
      },
    }
  }
</script>

<script>
  export let projects
</script>

<h1>Recent Projects by Me</h1>

<div>
  {#each projects as { name, slug, description, image }}
    <ProjectCard {name} {description} url={image[0].url} {slug} />
  {/each}
</div>

The component is being imported between the <script> tags, and then the individual variables from the loop are being passed into it.

Let's take a quick look at the variables being passed. They could be defined like this:

<ProjectCard
  name={name}
  description={description}
  url={image[0].url}
  slug={slug}
/>

Because the expected props on the component are the same as what's being passed, then there is no need to label the props. So this is what we can use:

<ProjectCard {name} {description} url={image[0].url} {slug} />

Note that the image property is an array (as the project can take multiple images) so we're referencing the first index of that array.

Let's commit this before moving onto the next section:

git add .
git commit -m "Add first component"

How to Style in Svelte

With Svelte being a superset of HTML, this means that you can style your .svelte files the same way you would in HTML files.

Adding some <style> tags at the bottom of the file means you can style the elements on the page:

<p>Hello Svelte</p>

<style>
  p {
    color: red;
    font-size: 2rem;
  }
</style>

This will style all the <p> elements in that file with red font and a font size of 2rem.

You get a lot of control this way, allowing you to specify stiles to that file alone.

This is just an example, and it's not how I will be doing the styling for this project. I'm instead opting for Tailwind CSS.

How to Style with Tailwind and DaisyUI

Styling is a very opinionated and personal subject, so what I'll be doing may not fit with what you have in mind.

For that reason I'll keep styling to a minimum and try not to focus too much on it.

I'll be using Tailwind CSS and daisyUI for the speed at which I can create components and styles. If this isn't for you, you can continue styling as suggested in the last section.

I am going to be using svelte-add to configure the project to use TailwindCSS. The Svelte Adders project I mentioned earlier does all the configuration for you with an npm command:

npx svelte-add@latest tailwindcss
# install configured dependencies
npm i

The svelte-add command configured the project for use with Tailwind. It also added a file in src/routes called __layout.svelte – we'll come to this shortly. For now know that it's there, and we will be using it in an upcoming section.

I'm also going to be using a couple of TailwindCSS plugins – these are daisyUI and the TailwindCSS Typography plugin.

daisyUI is a great resource for pre-made components, and you can pick out a number of them from the site. Which is what I'll be doing for the header and footer components.

Tailwind CSS Typography is really useful for styling the content we're getting back from the API. It's a great set of defaults from the Tailwind Labs team.

I'll install them via the terminal:

npm i -D @tailwindcss/typography daisyui

Then I can configure them in the tailwind.config.cjs file:

plugins: [
  require('@tailwindcss/typography'),
  require('daisyui'),
],

There's some additional configuration needed for the TailwindCSS Typography plugin to remove the max width. Here's what the full tailwind.config.cjs looks like:

const config = {
  content: ['./src/**/*.{html,js,svelte,ts}'],

  theme: {
    extend: {
      typography: {
        DEFAULT: {
          css: {
            maxWidth: null,
          },
        },
      },
    },
  },

  plugins: [require('@tailwindcss/typography'), require('daisyui')],
}

module.exports = config

Let's spin up the dev server and validate the install. The project font will be different now.

Commit the changes and we'll move onto the next section:

git add .
git commit -m "Add Tailwind CSS and daisyUI"

How to Style the Projects Component

Ok, now I can add in some styles for the src/components/project-card.svelte file.

This uses several Tailwind classes, and will probably be as much as we deviate from the pre-packaged classes we get from daisyUI:

<script>
  export let url = ''
  export let name = ''
  export let slug = ''
  export let description = ''
</script>

<div class="relative group card shadow-2xl col-span-2">
  <img src={url} alt={name} class="object-cover h-full" />
  <a href={`/projects/${slug}`}>
    <div
      class="absolute bottom-0 left-0 right-0 lg:opacity-0 group-hover:opacity-100 bg-primary p-4 duration-300 text-primary-content"
    >
      <h2 class="font-bold lg:text-xl">{name}</h2>
      <p class="text-sm lg:text-xl">
        {description.slice(0, 80)}...
      </p>
    </div>
  </a>
</div>

On the containing div we're adding a relative position then using the Tailwind group class to apply the group-hover on the div containing the description content.

Because the containing div has a relative position on it we can then absolutely position the description div at the bottom of the containing div with bottom-0, left-0 and right-0 so it spans the bottom of the containing div.

The lg: class is so that when the user is on a smaller screen, the div shows regardless of mouse hover.

Let's commit that to Git an move onto the next section:

git add .
git commit -m "Style Projects component"

How to Use the SvelteKit __layout File

For global styles we can use the special SvelteKit __layout.svelte file. We can use it to control the global styles and also to get external information you want to pass down to any pages or components used in the project.

For now let's add some container classes for responsive screen sizes:

<script>
  import '../app.css'
</script>

<main class="container max-w-3xl mx-auto px-4 mb-20">
  <slot />
</main>

Commit that to Git, then onto the next section:

git add .
git commit -m "Add layout container CSS classes"

How to Build the Landing Page with Projects Listed

Let's get started with the landing page. On the landing page we're going to want to display some information about the Author and the Projects.

We already have the projects query defined and in use on the src/routes/index.svelte page. We're also going to want to get data from the author model for use in the index page.

What we're going to need to do is create another GraphQL query for the author in the load function of the src/routes/index.svelte page. Let's hop on over to the GraphCMS GraphQL playground and define that now:

query GetAuthors {
  authors {
    name
    intro
    bio
    slug
    picture {
      url
    }
  }
}

Ok, so, we have a projects query and an authors query. Onto getting data with these two queries now!

To achieve this we're going to use the JavaScript [Promise.all](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all) method to get the data from both endpoints and return them for use in the project.

<script context="module">
  import ProjectCard from '$lib/components/project-card.svelte'
  import { client } from '$lib/graphql-client'
  import { gql } from 'graphql-request'

  export const load = async () => {
    const authorsQuery = gql`
      query GetAuthors {
        authors {
          name
          intro
          bio
          slug
          picture {
            url
          }
        }
      }
    `
    const projectsQuery = gql`
      query GetProjects {
        projects {
          name
          slug
          description
          tags
          demo
          sourceCode
          image {
            url
          }
        }
      }
    `
    const [authorReq, projectsReq] = await Promise.all([
      client.request(authorsQuery),
      client.request(projectsQuery),
    ])
    const { authors } = authorReq
    const { projects } = projectsReq

    return {
      props: {
        projects,
        authors,
      },
    }
  }
</script>

<script>
  export let projects
  export let authors
</script>

<h1 class="font-bold text-center mb-20 text-5xl">
  Welcome to my Portfolio
</h1>

{#each authors as { name, intro, picture: { url } }}
  <div class="flex mb-40 items-end">
    <div class="mr-6">
      <h2 class="text-3xl mb-4 font-bold tracking-wider">{name}</h2>
      <p class="text-xl mb-4">{intro}</p>
    </div>

    <img class="mask mask-squircle h-48" src={url} alt={name} />
  </div>
{/each}

<div
  class="grid gap-10 md:grid-cols-4 md:px-10 lg:grid-cols-6 lg:-mx-52"
>
  {#each projects as { name, slug, description, image }}
    <ProjectCard {name} {description} url={image[0].url} {slug} />
  {/each}
</div>

Wow! There's a lot in here now.

Those two GraphQL queries are really taking up a lot of space in that load function. Let's take a minute to refactor them out of here so they can be used elsewhere. It'll also help clean up this page as it's getting a bit busy now with GraphQL queries taking up most of the file.

How to Refactor the GraphQL Queries

Let's grab those two queries at the top of the file there, these two:

const authorsQuery = gql`
  query GetAuthors {
    authors {
      name
      intro
      bio
      slug
      picture {
        url
      }
    }
  }
`
const projectsQuery = gql`
  query GetProjects {
    projects {
      name
      slug
      description
      tags
      demo
      sourceCode
      image {
        url
      }
    }
  }
`

And add them to their own JavaScript file. Let's create that now:

# create the graphql-queries.js file
touch src/lib/graphql-queries.js

Then we can take the queries from the src/routes/index.svelte file and add them in there:

import { gql } from 'graphql-request'

export const authorsQuery = gql`
  query GetAuthors {
    authors {
      name
      intro
      bio
      slug
      picture {
        url
      }
    }
  }
`

export const projectsQuery = gql`
  query GetProjects {
    projects {
      name
      slug
      description
      tags
      demo
      sourceCode
      image {
        url
      }
    }
  }
`

Note that they now have export in front of the const. This is so they can be exported from this file for use in the src/routes.index.svelte file.

In the src/routes.index.svelte I can now import those queries, cleaning up the file a little by removing all the noise of the queries in the load function. Here's what it should look like now:

<script context="module">
  import ProjectCard from '$lib/components/project-card.svelte'
  import { client } from '$lib/graphql-client'
  import { authorsQuery, projectsQuery } from '$lib/graphql-queries'

  export const load = async () => {
    const [authorReq, projectsReq] = await Promise.all([
      client.request(authorsQuery),
      client.request(projectsQuery),
    ])
    const { authors } = authorReq
    const { projects } = projectsReq

    return {
      props: {
        projects,
        authors,
      },
    }
  }
</script>

<script>
  export let projects
  export let authors
</script>

<svelte:head>
  <title>My Portfolio project</title>
</svelte:head>

<h1 class="font-bold text-center mb-20 text-5xl">
  Welcome to my Portfolio
</h1>

{#each authors as { name, intro, picture: { url } }}
  <div class="flex mb-40 items-end">
    <div class="mr-6">
      <h2 class="text-3xl mb-4 font-bold tracking-wider">{name}</h2>
      <p class="text-xl mb-4">{intro}</p>
    </div>

    <img class="mask mask-squircle h-48" src={url} alt={name} />
  </div>
{/each}

<div
  class="grid gap-10 md:grid-cols-4 md:px-10 lg:grid-cols-6 lg:-mx-52"
>
  {#each projects as { name, slug, description, image }}
    <ProjectCard {name} {description} url={image[0].url} {slug} />
  {/each}
</div>

Whoa! What's this <svelte:head> doing here?

The Svelte Head API allows us to add HTML meta data to the project – so, tags like the page title like in the above example but also meta tags for Google, Facebook, and Twitter. Also monetization.

This implementation will give the browser tab a title of "My Portfolio project".

Apart from the head component being added in here, we're also using the data from the authors query to display the data from the authors model on GraphCMS.

Commit the changes to Git:

git add .
git commit -m "Landing page with projects listed"

Ok, nice – we've got our landing page sorted.

How to Use SvelteKit Routing

Now we have a nice landing page with links to projects. But clicking on a link will take us to a 404 page. That's because the route for that page doesn't exist yet.

Let's create that now. We'll be using SvelteKit file-based routing to do this.

We'll need to create a file which will take the slug from the projects card and use that for the path for the project. We can make the file first:

# make the projects folder
mkdir src/routes/projects
# create the [slug].svelte file
touch src/routes/projects/'[slug]'.svelte

In the src/routes/projects/[slug].svelte we can define a SvelteKit load function which receives a context variable. Let's first take a look at what we get in the context variable:

<script context="module">
  export const load = async context => {
    console.log('=====================')
    console.log('context', context)
    console.log('=====================')
    return {}
  }
</script>

Refreshing the route for localhost:3000/projects/survey-form will give output in the terminal like this:

=====================
context {
  url: URL {
    href: 'http://localhost:3000/projects/survey-form',
    origin: 'http://localhost:3000',
    protocol: 'http:',
    username: '',
    password: '',
    host: 'localhost:3000',
    hostname: 'localhost',
    port: '3000',
    pathname: '/projects/survey-form',
    search: '',
    searchParams: URLSearchParams {},
    hash: ''
  },
  params: { slug: 'survey-form' },
  props: {},
  session: [Getter],
  fetch: [AsyncFunction: fetch],
  stuff: {}
}
=====================

What we're interested in here is the params.slug property which we can use to make a query to the GraphQL API.

Let's hop on over to the GraphQL playground in our GraphCMS project. There, we'll make a query to filter on a project where the slug matches what's being returned from the SvelteKit load function here:

GraphQL query to query for project where slug matches "survey-form"

In the image, here I've defined a query to filter on the slug field where "survey-form" is being passed to the query.

That's great for that one query, but we want a way to pass variables to the query for each individual project slug we have. Let's take a look at using variables in GraphQL now.

I'll add some parenthesis to the end of the query name, and in those parenthesis I'll define a variable query GetProject($slug: String!) {. The $ denotes it's a variable while the : String! denotes the data type of the variable.

Because GraphQL is strongly typed, this needs to be defined so that GraphQL knows how it can use the variable. The exclamation point ! at the end indicates that the variable is required for the query to work.

Now I can use the variable in place of the hardcoded "survey-form" I used previously:

query GetProject($slug: String!) {
  project(where: {slug: $slug}) {
    name
    description
    tags
    demo
    sourceCode
    image {
      url
    }
  }
}

If I try run that query now I get the following error:

{
  "errors": [
    {
      "message": "variable 'slug' must be defined"
    }
  ],
  "data": null,
}

So to get this running in the GraphQL playground here, I can use the "QUERY VARIABLES" panel you may have noticed in the last image. Clicking on that will open the panel and I can add in the variable value there:

Now with the slug variable defined in the query panel I'm able to run the query.

Ok that's great! How do I use that in the project?

Great question! I want a way to pass that query variable to the GraphQL client with the query.

We can do this much the same way we did it for the index page. This is the same repeating pattern now – and this time we're going to accept the slug variable to use in the query I've defined.

Before we get to that, let's add that project query to the src/lib/graphql-queries.js file:

import { gql } from 'graphql-request'

export const authorsQuery = gql`
  query GetAuthors {
    authors {
      name
      intro
      bio
      slug
      picture {
        url
      }
    }
  }
`

export const projectsQuery = gql`
  query GetProjects {
    projects {
      name
      slug
      description
      tags
      demo
      sourceCode
      image {
        url
      }
    }
  }
`

export const projectQuery = gql`
  query GetProject($slug: String!) {
    project(where: { slug: $slug }) {
      name
      slug
      description
      tags
      demo
      sourceCode
      image {
        url
      }
    }
  }
`

So, there's a bit of repetition going on in this file, now, with the name, slug, description, tags, demo, sourceCode and image.url being repeated in both the Projects and Project queries.

We can use a GraphQL fragment here to re-use the fields on the model. Here's what it looks like:

const PROJECT_FRAGMENT = gql`
  fragment ProjectDetails on Project {
    name
    slug
    description
    tags
    demo
    sourceCode
    image {
      url
    }
  }
`

All the fields are in one query now, the fragment is named ProjectDetails and that is on the Project model. Now that can be used in the Projects and Project queries by spreading (...) the ProjectDetails into the queries:

import { gql } from 'graphql-request'

export const authorsQuery = gql`
  query GetAuthors {
    authors {
      name
      intro
      bio
      slug
      picture {
        url
      }
    }
  }
`

const PROJECT_FRAGMENT = gql`
  fragment ProjectDetails on Project {
    name
    slug
    description
    tags
    demo
    sourceCode
    image {
      url
    }
  }
`

export const projectsQuery = gql`
  ${PROJECT_FRAGMENT}
  query GetProjects {
    projects {
      ...ProjectDetails
    }
  }
`

export const projectQuery = gql`
  ${PROJECT_FRAGMENT}
  query GetProject($slug: String!) {
    project(where: { slug: $slug }) {
      ...ProjectDetails
    }
  }
`

One thing I'm going to need to do now, before we go any further, is use a dependency for the Markdown content of the project description.

This is to take the Markdown content for the project description and turn it into HTML so that it can be presented on the page. I'm going to use marked here:

npm i -D marked

Now that the query is defined we can use it in the src/routes/projects/[slug].svelte file:

<script context="module">
  import { client } from '$lib/graphql-client'
  import { projectQuery } from '$lib/graphql-queries'
  import { marked } from 'marked'

  export const load = async ({ params }) => {
    const { slug } = params
    const variables = { slug }
    const { project } = await client.request(projectQuery, variables)

    return {
      props: {
        project,
      },
    }
  }
</script>

<script>
  export let project
</script>

<svelte:head>
  <title>My Portfolio | {project.name}</title>
</svelte:head>

<div class="sm:-mx-5 md:-mx-10 lg:-mx-20 xl:-mx-38 mb-5">
  <img
    class="rounded-lg"
    src={project.image[0].url}
    alt={project.title}
  />
</div>

<h1 class="text-4xl font-semibold mb-5">{project.name}</h1>

<div class="mb-5 flex justify-between">
  <div>
    {#if project.tags}
      {#each project.tags as tag}
        <span
          class="badge badge-primary mr-2 hover:bg-primary-focus cursor-pointer"
          >{tag}</span
        >
      {/each}
    {/if}
  </div>
</div>

<div
  class="mb-5 prose flex prose-a:text-primary hover:prose-a:text-primary-focus"
>
  <a class="mr-5" href={project.demo}>Demo</a>
  <a href={project.sourceCode}>Source Code</a>
</div>

<article class="prose prose-xl">
  {@html marked(project.description)}
</article>

In the src/routes/projects/[slug].svelte file we're doing pretty much the same as we did with the src/routes/index.svelte file except we're using params: { slug } to pass the slug value to the GraphQL client to get the data relating to that slug.

{@html} is used to display the contents as HTML. Use this with caution if you do not trust the source of the HTML – but in our case we know we can trust the HTML because we put it there! 😊

Let's get that committed to Git before moving on:

git add .
git commit -m "Add project page using SvelteKit routing"

How to Build the Projects Index Page

Now to create an index for the projects. It's much like the landing page, but this time it's only to list out the projects.

I'll create an index for the projects route:

touch src/routes/projects/index.svelte

Now navigating to localhost:3000/projects will show that file.

Time to repeat the pattern used to get the projects list on the index page but without the author information:

<script context="module">
  import ProjectCard from '$lib/components/project-card.svelte'
  import { client } from '$lib/graphql-client'
  import { projectsQuery } from '$lib/graphql-queries'

  export const load = async () => {
    const { projects } = await client.request(projectsQuery)

    return {
      props: {
        projects,
      },
    }
  }
</script>

<script>
  export let projects
</script>

<svelte:head>
  <title>My Portfolio projects</title>
</svelte:head>

<h1 class="font-bold mb-20 text-center text-5xl">
  Recent Projects by Me
</h1>

<div
  class="grid gap-10 md:grid-cols-4 md:px-10 lg:grid-cols-6 lg:-mx-52"
>
  {#each projects as { name, slug, description, image }, index}
    <ProjectCard
      {name}
      {description}
      url={image[0].url}
      {index}
      {slug}
    />
  {/each}
</div>

Nice! Now navigating to localhost:3000/projects gives us a dedicated projects page.

Let's move on to repeating these patterns we've learned for the blog index page and the individual blog posts.

Commit to Git the current changes before moving on:

git add .
git commit -m "Add projects index page"

How to Build the Blog

Time for the blog now. This is pretty much the same approach as with the projects, but let's go through the process again.

1. Make a GraphQL query to define the data needed.
2. Give that query to the GraphQL client.
3. Work with the returned data from the client in the page.

Make a GraphQL query for the posts. As we'll be following the same pattern as with the projects (query for all projects and filter for a specific project) we can make a GraphQL fragment for the data we want to get, both on all posts and a single post.

const POST_FRAGMENT = gql`
  fragment PostDetails on Post {
    title
    slug
    date
    content
    tags
    coverImage {
      url
    }
    authors {
      name
    }
  }
`

We can then use the same pattern as before where we use the fragment in both a Posts and Post query:

export const postsQuery = gql`
  ${POST_FRAGMENT}
  query GetPosts {
    posts {
      ...PostDetails
    }
  }
`

export const postQuery = gql`
  ${POST_FRAGMENT}
  query GetPost($slug: String!) {
    post(where: { slug: $slug }) {
      ...PostDetails
    }
  }
`

With the POST_FRAGMENT and postsQuery and postQuery added to the src/lib/graphql-queries.js file we can make a posts route then add in a [slug].svelte file and a index.svelte file.

mkdir src/routes/posts
touch src/routes/posts/{'[slug]'.svelte,index.svelte}

Let's tackle the posts index page first then we can move onto individual posts with the slug file.

The first section we have done a few times now, defining a SvelteKit load function then using the GraphQL client to query for the posts:

<script context="module">
  import { client } from '$lib/graphql-client'
  import { postsQuery } from '$lib/graphql-queries'
  import { marked } from 'marked'

  export const load = async () => {
    const { posts } = await client.request(postsQuery)

    return {
      props: {
        posts,
      },
    }
  }
</script>

<script>
  export let posts
</script>

<svelte:head>
  <title>Portfolio | Blog</title>
</svelte:head>

Now we need to add the markup for the page. Using the daisyUI card classes, we can define a pretty decent looking card, then loop through the posts tags and finally link out to the post page.

<h1 class="text-4xl mb-10 font-extrabold">Blog posts</h1>

{#each posts as { title, slug, content, coverImage, tags }}
  <div class="card text-center shadow-2xl mb-20">
    <figure class="">
      <img
        class=""
        src={coverImage.url}
        alt={`Cover image for ${title}`}
      />
    </figure>
    <div class="card-body prose">
      <h2 class="title">{title}</h2>
      {@html marked(content).slice(0, 150)}
      <div class="flex justify-center mt-5 space-x-2">
        {#each tags as tag}
          <span class="badge badge-primary">{tag}</span>
        {/each}
      </div>
      <div class="justify-center card-actions">
        <a href={`/posts/${slug}`} class="btn btn-outline btn-primary"
          >Read &rArr;</a
        >
      </div>
    </div>
  </div>
{/each}

Time to repeat that pattern again!

SvelteKit load function using the GraphQL client passing in the post query and variable coming from the page params:

<script context="module">
  import { client } from '$lib/graphql-client'
  import { postQuery } from '$lib/graphql-queries'
  import { marked } from 'marked'

  export const load = async ({ params }) => {
    const { slug } = params
    const variables = { slug }
    const { post } = await client.request(postQuery, variables)

    return {
      props: {
        post,
      },
    }
  }
</script>

<script>
  export let post

  const { title, date, tags, content, coverImage } = post
</script>

<svelte:head>
  <title>Blog | {title}</title>
</svelte:head>

Then for the markup on the page, utilising the Tailwind CSS Typography classes here for beautiful markup:

<div class="sm:-mx-5 md:-mx-10 lg:-mx-20 xl:-mx-38 mb-5">
  <img
    class="rounded-xl"
    src={coverImage.url}
    alt={`Cover image for ${title}`}
  />
</div>

<div class="prose prose-xl">
  <h1>{title}</h1>
</div>

<p class="text-secondary text-xs tracking-widest font-semibold">
  {new Date(date).toDateString()}
</p>

<div class="mb-5 flex justify-between">
  <div>
    {#if tags}
      <div class="mt-5 space-x-2">
        {#each tags as tag}
          <span class="badge badge-primary">{tag}</span>
        {/each}
      </div>
    {/if}
  </div>
</div>

<article div class="prose prose-lg">
  {@html marked(content)}
</article>

Commit our changes now:

git add .
git commit -m "Add posts index page and slug page"

Ok, now we have a lot of pages on the site to look at, but no way to navigate around them yet.

How to Build the Navbar and Footer Components

I'm going to grab some pre-made components now from daisyUI for the footer and navbar. Let's create the files first before hopping over to the daisyUI site to grab them:

touch src/lib/components/{footer.svelte,navbar.svelte}

Those curly braces in that command create both the files for us.

How to Make the Footer Component

First up, we can do the footer component. I'll be using the second of the footer footer-center components on the daisyUI components footer section. This is what it looks like:

And here's the markup for that component:

<footer class="p-10 footer bg-base-200 text-base-content footer-center">
  <div class="grid grid-flow-col gap-4">
    <a class="link link-hover">About us</a> 
    <a class="link link-hover">Contact</a> 
    <a class="link link-hover">Jobs</a> 
    <a class="link link-hover">Press kit</a>
  </div> 
  <div>
    <div class="grid grid-flow-col gap-4">
      <a>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
          <path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"></path>
        </svg>
      </a> 
      <a>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
          <path d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z"></path>
        </svg>
      </a> 
      <a>
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
          <path d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z"></path>
        </svg>
      </a>
    </div>
  </div> 
  <div>
    <p>Copyright © 2021 - All right reserved by ACME Industries Ltd</p>
  </div>
</footer>

One thing to note here: if you don't like the SVGs directly in the HTML here, they can be abstracted out into their own components and imported into the footer file. Because Svelte is a superset of HTML, this makes breaking up large files into manageable components possible.

Let's do that now to reduce the file size and make it easier to parse. So, first I'll create the icon files:

touch src/lib/components/{twitter-icon.svelte,you-tube-icon.svelte,facebook-icon.svelte}

Now I can remove the <svg> tags from the footer component, and add them to their respective files.

Here's what the Twitter one looks like. You can repeat this for the remaining components:

<svg
  xmlns="http://www.w3.org/2000/svg"
  width="24"
  height="24"
  viewBox="0 0 24 24"
  class="fill-current"
>
  <path
    d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"
  />
</svg>

There's a few bit's with this we want to change before we use it in our project here.

In the footer element, change the background from bg-base-200 to bg-primary and change text-base-content to text-primary-content.

<footer
  class="p-10 footer bg-primary text-primary-content footer-center"
>

Then there's the links to be added in the next section:

<div class="grid grid-flow-col gap-4">
  <a class="link link-hover" href="/projects">Portfolio</a>
  <a class="link link-hover" href="/posts">Blog</a>
  <a class="link link-hover" href="/about">About</a>
</div>

You can add in the hard-links to the social providers for now. Although they are available in the Social model.

For the copyright section at the end of the file, I'll add in some JavaScript to get the current year so there's no need to worry about updating this again.

<p>
  Copyright &copy; {`${new Date().getFullYear()}`} - All right reserved
  by ME
</p>

Here's the adjusted file now:

<script>
  import FacebookIcon from './facebook-icon.svelte'
  import TwitterIcon from './twitter-icon.svelte'
  import YouTubeIcon from './you-tube-icon.svelte'
</script>

<footer
  class="p-10 footer bg-primary text-primary-content footer-center"
>
  <div class="grid grid-flow-col gap-4">
    <a class="link link-hover" href="/projects">Portfolio</a>
    <a class="link link-hover" href="/posts">Blog</a>
    <a class="link link-hover" href="/about">About</a>
  </div>
  <div>
    <div class="grid grid-flow-col gap-4">
      <a href="https://twitter.com">
        <TwitterIcon />
      </a>
      <a href="https://youtube.com">
        <YouTubeIcon />
      </a>
      <a href="https://facebook.com">
        <FacebookIcon />
      </a>
    </div>
  </div>
  <div>
    <p>
      Copyright &copy; {`${new Date().getFullYear()}`} - All right reserved
      by ME
    </p>
  </div>
</footer>

With the imported SVGs there's a lot of noise removed from the file and it's a lot nicer to read.

Now that we have our footer component we're going to want to have it persisted across route (page) changes. The __layout.svelte file is the perfect place for this so let's go and add it in there:

<script>
  import Footer from '$lib/components/footer.svelte'
  import '../app.css'
</script>

<main class="container max-w-3xl mx-auto px-4 mb-20">
  <slot />
</main>
<Footer />

Let's commit our footer component to Git then move onto the next section:

git add .
git commit -m "Add footer component"

How to Make the Navbar Component

Now for the navbar component, I'll be using the second to last of the navbar components on the daisyUI components navbar section. This is what it looks like:

There's a lot of SVGs in this example that I'm not going to be using, so I'll remove them. Keep them if you prefer, but for the sake of readability I'll be removing them. There only really needs to be links in there for the Portfolio page, Blog page, and the About page.

Here's what the markup looks like for it with the SVGs removed:

<div
  class="navbar mb-2 shadow-lg bg-neutral text-neutral-content rounded-box"
>
  <div class="flex-1 px-2 mx-2">
    <span class="text-lg font-bold">Portfolio and Blog</span>
  </div>
  <div class="flex-none hidden px-2 mx-2 lg:flex">
    <div class="flex items-stretch">
      <a class="btn btn-ghost btn-sm rounded-btn" href="/projects">
        Portfolio
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/posts"
        >Blog</a
      >
      <a class="btn btn-ghost btn-sm rounded-btn" href="/about"
        >About</a
      >
    </div>
  </div>
</div>

Note that I have added href tags here to point to the various pages in the project.

We should add that in the same place as the footer in the __layout.svelte file so we can see the changes as we go through building this component:

<script>
  import Footer from '$lib/components/footer.svelte'
  import Navbar from '$lib/components/navbar.svelte'
  import '../app.css'
</script>

<Navbar />
<main class="container max-w-3xl mx-auto px-4 mb-20">
  <slot />
</main>
<Footer />

Some more changes to add to this now: I'll increase mb-2 up to mb-16, and also I'll remove rounded-box and replace it with a sticky class so the navbar persists on scrolling through long pages sticky top-0 z-10.

One last thing to do is replace the <span> tag with "Portfolio and Blog" in it to an a tag so that we can navigate back to the home page by clicking there:

<a class="text-lg font-bold" href="/">Portfolio and Blog</a>

Here's what the file looks like now:

<div
  class="navbar mb-16 shadow-lg bg-neutral text-neutral-content sticky top-0 z-10"
>
  <div class="flex-1 px-2 mx-2">
    <a class="text-lg font-bold" href="/">Portfolio and Blog</a>
  </div>

  <div class="flex-none hidden px-2 mx-2 lg:flex">
    <div class="flex items-stretch">
      <a class="btn btn-ghost btn-sm rounded-btn" href="/projects">
        Portfolio
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/posts"
        >Blog</a
      >
      <a class="btn btn-ghost btn-sm rounded-btn" href="/about"
        >About</a
      >
    </div>
  </div>
</div>

Very nice! But wait – what about smaller screen sizes? You may have noticed that if you're on a smaller screen, the links for Portfolio, Blog, and About are missing.

In the class for the containing div on the links flex-none hidden px-2 mx-2 lg:flex, this is going to hide the elements until the screen size gets to the large breakpoint (lg:), then the display will be set to flex.

Let's use some additional daisyUI classes from the dropdown section to show when the screen size is below lg:

<div class="dropdown dropdown-left lg:hidden">
  <div tabindex="0" class="m-1 btn">Links</div>
  <ul
    tabindex="0"
    class="bg-neutral rounded-box shadow text-neutral-content p-2 w-52 menu dropdown-content "
  >
    <a class="btn btn-ghost btn-sm rounded-btn" href="/projects">
      Portfolio
    </a>
    <a class="btn btn-ghost btn-sm rounded-btn" href="/posts">
      Blog
    </a>
    <a class="btn btn-ghost btn-sm rounded-btn" href="/about">
      About
    </a>
  </ul>
</div>

So when the screen size is below the lg: Tailwind breakpoint the above dropdown, classes will be shown.

Here's what the full file looks like:

<div
  class="navbar mb-16 shadow-lg bg-neutral text-neutral-content sticky top-0 z-10"
>
  <div class="flex-1 px-2 mx-2">
    <a class="text-lg font-bold" href="/">Portfolio and Blog</a>
  </div>

  <div class="dropdown dropdown-left lg:hidden">
    <div tabindex="0" class="m-1 btn">Links</div>
    <ul
      tabindex="0"
      class="bg-neutral rounded-box shadow text-neutral-content p-2 w-52 menu dropdown-content "
    >
      <a class="btn btn-ghost btn-sm rounded-btn" href="/projects">
        Portfolio
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/posts">
        Blog
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/about">
        About
      </a>
    </ul>
  </div>

  <div class="flex-none hidden px-2 mx-2 lg:flex">
    <div class="flex items-stretch">
      <a class="btn btn-ghost btn-sm rounded-btn" href="/projects">
        Portfolio
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/posts"
        >Blog</a
      >
      <a class="btn btn-ghost btn-sm rounded-btn" href="/about"
        >About</a
      >
    </div>
  </div>
</div>

Sweet! We've now got a nice responsive nav menu for mobile users.

Time to commit the changes we've made to Git:

git add .
git commit -m "Add navbar component"

Footer and navbar sorted, now let's move onto the theme switch.

How to Add a Theme Switch

All modern sites have a theme switch, so let's take a look at implementing that on our site. Saadeghi (the creator of daisyUI) has made the really nice package to take care of this for us called theme-change so we should install that now:

npm i -D theme-change

Now we can use that in the __layout.svelte file like this:

<script>
  import Footer from '$lib/components/footer.svelte'
  import Navbar from '$lib/components/navbar.svelte'
  import { onMount } from 'svelte'
  import { themeChange } from 'theme-change'
  import '../app.css'

  onMount(async () => {
    themeChange(false)
  })
</script>

<Navbar />
<main class="container max-w-3xl mx-auto px-4 mb-20">
  <slot />
</main>
<Footer />

So, let's break this down and see what's happening here. The onMount is code run once the page is visible in the browser (once it's loaded/mounted). Once the page has loaded then we're initialising themeChange. This will change the data-act-class for the desired theme.

Currently there's no way to set it, so let's change that now on the src/app.html file:

<!DOCTYPE html>
<html lang="en" data-theme="dracula">
  <head>
    <meta charset="utf-8" />
    <meta name="description" content="" />
    <link rel="icon" href="/favicon.png" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1"
    />
    %svelte.head%
  </head>
  <body>
    <div id="svelte">%svelte.body%</div>
  </body>
</html>

Here we're adding the default theme of Dracula on the containing html for the whole project with data-theme="dracula". You can play about with this with all the provided themes from daisyUI – try changing dracula to corporate and see it change!

Ok, that's nice, but how do I change it? Right – let's do that now. Rather than fill up the post with more code I'm going to link to a GitHub repository that has it already packaged up for us in SvelteKit theme switch. That component is an HTML select element that has all the daisyUI themes listed in it.

Copy the contents of that file and add it to a theme-select.svelte component, which doesn't exist yet – so, let's create that now:

touch src/lib/components/theme-select.svelte

Remove the class="mb-8" from the containing div and add in some additional styles to the select element. Here's the diff:

Now that we have a theme select component, we should add it somewhere accessible throughout the project. Where do you think that should go? You guessed it – the navbar.svelte file:

<script>
  import ThemeSelect from './theme-select.svelte'
</script>

<div
  class="navbar mb-16 shadow-lg bg-neutral text-neutral-content sticky top-0 z-10"
>
  <div class="flex-1 px-2 mx-2">
    <a class="text-lg font-bold" href="/"> Portfolio and Blog </a>
  </div>

  <div class="dropdown dropdown-left lg:hidden">
    <div tabindex="0" class="m-1 btn">Links</div>
    <ul
      tabindex="0"
      class="bg-neutral rounded-box shadow text-neutral-content p-2 w-52 menu dropdown-content "
    >
      <a class="btn btn-ghost btn-sm rounded-btn" href="/projects">
        Portfolio
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/posts">
        Blog
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/about">
        About
      </a>
    </ul>
  </div>

  <div class="flex-none hidden px-2 mx-2 lg:flex">
    <div class="flex items-stretch">
      <a class="btn btn-ghost btn-sm rounded-btn" href="/projects">
        Portfolio
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/posts">
        Blog
      </a>
      <a class="btn btn-ghost btn-sm rounded-btn" href="/about">
        About
      </a>
      <div class="px-4">
        <ThemeSelect />
      </div>
    </div>
  </div>
</div>

So here, we're importing the ThemeSelect component and adding in a containing div for the theme select at the end of our pages list.

You can also add it so it is available on mobile view if you so choose.

Commit the changes to Git:

git add .
git commit -m "Add theme select to navbar"

How to Add the About Page

Let's add in that about page we're linking to in the navbar.

touch src/routes/about.svelte

In this page we can use the authorsQuery we created for the home page to display the author information. Here's the full file:

<script context="module">
  import { client } from '$lib/graphql-client'
  import { authorsQuery } from '$lib/graphql-queries'
  import { marked } from 'marked'

  export const load = async () => {
    const { authors } = await client.request(authorsQuery)

    return {
      props: {
        authors,
      },
    }
  }
</script>

<script>
  export let authors
  const {
    name,
    intro,
    bio,
    picture: { url },
  } = authors[0]
</script>

<svelte:head>
  <title>My Portfolio project | About {name}</title>
</svelte:head>

<h1 class="font-bold text-center mb-20 text-5xl">About Me</h1>

<div class="flex mb-40 items-end">
  <div class="mr-6">
    <h2 class="text-3xl mb-4 font-bold tracking-wider">{name}</h2>
    <p class="text-xl mb-4">{intro}</p>
  </div>

  <img class="mask mask-squircle h-48" src={url} alt={name} />
</div>

<article div class="prose prose-lg">
  {@html marked(bio)}
</article>

Now to commit those changes to Git:

git add .
git commit -m "Add about page"

How to Make a Sitemap

OPTIONAL: Let search engines know what's on your site. A sitemap will help web crawlers know the contents of your site.

I have made an extensive post on how to create a sitemap with SvelteKit if you want to take a look at that for more detail.

This is a SvelteKit endpoint that will return an XML file detailing the contents of the site.

If you want to create one, then make a file for it:

touch src/routes/sitemap.xml.js

Here's the full file:

import { client } from '$lib/graphql-client'
import { gql } from 'graphql-request'

const website = 'https://www.myporfolioproject.com'

export const get = async () => {
  const query = gql`
    query Posts {
      posts {
        title
        slug
      }
    }
  `
  const { posts } = await client.request(query)
  const pages = [`about`]
  const body = sitemap(posts, pages)

  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body,
  }
}

const sitemap = (
  posts,
  pages
) => `<?xml version="1.0" encoding="UTF-8" ?>
<urlset
  xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
  xmlns:news="https://www.google.com/schemas/sitemap-news/0.9"
  xmlns:xhtml="https://www.w3.org/1999/xhtml"
  xmlns:mobile="https://www.google.com/schemas/sitemap-mobile/1.0"
  xmlns:image="https://www.google.com/schemas/sitemap-image/1.1"
  xmlns:video="https://www.google.com/schemas/sitemap-video/1.1"
>
  <url>
    <loc>${website}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  ${pages
    .map(
      page => `
  <url>
    <loc>${website}/${page}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
    )
    .join('')}
  ${posts
    .map(
      post => `
  <url>
    <loc>${website}/posts/${post.slug}</loc>
    <changefreq>daily</changefreq>
    <priority>0.7</priority>
  </url>
  `
    )
    .join('')}
</urlset>`

This is a simplified version to generate a sitemap. If you want the full version then you can check out the source code for the project.

A little more detail on this file now. Similar to how we can have pages and components in SvelteKit, we can also have endpoints. Endpoints in SvelteKit can handle HTTP methods like get, post, and delete.

A quick note on the file notation here: the .xml.js may look a bit odd. This is so that SvelteKit can understand the return type of the endpoint. In this case we want to return XML, but there are other types you can use, like JSON.

In that function we're defining a get function, adding a GraphQL query for the posts, then returning the posts from the query for use in the XML.

How to Use a SvelteKit Endpoint

Now that we've defined our endpoint in src/routes/sitemap.xml.js we can access the data right away. By going to that route in the browser we can see the data returned from that endpoint.

From the browser, go to localhost:3000/sitemap.xml – this will give us the data back from the GraphQL API on our GraphCMS project.

Robots.txt

OPTIONAL: Let search engine robots know what to index. This tells web crawlers like the Googlebot what to and what not to index on your site.

Pages you might not want to index could be things like an admin panel or settings page.

The robots.txt can go in the static folder. Let's create the file now:

touch static/robots.txt

In the case of this project, it's ok for the Googlebot to crawl it all. So our robots.txt file can look like this:

# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:

This is saying to the web crawler to index everything on the site.

RSS Feed Generation

OPTIONAL: Let users have changes made to your site show up in their RSS apps. Again I'll leave this up to you to implement. Much in the same way as the sitemap was created, you can implement a SvelteKit endpoint to generate the XML needed for an RSS feed.

touch src/routes/rss.xml.js

Here's an example file:

import { client } from '$lib/graphql-client'
import { gql } from 'graphql-request'

const name = 'My Portfolio'
const website = 'https://myportfolio.com'

export const get = async () => {
  const query = gql`
    query Posts {
      posts {
        title
        slug
      }
    }
  `
  const { posts } = await client.request(query)
  const body = xml(posts)

  const headers = {
    'Cache-Control': 'max-age=0, s-maxage=3600',
    'Content-Type': 'application/xml',
  }
  return {
    headers,
    body,
  }
}

const xml =
  posts => `<rss xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:content="https://purl.org/rss/1.0/modules/content/" xmlns:atom="https://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>${name}</title>
    <link>${website}</link>
    <description>This is my portfolio!</description>
    ${posts
      .map(
        post =>
          `
        <item>
          <title>${post.title}</title>
          <description>This is my portfolio!</description>
          <link>${website}/posts/${post.slug}/</link>
          <pubDate>${new Date(post.date)}</pubDate>
          <content:encoded>${post.previewHtml} 
            <div style="margin-top: 50px; font-style: italic;">
              <strong>
                <a href="${website}/posts/${post.slug}">
                  Keep reading
                </a>
              </strong>  
            </div>
          </content:encoded>
        </item>
      `
      )
      .join('')}
  </channel>
</rss>`

There's a lot to unpack in that, so what I have done is made an extensive post on setting up an RSS feed on your SvelteKit site. This will give you all the information you need to get set up.

Email Signup with Revue

OPTIONAL: If you want to take this a step further with endpoints, you can add a newsletter sign up page using the Revue API. I've detailed that in a post if you want to take that route.

There's also a great video from WebJeda on collecting Google forms data in a SvelteKit project if you want to take that route.

Continuous Deployment with Vercel

If you have been following along up to this point (thank you by the way 🙏), you might be wondering why we've been making Git commits at the end of each section. Well all that has been leading up to this section.

I'll be using Vercel for deployment. If you don't already have an account you can sign up with your preferred provider – I'll be using GitHub.

If you want to deploy your site as it is, right now, you can use the Vercel CLI using:

npx vercel

No need to install the CLI, as it's all done for you with the npx command. You'll be walked through the deployment by the CLI.

Here's the output from running the command and selecting the default for each question (enter):

? Set up and deploy “~/repos/my-developer-portfolio”? [Y/n] y
? Which scope do you want to deploy to? Scott Spence
? Link to existing project? [y/N] n
? What’s your project’s name? my-developer-portfolio
? In which directory is your code located? ./
Auto-detected Project Settings (SvelteKit):
- Build Command: svelte-kit build
- Output Directory: public
- Development Command: svelte-kit dev --port $PORT
? Want to override the settings? [y/N] n
🔗 Linked to spences10/my-developer-portfolio (created .vercel and added it to .gitignore)
🔍 Inspect: https://vercel.com/spences10/my-developer-portfolio/78bRRjiweZsipYbu8Q4Bg9JRmvGR [2s]

Now going to the URL from the CLI indicated with 🔍 Inspect I can watch the project being built on Vercel. Great, our site is up and running! This is a one time deployment though, so if there are future changes then I'll need to use the CLI again.

Vercel deployment preview page

You may have noticed on the deploy preview page on Vercel that there is a section that says "No repository".

We can add a GitHub repository so that any future changes that are made to the project will be built when the changes are pushed to GitHub.

So, first up we need to add our project to GitHub – let's do that now. If you're already logged into GitHub you can go to the new repository link that you can get to by clicking the plus icon in the far right corner in GitHub.

New repository link

In the new page add in the details for the project:

New GitHub project with description

Then click the "Create repository" button:

The next screen will give you the Git commands you need. As the project is already created, I can use the second set of commands:

git remote add origin git@github.com:spences10/my-developer-portfolio.git
git branch -M main
git push -u origin main

Note that if you're following along, you'll need to take the commands given to you on your repository page rather than using the ones mentioned here, as that will point to my GitHub spences10.

Now that the repo is created on GitHub, I can connect it to Vercel. From the deploy preview page I can select the project by clicking the project name in the header:

This will take me to the project dashboard:

Vercel project dashboard

From here I can click on the "Connect Git repository" button which will take me to the Git section in the project settings:

Connect a Git repository in the Vercel settings menu

Clicking GitHub will bring up a list of projects:

Select the GitHub repository to link

Clicking the "Connect" button will connect the repository. You may have also noticed the "Domains" setting here as well. You can configure your domain here or change the current name with a .vercel.app domain.

One other thing to note here is the "Environment Variables" section in the settings. This will need to have the VITE_GRAPHQL_API environment variable added here:

_Add VITE_GRAPHQLAPI environment variable to the Vercel settings

Now any time there are any changes pushed to GitHub, Vercel will build the site.

How to Publish and Build on Content Changes

Rather than having to push a change to GitHub to create a new build of the project when only the content has changed, you can do this with a GraphCMS integration.

From the Settings panel in GraphCMS, go to the integrations section:

Select the integrations section in the settings panel

Click on the Vercel integration – there's also integrations for Netlify and Gatsby Cloud:

Click on the Vercel integration

Click "Enable" for the Vercel integration:

Enable the Vercel integration

Click the "Connect to Vercel" button when prompted:

Click "Authorise GraphCMS" to make deployments for you on Vercel:

In the "Build projects" section, select your Vercel project from the dropdown selection. The "Display name" is what will appear in the side panel on your content pages. The branch name is the branch you want to deploy to Vercel from GitHub – I use main for the production branch.

There's also an option to specify what models you want to have the integration enabled on. In this case I'm using them all, so selecting "Select all" then finally clicking the "Enable" button:

If I now go to the content section on the GraphCMS project and select a content model to edit an entry, there's a "Start building Production" button that will kick off a new build any time it's clicked.

Here's the Author model and the Vercel integration on the right hand panel:

Google Search Console

OPTIONAL: This is an optional step if you own your own domain. A good way to have your site ranked on the search engines is to use the Google search console.

https://search.google.com/search-console

Add the TXT record to your domain using the Vercel CLI. You can add it manually in the domains section of Vercel as well:

vercel dns add my-developer-portfolio.com @ TXT google-site-verification=g99pqa_kSHiq6AzLtk4HF00tyJhQVt1gGzfUoJQrTPQ

Once your site has been verified, you can add in your sitemap and click the submit button.

Add sitemap to Google search console

That's it! You'll now need to wait for the Googlebot to do it's thing and index your site. You should start seeing search queries coming in over time.

Resources

Here are some of the resources I used to make the content on the blog I created throughout this guide.

• Images with Lorem.space - placeholder image generator
• Markdown with Lorem Markdownum (jaspervdj.be)
• Bio generation with Character Biography Generator (character-generator.org.uk)
• Ideal cover image sizes: The Ideal Cover Photo Size for Each of the Major Social Media Platforms (buffer.com)

You can check these links for further information on Svelte and SvelteKit

• https://kit.svelte.dev/docs
• https://svelte.dev/docs

If you want the source code for this project then you can check out the GitHub repo for all the code. If you have any issues then feel free to log an issue or reach out on Twitter.

What we have accomplished

Time to recap what we've achieved here. We have gone from hello world through to fully featured portfolio and blog!

We covered getting data from a GraphQL API and displaying that data on a page of the project. We then implemented a GraphQL client to retrieve only the data we needed.

We added the all important sitemap so that the site could be discovered and indexed by search engines like Google.

An optional touch was adding in an RSS feed so that anyone that uses an RSS reader can be notified of any new content that is added to the site.

Finally we deployed our finished project to Vercel for the world to see.

Thanks

Thank you so much for taking the time to go through this guide. I hope it gave you all you need to start making your own projects with Svelte.

If you like the content you can check out much more from me on my blog or you can follow me on Twitter.

We just published a full stack web development course on the freeCodeCamp.org YouTube channel. And the best part: it can all be done in a browser using Gitpod.

Mike Nikles developed this course. Mike is a senior developer at Gitpod and a great teacher.

This course covers everything from creating a new repository to deploying to production, and you will learn the reason for every line of code. The Svelte JavaScript framework is used for the frontend with Postgres as the database. The app is deployed using Vercel and Railway.

Here are all the sections covered in this course:

• The Gitpod developer environment
• Project Overview
• Project Architecture
• Initialize the application
• Intro to SvelteKit
• Configure Gitpod
• Develop HTML structure
• Apply CSS styles
• Develop CRUD endpoints: GET and POST
• Develop CRUD endpoints: DELETE
• Develop CRUD endpoints: PATCH - Edit Text
• Develop CRUD endpoints: PATCH - Mark as Done
• Enhance HTML forms
• Install & start the dev database
• Use Prisma ORM
• Update API to use Prisma
• Deploy Database on Railway
• Deploy web app & API on Vercel
• Project review

Watch the full course below or on the freeCodeCamp.org YouTube channel (7-hour watch).

This article gives you a lightning-speed overview of Svelte - a Javascript framework which lets you write less code, use no virtual DOM, and create truly reactive apps.

As if that's not enough, Svelte is super-intuitive too! Built with developers in mind, it is designed to make coding easier, bug-squashing quicker, and a developer's work life generally happier.

If that sounds right up your street, then read on!

While 5 minutes won't be enough to teach you Svelte in depth, it does allow for a solid overview of the basics, including:

• Components
• Importing and Exporting
• Templating
• Event handling
• Event dispatching
• Reactivity

If you want to find out more about Svelte after reading this article, check out the full course over on Scrimba. There, you'll learn about even more Svelte features and have the chance to road test your new skills with a bunch of interactive challenges.

For now, let's get started on the basics!

Components

(Click the image to access the course.)

First, we'll take a look at how to build a Svelte component, which can contain three parts; <script>, which contains Javascript, <style>, which contains CSS and the HTML, which uses the JS from the <script> tag.

<script>
    let say = 'hi';
</script>

<style>
    div {
        color: red;
    }
</style>

<div>
    Say: {say}
</div>

Note: The bare minimum needed for a Svelte component is the HTML, so the app will still work without the <script> and <style> tags.

Importing and Exporting

One big benefit of using frameworks is the ability to modularise code by splitting it into separate components. Components are then imported into the main app using import keyword:

  import Face from './Face.svelte';

Unlike with other frameworks, the export keyword is not required to use a component elsewhere in an app. Instead, it is used to pass parameters, or props, from parent elements to their children.

For example, we can set a size prop with a default size in our component:

<script>
    export let size = 1;
</script>

<div style="font-size: {size}em">=)</div>

This allows us to easily adjust the size of the imported component over in our App.svelte file:

<script>
    import Face from './Face.svelte';
</script>

<Face size="4" />
<Face size="10" />
<Face />

The various sizes appear on the DOM as follows:

(Click the image to access the course.)

Head over to the course on Scrimba to view and play around with the full code.

Templating

The Svelte templating syntax is a great feature which lets us add if statements and for loops to our HTML.

The syntax for an if statement looks like this:

<Container>
    {#if say}
        <div>
            Hi!
        </div>

    {/if}
</Container>

While a for loop is as follows:

{#each [2,1,0] as faceIndex}
        <Face index={faceIndex} />
    {/each}

Event handling

To allow the user to interact with our app, we need event handlers. In this scrim, we see how to add a simple on:click to a <button> to show our app's header:

<button on:click={() => {showHeader = true}}>show</button>

And what a header it is..! (Click the image to access the course.)

There is a gotcha with this, though - it only works with the native HTML <button> tag and not imported components called <Button>.

Luckily, we can work around this by using event forwarding, i.e. adding an on:click to the native <button> tag in its component file:

<button on:click>
        <slot></slot>
</button>

Event dispatching

(Click the image to access the course.) Event dispatching is a great feature of Svelte which increases code usability by allowing us to use the same element for more than one action.

In this scrim, we learn how to use one <Button> component to both show and hide an element.

We create an event dispatcher in the <Button> component file like this:

<script>
    import {createEventDispatcher} from 'svelte';
    const dispatch = createEventDispatcher();    
</script>

We then add the dispatcher to our native HTML <button> like this:

<button on:click={() => dispatch('show')}>
    Show
</button>
<button on:click={() => dispatch('hide')}>
    Hide
</button>

Lastly, we declare the button's functionality options in the App.svelte file as follows:

<Buttons on:show={() => {showHeader = true}} on:hide={() => {showHeader = false}} />

We can refactor this by passing values up through the dispatch using the event variable (e). In this case, the <Button> in our App.svelte file looks like this:

<Buttons on:click={(e) => {showHeader = e.detail}} />

While the native HTML <button>s in our component file look like this:

<button on:click={() => dispatch('click', true)}>
    Show
</button>
<button on:click={() => dispatch('click', false)}>
    Hide
</button>

Reactivity

If you want a piece of code to rerun every time its associated variable is updated, then Svelte's unique feature, the reactive statement, is for you. We declare a reactive statement with $: as follows:

let score = 0;
    $: smileySays = 'Hi there, your score is: ' + score;

It's also possible to run if statements inside reactive statements. The code to do so looks like this:

let score = 0;
    $: smileySays = 'Hi there, your score is: ' + score;
    $: if (score < -4) smileySays = 'Wow your score is low!'

That's about all the features we can cram into our 5-minute tour of Svelte. I hope you found it useful and are inspired to try out the framework for yourself and test your new-found skills.

Don't forget to check out the full course over at Scrimba to find out about even more Svelte features and give the coding challenges a try.

Wherever your coding journey takes you next, happy learning :)

If you're looking to learn a new Javascript framework which allows you to write less code, use no virtual DOM, and create truly reactive apps, then Svelte is for you.

What is Svelte?

Svelte is a Javascript framework, a compiler, and a language. Unlike other Frameworks such as React and Vue which do much of their work in the browser, Svelte does its work in the compile step. This results in highly efficient code and a potentially faster run-time on the client-side.

Svelte offers faster development, faster web pages, and a better developer experience - the creators of Svelte created it with other developers in mind).

On top of this, knowing Svelte will help you stand out to potential employers and shows that you're interested in newer technologies.

Great! Tell me about Svelte.

This article takes you through Scrimba's brand-new 16-part Svelte course which covers the following essential topics to put you well on your way to becoming a Svelte master:

• Components
• Importing/exporting
• Slots
• Template
• Event Handling
• Event Dispatching
• Buttons
• Reactivity
• Binding

The course is delivered through a series of interactive screencasts, allowing you to practice your new skills and truly embed your learning.

Finishing up with an in-depth Final Project which consolidates all the skills learned along the way, the course helps you build the muscle memory needed to become an effective Svelte developer.

It is led by is Noah Kaufman, a Senior Frontend Developer from San Francisco, California with an M.S in Computational Linguistics.

If this sounds right up your street, head on over to the course on Scrimba and read on to find out more.

Components

In Svelte, everything exists inside a component, and the first cast shows what the anatomy of these components looks like.

The component has three optional parts; <script>, which contains Javascript, <style> which contains CSS, and finally some HTML, which is able to use the JS from the <script> tag.

<script>
    let say = 'hi';
</script>

<style>
    div {
        color: red;
    }
</style>

<div>
    Say: {say}
</div>

Importing and Exporting

Here, we take a quick look at how to import and export components so they can be used elsewhere in our app.

Components are imported with the import keyword:

import Face from "./Face.svelte";

While the export keyword allows other components to change components on import:

<script>
    export let size;
</script>

<div style="font-size: {size}em">=)</div>

Challenge 1

In this cast, Noah challenges us to put our new Svelte skills to the test. No spoilers here, so click through to the course to give the challenge a try and check the solution.

Slots

Slots allow us to place elements inside components. For example, inserting a <slot> into a <div> with the class Container allows us to place as many elements as we want into the <Container> component:

<div class="Container">
  <slot></slot>
</div>

The newly-placed elements are children of the component:

<Container>
  <div>Say: {say}</div>

  <Face index={0} />
  <Face />
  <Face index={2} />
</Container>

Templating

The Svelte templating syntax allows us to add if statements and for loops to our HTML. That's right, to our HTML!

An if statement looks like this:

<Container>
    {#if say}
        <div>
            Hi!
        </div>

    {/if}
</Container>

While a for loop looks like this:

{#each [2,1,0] as faceIndex}
        <Face index={faceIndex} />
    {/each}

Making Header - Challenge 2

In this challenge, we use what we've just learned about Svelte templating to add a Header to our app. Check out the course to try it out for yourself and check your answer.

Event Handling

Next up, Noah shows us a simple inline event handler, which allows the user to show the app's header at the click of a button.

<button
  on:click={() => {
    showHeader = true;
  }}
>
  show
</button>

However, if we use a <Button> component rather than a native HTML button, this kind of on:click handler won't work. We can fix this with event forwarding, i.e. adding a plain on:click to the native <button> in the component file:

<button on:click>
  <slot></slot>
</button>

Event Dispatching

Event dispatching allows a component to emit more than one type of event, for example, the same <Button> component can be used both to show an element and to hide it.

We create an event dispatcher like this:

<script>
  import {createEventDispatcher} from 'svelte'; const dispatch =
  createEventDispatcher();
</script>

We then add it to native HTML <button> like this:

<button on:click={() => dispatch('show')}>
    Show
</button>
<button on:click={() => dispatch('hide')}>
    Hide
</button>

Finally we define the <Button>'s functionality options in the App.svelte file like this:

<Buttons
  on:show={() => {
    showHeader = true;
  }}
  on:hide={() => {
    showHeader = false;
  }}
/>

The same outcome can also be achieved by passing values (in this case true and false) up through the dispatch. The values can then be accessed through the event variable e.

<button on:click={() => dispatch('click', true)}>
    Show
</button>
<button on:click={() => dispatch('click', false)}>
    Hide
</button>

<Container>
  <Buttons
    on:click={(e) => {
      showHeader = e.detail;
    }}
  />
</Container>

Buttons - Challenge 3

Our third challenge is more involved than the previous two and puts our new knowledge of event dispatchers to the test. To help us along, Noah breaks the challenge down into bitesize chunks:

<!-- Challenge 3 -
1. add a prop in Buttons.svelte called buttons which is a list of objects like:
[{value: '', text: ''}, ...etc]
2. use #each to turn all the objects into buttons that:
    a. have innerHTML equal to the .text of the object.
    b. dispatch a click event that passes the .value of the object.
3. Handle the event in App.svelte to update the score.
-->

Head over to the course now to give it a try and see the solution.

Reactivity

Reactive statements are a unique feature of Svelte which tell a piece of code to re-run each time a variable within that code is updated.

For example, the code below will run each time the score variable is changed (note that we declare a reactive statement with $:).

let score = 0;
$: smileySays = "Hi there, your score is: " + score;

We can also run if statements inside reactive statements:

let score = 0;
$: smileySays = "Hi there, your score is: " + score;
$: if (score < -4) smileySays = "Wow your score is low!";

Reactive Challenge - Challenge 4

We can now test our new skills by completing the Reactive Challenge, which brings us one step closer to being ready for the final project.

Once again, Noah splits the challenge into smaller parts to help us on our way:

<!-- Challenge 4 -
1. add happyScore and storyIndex (both equal 0)
2. smileySays and buttons get updated whenever storyIndex changes
3. add clickHandler function that increments storyIndex and adds e.detail.value to the happyScore -->

Click through to the course to try it out and check your answer.

A Bit More Reactivity

Next up, Noah gives us another example of using Reactive Statements, an emoji face which changes according the current happyScore variable:

const faceList = [
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
  "?",
];
$: index = happyScore + 5;

Similarly to the previous examples, the code runs each time the 'happyScore' variable changes, so a Reactive Statement is just the right tool for the job.

Binding

Binding allows a user to update a variable (in this case called name) by entering a value into an <input> field. As binding is a two-way process, changing the variable also updates the <input>'s value:

We bind values like this:

<script>
    import Face from './Face.svelte';
    import Container from './Container.svelte';
    import story from './story';

    let showHeader = false;
    let storyIndex = 0;
    $: smileySays = story[storyIndex].smileySays;
    //variable name below:
    let name = '';
</script>

<Container>
    //binding declared below:
    <input type="text" bind:value={name}>
    <h1>{name}, {smileySays}</h1>
</Container>

As well as binding variables, it's also possible to bind values from objects, lists or components.

Final Project

Click the image to access the final project.

Well done for making it through the course! We wrap things up with a final project which ties together all the skills we've learned along the way.

Once again Noah breaks it down into smaller chunks to help us through:

<!-- Final Challenge
1. The header appears if the user chooses Svelte answer
(HINT: happyScore will be greater than 0 if they answer Svelte)
2. Display final message depending on happyScore
3. Implement the Reset functionality
-->

Check out the cast to test out your news Svelte skills and see the solution.

Outro

That brings us to the end of the course. Great job for finishing it! And if you're eager to learn more Svelte, do check out the official docs at svelte.dev for topics like: Context, Stores, Lifecycle methods, Actions, Sapper and more.

You can also follow my SvelteMaster Youtube Channel and do sign up for the Scrimba Svelte Bootcamp to be the first to know about the launch and any discounts.

I hope you've found it useful and can put your brand-new knowledge to good use very soon.

In the meantime, why not head over to Scrimba to see what other courses are on offer to help you reach your coding goals?

If you also want to hang out with your fellow learners or chat with more experienced folks and the creators of Scrimba courses, do join our Scrimba Discord server.

Happy learning :)

The ideal reader of the book has zero knowledge of Svelte, has maybe used Vue or React, but is looking for something more, or a new approach to things.

Svelte is very much worth looking into, because it provides a refreshing point of view and several unique features to the Web.

Thank you for getting this ebook. I hope it will help you learn more about Svelte!

You can reach me on Twitter @flaviocopes. My website is flaviocopes.com.

Table of Contents

• Introduction to Svelte
• Svelte Components
• Handling State in Svelte
• Svelte Reactivity
• Svelte Props
• Cross-component State Management
• Slots
• Svelte Lifecycle events
• Svelte Bindings
• Conditional Logic in Templates
• Looping in Svelte Templates
• Promises in Svelte Templates
• Working with Events in Svelte
• Where To Go From Here

Introduction to Svelte

Svelte is an exciting web frontend framework that you can use to build web applications.

If you're just starting out, Svelte is a great choice as your first frontend framework.

If you are already experienced in React, Vue.js, Angular or another frontend frameworks you will be pleasantly surprised by Svelte.

Compared to React, Vue, Angular and other frameworks, an app built using Svelte is compiled beforehand so you don't have to serve the whole framework to every one of your site visitors.

As a result, the fruition of the experience is smoother, consumes less bandwidth, and everything feels faster and more lightweight.

At deployment, Svelte disappears and all you get is plain (and fast!) JavaScript.

This is just the tip of the iceberg. Let's get into it!

You can get a PDF and ePub version of this Svelte Handbook

How to get started with Svelte

To use Svelte, you need to have Node.js installed because all the tooling we're going to use is based on Node.

Make sure you also check out my Node.js Handbook

One little tip I have is that the Svelte website provides a very cool "playground" to test out Svelte at https://svelte.dev/repl.

It's pretty cool to test small Svelte apps and to experiment with things.

With the terminal, go into the folder where you usually keep your code, for example dev folder in your home.

Run this command on your computer:

npm create vite@latest helloworld -- --template svelte

This sets up everything you need to get started with your first Svelte application. I called it helloworld so you will see a folder with that name.

Go into that folder with cd helloworld and then run

npm install

and when this ends:

npm run dev

This runs our new Svelte site in development mode, starting the app on localhost on port 5173:

If you point your browser there, you'll see the sample project showing up:

You're now ready to open the code in your favorite editor, for example VS Code.

You can do that running code . in the folder, if you've installed the The Visual Studio Code command-line interface.

As soon as you open the project in the the editor, VS Code will prompt you to install the Svelte for VS Code extension (if it doesn't, go to the extensions panel and search it):

Install it, as it provides the code highlighter and other features:

Now back to the project!

Open the src folder, you will see a few files in there. The main one, pun intended, is main.js, where the Svelte application is set up:

This file is the entry point and initializes the main App component, which is defined in App.svelte:

<script>
  import svelteLogo from './assets/svelte.svg'
  import Counter from './lib/Counter.svelte'
</script>

<main>
  <div>
    <a href="https://vitejs.dev" target="_blank">
      <img src="/vite.svg" class="logo" alt="Vite Logo" />
    </a>
    <a href="https://svelte.dev" target="_blank">
      <img src="{svelteLogo}" class="logo svelte" alt="Svelte Logo" />
    </a>
  </div>
  <h1>Vite + Svelte</h1>

  <div class="card">
    <Counter />
  </div>

  <p>
    Check out
    <a href="https://github.com/sveltejs/kit#readme" target="_blank"
      >SvelteKit</a
    >, the official Svelte app framework powered by Vite!
  </p>

  <p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
</main>

<style>
  .logo {
    height: 6em;
    padding: 1.5em;
    will-change: filter;
  }
  .logo:hover {
    filter: drop-shadow(0 0 2em #646cffaa);
  }
  .logo.svelte:hover {
    filter: drop-shadow(0 0 2em #ff3e00aa);
  }
  .read-the-docs {
    color: #888;
  }
</style>

See, we have 3 main sections:

<script></script>

<main></main>

<style></style>

This is what we call a single file component, a single file that determines all about our component:

• the markup (the HTML)
• the behavior (the JavaScript)
• the style (the CSS)

This structure will be the base for all your Svelte components.

Svelte Components

Modern Web development is very much focused on components, and Svelte is no different.

What is a component? A component is an atomic part of the application that is self-contained and optionally references other components to compose its output.

In other words, it's an atomic part of the application.

A form can be a component.

An input element can be a component.

The whole application is a component.

Svelte components contain all that's needed to render a piece of the UI.

Every Svelte component is declared in a .svelte file, and in there you'll find the content (markup), the behavior (JavaScript), and the presentation (CSS) without having to define separate files.

Which is a good way to define a piece of the UI because you don't need to search for the items that affect the same element across various files.

Here's a sample component, which we'll store in a file called Dog.svelte:

<script>
  export let name
</script>

<style>
  h1 {
    color: purple;
  }
</style>

<h1>The dog name is {name}!</h1>

JavaScript code must be put in the script tag.

The CSS you have in the style tag is scoped to the component and does not "leak" outside.

If another component has an h1 tag, this style will not affect that.

This is very handy when reusing components you already wrote for other applications, for example, or when you include Open Source libraries published by other people.

For example you can include a date picker component built by someone else and none of the stylings of the component will affect the rest of the application.

And in the same way, none of the CSS you wrote will modify the look of the date picker.

Importing the component in other components

A component can be used by other components.

Other components can now import the Dog component we wrote in their code.

For example here's a House component:

<script>
  import Dog from './Dog.svelte'
</script>

You can now import and use the Dog component, as if it was an HTML tag:

<script>
  import Dog from './Dog.svelte'
</script>

<Dog />

Exporting specific functions from a component

As you saw above, to export the component we didn't have to do anything, because the component itself is the default export.

What if you want to export something other than the component markup and its associated and built-in functionality?

You must write all the functions you want to export from a special script tag with the context="module" attribute.

Here's an example. Say you have a Button component in Button.svelte:

<button>A button</button>

and you want to provide other components the ability to change the color of the button.

A better solution for this use case is to use props, which is something we'll talk about in the next chapter. But stick with me for this example

You can provide a function, called changeColor.

You write and export it in this special script tag:

<script context="module">
  export function changeColor() {
    //...logic to change color..
  }
</script>

<button>A button</button>

Note that you can have another "normal" script tag, in the component.

Now other components can import Button, which is the default export, and the changeColor function too:

<script>
  import Button, { changeColor } from './Button.svelte'
</script>

Now that is probably a silly example, but knowing you can use this functionality can be quite helpful.

Handling State in Svelte

Every component, in addition to defining the markup, the CSS and the JavaScript logic, can host its own state.

What is state? State is any data that's needed to make the component render what it's rendering.

For example, if a form input field has the string "test" written into it, there'll be a variable somewhere holding this value. That's the state of the input field.

The field is selected? A variable somewhere will register this fact. And so on.

State is defined in the script part of a component:

<script>
  let count = 0
</script>

To update the value of a state variable all you need is an assignment. A simple JavaScript assignment, for example using the = operator.

Say you have a count variable. You can increment that using, simply, count = count + 1, or even count++:

<script>
  let count = 0

  const incrementCount = () => {
    count++
  }
</script>

{count} <button on:click="{incrementCount}">+1</button>

I find this one of the refreshing parts of Svelte, as in React for example you'd have to use the useState() hook, and use a setter function any time you want to update the value of the state variable.

This is more intuitive and much more "JavaScript-like" syntax.

We need to be aware of one thing, which is learned pretty quickly: we must also make an assignment when changing the value.

Svelte always wants an assignment, otherwise it might not recognize that the state changed.

For simple values like strings and numbers, that's mostly a given, because all methods on String return new strings, and same for numbers - they are immutable.

But for arrays? We can't use methods that alter the array. Like push(), pop(), shift(), splice()... because there's no assignment. They change the inner data structure, but Svelte can't detect that.

Well, you can still use them, but after you've done your operation, you can use a "trick" and reassign the variable to itself, like this:

let list = [1, 2, 3]
list.push(4)
list = list

It's is a bit counter-intuitive, compared to what I just said before, but it's a quirk you'll remember with experience.

Of course you could use alternatives that avoid you this situation, for example instead of using Array.push() you can use the spread operator to add an item:

let list = [1, 2, 3]
list = [...list, 4]

Svelte Reactivity

In Svelte you can listen for changes in the component state, and update other variables.

For example if you have a count variable:

<script>
  let count = 0
</script>

and you update it by clicking a button:

<script>
  let count = 0

  const incrementCount = () => {
    count = count + 1
  }
</script>

{count} <button on:click="{incrementCount}">+1</button>

You can listen for changes on count using the special syntax $: which defines a new block that Svelte will re-run when any variable referenced into it changes.

Here's an example:

<script>
  let count = 0

  const incrementCount = () => {
    count = count + 1
  }

  $: console.log(`${count}`)
</script>

{count} <button on:click="{incrementCount}">+1</button>

I used the block:

$: console.log(`${count}`)

You can write more than one of them:

<script>
  $: console.log(`the count is ${count}`)
  $: console.log(`double the count is ${count * 2}`)
</script>

And you can also add a block (opening and closing curly brackets {}) to group more than one statement:

<script>
  $: {
    console.log(`the count is ${count}`)
    console.log(`double the count is ${count * 2}`)
  }
</script>

I used a console.log() call in there, but you can update other variables too:

<script>
  let count = 0
  let double = 0

  $: {
    console.log(`the count is ${count}`)
    double = count * 2
    console.log(`double the count is ${double}`)
  }
</script>

Svelte Props

You can import a Svelte component into any other component using the syntax import name from 'path', like this:

<script>
  import SignupForm from './SignupForm.svelte'
</script>

The path is relative to the current component path. ./ means "this same folder". You'd use ../ to go back one folder, and so on.

Once you do so, you can use the newly imported component in the markup, like an HTML tag:

<SignupForm />

In this way, you are forming a parent/child relationship between the two components: the one that imports, and the one that is imported.

Often you want to have the parent component pass data to the child component.

You can do so using props. Props behave similarly to attributes in plain HTML, and they are a one-way form of communication.

In this example we pass the disabled prop, passing the JavaScript value true to it:

<SignupForm disabled="{true}" />

In the SignupForm component, you need to export the disabled prop, in this way:

<script>
  export let disabled
</script>

This is the way you express the fact that the prop is exposed to parent components.

When using the component, you can pass a variable instead of a value, to change it dynamically:

<script>
  import SignupForm from './SignupForm.svelte'
  let disabled = true
</script>

<SignupForm {disabled} />

Note I used {disabled} as a handy shorthand form for disabled={disabled}

When the disabled variable value changes, the child component will be updated with the new prop value. Example:

<script>
  import SignupForm from './SignupForm.svelte'
  let disabled = true
  setTimeout(() => {
    disabled = false
  }, 2000)
</script>

<SignupForm {disabled} />

Cross-component State Management in Svelte

We've already seen how Svelte makes handling the state of a single component very easy.

But how do we pass state around across components?

Passing state around using props

The first strategy is common to other UI frameworks and it's passing state around using props, lifting the state up.

When a component needs to share data with another, the state can be moved up in the components tree until there's a common parent to those components.

The state needs to be passed down until it reaches all the components that need this state information.

This is done using props, and it's a technique that I think is the best as it's simple.

The context API

However, there are cases where props are not practical. Perhaps 2 components are so distant in the components tree that we'd have to move state up to the top-level component.

In this case, another technique can be used and it's called context API, and it's ideal when you want to let multiple components communicate with descendants, but you don't want to pass props around.

The context API is provided by 2 functions which are provided by the svelte package: getContext and setContext.

You set an object in the context, associating it to a key:

<script>
  import { setContext } from 'svelte'

  const someObject = {}

  setContext('someKey', someObject)
</script>

In another component you can use getContext to retrieve the object assigned to a key:

<script>
  import { getContext } from 'svelte'

  const someObject = getContext('someKey')
</script>

You can only use getContext to retrieve a key either in the component that used setContext or in one of its descendants.

If you want to let two components living in 2 different component trees communicate there's another tool for us: stores.

Using Svelte stores

Svelte stores are a great tool to handle your app state when components need to talk to each other without passing props around too much.

You must first import writable from svelte/store:

import { writable } from 'svelte/store'

and create a store variable using the writable() function, passing the default value as the first argument:

const username = writable('Guest')

This can be put into a separate file which you can import into multiple components, for example, called store.js (it's not a component, so it can be in a .js file instead of .svelte):

import { writable } from 'svelte/store'
export const username = writable('Guest')

Any other component now loading this file can access the store:

<script>
  import { username } from './store.js'
</script>

Now the value of this variable can be set to a new value using set(), passing the new value as the first argument:

username.set('new username')

And it can be updated using the update() function, which differs from set() because you don't just pass the new value to it - you run a callback function that is passed the current value as its argument:

const newUsername = 'new username!'
username.update((existing) => newUsername)

You can add more logic here:

username.update((existing) => {
  console.log(`Updating username from ${existing} to ${newUsername}`)
  return newUsername
})

To get the value of the store variable once, you can use the get() function exported by svelte/store:

import { writable, get } from 'svelte/store'
export const username = writable('Guest')
get(username) //'Guest'

To create a reactive variable that's updated whenever the store value changes instead, you can prepend the store variable using $ (in this example $username). Using that will make the component re-render whenever the stored value changes.

Svelte considers $ to be a reserved value and will prevent you to use it for things that are not related to stores values (which might lead to confusion), so if you are used to prepending DOM references using $, don't do it in Svelte.

Another option, best suited if you need to execute some logic when the variable changes, is to use the subscribe() method of username:

username.subscribe((newValue) => {
  console.log(newValue)
})

In addition to writable stores, Svelte provides 2 special kinds of stores: readable stores and derived stores.

Svelte Readable Stores

Readable stores are special because they can't be updated from the outside - there's no set() or update() method. Instead, once you set the initial state, they can't be modified from the outside.

The official Svelte docs show an interesting example using a timer to update a date. I can think of setting up a timer to fetch a resource from the network, perform an API call, get data from the filesystem (using a local Node.js server) or anything else that can be set up autonomously.

In this case instead of using writable() to initialize the store variable, we use readable():

import { readable } from 'svelte/store'
export const count = readable(0)

You can provide a function after the default value, that will be responsible for updating it. This function receives the set function to modify the value:

<script>
  import { readable } from 'svelte/store'
  export const count = readable(0, (set) => {
    setTimeout(() => {
      set(1)
    }, 1000)
  })
</script>

In this case, we update the value from 0 to 1 after 1 second.

You can setup an interval in this function, too:

import { readable, get } from 'svelte/store'
export const count = readable(0, (set) => {
  setInterval(() => {
    set(get(count) + 1)
  }, 1000)
})

You can use this in another component like this:

<script>
  import { count } from './store.js'
</script>

{$count}

Svelte Derived Stores

A derived store allows you to create a new store value that depends on the value of an existing store.

You can do so using the derived() function exported by svelte/store which takes as its first parameter the existing store value, and as a second parameter a function which receives that store value as its first parameter:

import { writable, derived } from 'svelte/store'

export const username = writable('Guest')

export const welcomeMessage = derived(username, ($username) => {
  return `Welcome ${$username}`
})

<script>
  import { username, welcomeMessage } from './store.js'
</script>

{$username} {$welcomeMessage}

Slots

Slots are a handy way to let you define components that can be composed together.

And vice versa, depending on your point of view, slots are a handy way to configure a component you are importing.

Here's how they work.

In a component you can define a slot using the <slot /> (or <slot></slot>) syntax.

Here's a Button.svelte component that simply prints a <button> HTML tag:

<button><slot /></button>

For React developers, this is basically the same as <button>{props.children}</button>

Any component importing it can define content that is going to be put into the slot by adding it into the component's opening and closing tags:

<script>
  import Button from './Button.svelte'
</script>

<button>Insert this into the slot</button>

You can define a default, which is used if the slot is not filled:

<button>
  <slot> Default text for the button </slot>
</button>

You can have more than one slot in a component, and you can distinguish one from the other using named slots. The single unnamed slot will be the default one:

<slot name="before" />
<button>
  <slot />
</button>
<slot name="after" />

Here's how you would use it:

<script>
  import Button from './Button.svelte'
</script>

<button>
  Insert this into the slot
  <p slot="before">Add this before</p>
  <p slot="after">Add this after</p>
</button>

And this would render the following to the DOM:

<p slot="before">Add this before</p>
<button>Insert this into the slot</button>
<p slot="after">Add this after</p>

Svelte Lifecycle events

Every component in Svelte fires several lifecycle events that we can hook on, to help us implement the functionality we have in mind.

In particular, we have

• onMount fired after the component is rendered
• onDestroy fired after the component is destroyed
• beforeUpdate fired before the DOM is updated
• afterUpdate fired after the DOM is updated

We can schedule functions to happen when these events are fired by Svelte.

We don't have access to any of those methods by default, but we need to import them from the svelte package:

<script>
  import { onMount, onDestroy, beforeUpdate, afterUpdate } from 'svelte'
</script>

A common scenario for onMount is to fetch data from other sources.

Here's a sample usage of onMount:

<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    //do something on mount
  })
</script>

onDestroy allows us to clean up data or stop any operation we might have started at the component initialization, like timers or scheduled periodic functions using setInterval.

One particular thing to notice is that if we return a function from onMount, that serves the same functionality of onDestroy - it's run when the component is destroyed:

<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    //do something on mount

    return () => {
      //do something on destroy
    }
  })
</script>

Here's a practical example that sets a periodic function to run on mount, and removes it on destroy:

<script>
  import { onMount } from 'svelte'

  onMount(async () => {
    const interval = setInterval(() => {
      console.log('hey, just checking!')
    }, 1000)

    return () => {
      clearInterval(interval)
    }
  })
</script>

Svelte Bindings

Using Svelte you can create a two-way binding between data and the UI.

Many other Web frameworks can provide two-way bindings, it's a very common UI design pattern.

They are especially useful with forms.

bind:value

Let's start with the most common form of binding you'll often use, which you can apply using bind:value. You take a variable from the component state, and you bind it to a form field:

<script>
  let name = ''
</script>

<input bind:value="{name}" />

Now if name changes the input field will update its value. And the opposite is true, as well: if the form is updated by the user, the name variable value changes.

Just be aware that the variable must be defined using let/var and not const, otherwise it can't be updated by Svelte, as const defines a variable with a value that can't be reassigned.

bind:value works on all flavors of input fields (type="number", type="email" and so on), but it also works for other kind of fields, like textarea and select (more on select later).