SvelteKit (TypeScript)

You should create a route page named +page.svelte as the main entry point of your SvelteKit application. Your Svelte code should be linted using ESLint with the recommended configuration for Svelte and TypeScript.

Entry file

This template follows SvelteKit's filesystem routing. The solution files are:

• src/routes/+page.svelte — the page component for the root route. Use <script lang="ts"> to enable TypeScript inside the component.
• svelte.config.js — the SvelteKit config wiring the auto adapter and vitePreprocess (preloaded, read-only).

Additional routes follow the same pattern: nest folders under src/routes/ and add a +page.svelte (and optionally +layout.svelte, +page.server.ts, etc.) per route.

Version

Running on Node.js v22.0.0 with Svelte 5.

Supported languages

TypeScript

Testing framework

Vitest

Special reminders and implementation details

• Tests use @testing-library/svelte to mount components and assert on rendered output.
• SvelteKit-specific files all begin with +: +page.svelte (UI), +page.ts / +page.server.ts (data loading), +layout.svelte (shared layout), +server.ts (API endpoints).
• This template runs on Svelte 5. You can use the new runes ($state, $derived, $effect) or the classic reactive syntax — both are supported.
• Mark <script> blocks with lang="ts" to enable type checking and to use type annotations inside the component.

Example with Svelte Testing Library:

import { render, screen } from '@testing-library/svelte';
import Page from './src/routes/+page.svelte';

describe('Page', () => {
  test("renders 'Hello, World!'", () => {
    render(Page);
    expect(screen.getByText('Hello, World!')).toBeInTheDocument();
  });
});

Included libraries

• @sveltejs/kit
• @sveltejs/adapter-auto
• @sveltejs/vite-plugin-svelte
• svelte
• vite
• @testing-library/jest-dom
• @testing-library/svelte
• @testing-library/user-event
• jsdom
• typescript
• vitest

How to debug

Debugging SvelteKit with TypeScript is similar to debugging Svelte/TypeScript. Use console.log() inside components, load functions, or hooks to inspect values at runtime. Remember that +page.server.ts and +server.ts run on the server (logs go to the terminal), while +page.svelte runs in both — first on the server during SSR, then in the browser after hydration.

Steps to Debug Using Console Logs

1. Identify the Problem Area: Locate the component, load function, or endpoint you suspect is misbehaving.

2. Insert console.log() Statements: Add log calls before and after suspicious code. Logs from +page.svelte during SSR appear in the terminal; logs after hydration (event handlers, $effect) appear in the browser console.

3. Check the Results Output of your tests

4. Use Debug Icon in Preview Area: Click on the debug icon in the Preview area to check the console output, or open your browser console.

5. Analyze the Output: Compare logs against the rendered UI to spot stale state, incorrect data flow, or missed reactivity.

Here's an example of how to use console.log() for debugging in SvelteKit with TypeScript:

<script lang="ts">
  let count: number = 0;

  function handleClick(): void {
    console.log('clicked, current count:', count); // Log button click
    count += 1;
  }

  $: console.log('Reactive log, count is now:', count);
</script>

<button on:click={handleClick}>Count: {count}</button>