Lesson 7 of 9 intermediate 5 min read

API Routes

Writing custom HTTP endpoints in +server.ts (GET, POST, PATCH, DELETE) with json() helper.

Interactive Laboratory

Live Runtime

Experiment directly with API Routes concepts in real time

SvelteKit Full-Stack Pipeline
1. Request
Hook
2. Loader
load()
3. Server
SSR HTML
4. Browser
Hydrate

API Endpoints and +server.ts

When you need to build custom REST APIs, webhook receivers, or return non-HTML responses (like generated SVGs, PDFs, or JSON data), create a +server.ts file.


1. Defining HTTP Handlers

Export functions corresponding to standard HTTP verbs (GET, POST, PUT, PATCH, DELETE):

// src/routes/api/users/+server.ts
import { json, type RequestHandler } from '@sveltejs/kit';
 
const users = [
	{ id: '1', name: 'Alice' },
	{ id: '2', name: 'Bob' }
];
 
export const GET: RequestHandler = async ({ url }) => {
	const limit = Number(url.searchParams.get('limit') || '10');
	return json(users.slice(0, limit));
};
 
export const POST: RequestHandler = async ({ request }) => {
	const payload = await request.json();
 
	if (!payload.name) {
		return json({ error: 'Name is required' }, { status: 400 });
	}
 
	const newUser = { id: String(users.length + 1), name: payload.name };
	users.push(newUser);
 
	return json(newUser, { status: 201 });
};

2. Returning Custom Responses

You can return raw Web standard Response objects:

// src/routes/api/health/+server.ts
import type { RequestHandler } from './$types';
 
export const GET: RequestHandler = () => {
	return new Response('OK', {
		headers: { 'content-type': 'text/plain' }
	});
};