CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-sveltejs--kit

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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:

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/@sveltejs/kit@2.49.x
Publish Source
CLI
Badge
tessl/npm-sveltejs--kit badge