or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

examples

edge-cases.mdreal-world-scenarios.md

guides

quick-start.md

reference

configuration.mdcore-types.mdenvironment-variables.mdenvironment.mderror-handling.mdforms.mdload-functions.mdnavigation-lifecycle.mdnavigation.mdnodejs-polyfills.mdnodejs.mdpaths.mdremote-functions.mdrequest-response.mdserver-hooks.mdserver-utilities.mdservice-worker.mdstate-stores.mdvite-plugin.md
index.md
tile.json

tessl/npm-sveltejs--kit

Web framework for Svelte with SSR, file-based routing, load functions, form actions, and API endpoints

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@sveltejs/kit@2.49.x

To install, run

npx @tessl/cli install tessl/npm-sveltejs--kit@2.49.0

index.mddocs/

SvelteKit

SvelteKit is a comprehensive web application framework for building Svelte applications with server-side rendering, static site generation, and progressive enhancement capabilities.

Package Information

  • Package: @sveltejs/kit
  • Installation: npm install @sveltejs/kit
  • Documentation: https://svelte.dev/docs/kit

Quick Start

import { error, redirect, json, fail, VERSION } from '@sveltejs/kit';
import type { RequestEvent, Load, Actions } from '@sveltejs/kit';

Basic Usage:

// API route handler (+server.ts)
export async function GET(event: RequestEvent) {
  return json({ message: 'Hello from SvelteKit' });
}

// Server load function (+page.server.ts)
export async function load({ params }) {
  const item = await fetchItem(params.id);
  if (!item) error(404, { message: 'Item not found' });
  return { item };
}

// Form action (+page.server.ts)
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData();
    return { success: true };
  }
};

See Quick Start Guide for detailed setup instructions.

Core Concepts

SvelteKit is built around several key architectural components:

  • File-based Routing: Routes defined by filesystem structure (+page.svelte, +server.ts, etc.)
  • Load Functions: Data loading before rendering (universal +page.ts or server-only +page.server.ts)
  • Form Actions: Progressive enhancement with server-side validation
  • Hooks: Server-side middleware for requests, errors, and customization
  • Virtual Modules: Runtime modules ($app/*) for navigation, state, and environment
  • Adapters: Deployment adapters for Node.js, Vercel, Cloudflare, static, etc.
  • Build System: Vite-powered development and production builds

API Quick Reference

Error Handling

function error(status: number, body?: { message: string; [key: string]: any }): never;
function redirect(status: number, location: string | URL): never;
function fail<T>(status: number, data?: T): ActionFailure<T>;
function invalid(...issues: (StandardSchemaV1.Issue | string)[]): never;

Full Error Handling Reference

Request/Response

function json(data: any, init?: ResponseInit): Response;
function text(body: string, init?: ResponseInit): Response;
function normalizeUrl(url: URL | string): { url: URL; wasNormalized: boolean; denormalize: (url?: URL | string) => URL; };

Full Request/Response Reference

Load Functions

type Load<Params, ParentData, OutputData, RouteId> = (event: LoadEvent<Params, ParentData, RouteId>) => OutputData | Promise<OutputData>;
type ServerLoad<Params, ParentData, OutputData, RouteId> = (event: ServerLoadEvent<Params, ParentData, RouteId>) => OutputData | Promise<OutputData>;

Full Load Functions Reference

Form Actions

type Action<Params, OutputData, RouteId> = (event: RequestEvent<Params, RouteId>) => OutputData | Promise<OutputData>;
type Actions<Params, OutputData, RouteId> = Record<string, Action<Params, OutputData, RouteId>>;
function enhance<Success, Failure>(form_element: HTMLFormElement, submit?: SubmitFunction<Success, Failure>): { destroy(): void };

Full Form Actions Reference

Navigation

function goto(url: string | URL, opts?: { replaceState?: boolean; noScroll?: boolean; keepFocus?: boolean; invalidateAll?: boolean; invalidate?: Array<string | URL | ((url: URL) => boolean)>; state?: App.PageState }): Promise<void>;
function invalidate(resource: string | URL | ((url: URL) => boolean)): Promise<void>;
function invalidateAll(): Promise<void>;
function preloadData(href: string): Promise<{ type: 'loaded'; status: number; data: Record<string, any> } | { type: 'redirect'; location: string }>;

Full Navigation Reference

Server Hooks

function sequence(...handlers: Handle[]): Handle;
type Handle = (input: { event: RequestEvent; resolve: Resolve }) => Response | Promise<Response>;

Full Server Hooks Reference

Environment

// From '$app/environment'
const browser: boolean;
const dev: boolean;
const building: boolean;
const version: string;

// From '$env/static/public'
export const PUBLIC_*: string;

// From '$env/static/private'
export const *: string;

Full Environment Reference | Environment Variables Reference

State and Stores

// From '$app/state' (Svelte 5)
const page: Page;
const navigating: Navigation | null;
const updated: { current: boolean; check(): Promise<boolean> };

Full State and Stores Reference

Paths

function asset(file: string): string;
function resolve<T extends Record<string, string>>(route: string, params?: T): ResolvedPathname;

Full Paths Reference

Remote Functions (Experimental)

function command<Input, Output>(validate?: ((input: unknown) => input is Input) | 'unchecked', fn?: (input: Input) => Output | Promise<Output>): RemoteCommand<Input, Output>;
function query<Input, Output>(validate?: ((input: unknown) => input is Input) | 'unchecked', fn?: (input: Input) => Output | Promise<Output>): RemoteQueryFunction<Input, Output>;
function form<Input, Output>(validate?: ((input: unknown) => input is Input) | 'unchecked', fn?: (data: Input, issue: InvalidField<Input>) => Output | Promise<Output>): RemoteForm<Input, Output>;

Full Remote Functions Reference

Core Types

interface RequestEvent<Params, RouteId> {
  cookies: Cookies;
  fetch: typeof fetch;
  getClientAddress(): string;
  locals: App.Locals;
  params: Params;
  platform?: App.Platform;
  request: Request;
  route: { id: RouteId };
  setHeaders(headers: Record<string, string>): void;
  url: URL;
  isDataRequest: boolean;
  isSubRequest: boolean;
}

interface Page<Params, RouteId> {
  url: URL;
  params: Params;
  route: { id: RouteId };
  status: number;
  error: App.Error | null;
  data: Record<string, any>;
  state: Record<string, any>;
  form: any;
}

Full Core Types Reference

Documentation Structure

Guides

Step-by-step instructions for common workflows:

Examples

Real-world usage scenarios:

Reference

Complete API documentation and detailed specifications: