How to add rate limiting to SvelteKit form actions

What is rate limiting?

Rate limiting is a technique that controls how many requests or actions an identity can perform in a given period. You use it to stop automated floods, keep resources fair, and protect form actions that create data or consume paid work.

The attacks that a form-level limit stops include:

• Denial-of-service floods that overwhelm a write path.
• Brute-force and password-spraying attempts against login or reset actions.
• API abuse such as inbox stuffing, enumeration, and resource exhaustion.

A SvelteKit form action is a server function. That is the right place to enforce the limit: you have the RequestEvent, the form payload, and any session you load. This guide uses the Arcjet SvelteKit SDK (@arcjet/sveltekit v1). You create a client with arcjet(), add a slidingWindow() or tokenBucket() rule, and call protect() on the event.

Which rate limiting algorithm should you use?

Arcjet exposes three algorithms. Pick one for the resource you protect. The following table summarizes the trade-offs. For failure modes and distributed behavior, see the rate limiting guide.

All three rules take the same duration form: a number of seconds, or a string such as "15s", "10m", or "1h45m". slidingWindow({ interval, max }) and tokenBucket({ refillRate, interval, capacity }) name it interval; fixedWindow({ window, max }) names it window. Pick one form and keep a codebase consistent. Token bucket is the only algorithm that needs requested on protect().

This tutorial uses a sliding window on every page and a token bucket on the form action.

How do you scaffold a SvelteKit app?

Svelte compiles .svelte components to JavaScript at build time. SvelteKit adds routing, server-side rendering, load functions, and form actions. Current projects use Svelte 5 runes ($props(), {@render children()}) rather than export let and <slot>.

Create the app with the official Svelte CLI, not the retired npm create svelte@latest package:

1
npx sv create ratelimit
2
cd ratelimit

Choose the SvelteKit minimal template, TypeScript syntax, and the add-ons you want (Prettier and ESLint are enough). Install dependencies when the CLI offers, or run npm install. Start the dev server with npm run dev and open http://localhost:5173.

How do you install the Arcjet SvelteKit SDK?

@arcjet/sveltekit declares a Node.js range of >=22.21.0 <23 || >=24.5.0 and peers on Svelte 3, 4, or 5. It sets no @sveltejs/kit floor of its own, so any supported SvelteKit 2 release works; this tutorial is written against SvelteKit 2 with Svelte 5. The package is ESM only.

1
npm i @arcjet/sveltekit@1.10.0

Create .env (or .env.local if you already use that file) in the project root:

1
ARCJET_ENV=development
2
ARCJET_KEY=ajkey_your_key

Get the key from the Arcjet dashboard when you create a site. Set ARCJET_ENV=development so private and loopback addresses are allowed while you test locally. In production, Arcjet rejects those addresses so a misconfigured proxy cannot collapse every client onto one internal IP.

Create a single client in a server-only module. Files under src/lib/server/ are importable as $lib/server/... and cannot leak into the browser bundle.

1
import { env } from "$env/dynamic/private";
2
import arcjet from "@arcjet/sveltekit";
3

4
export const aj = arcjet({
5
  key: env.ARCJET_KEY!,
6
  rules: [],
7
});

You add per-route rules with withRule() so each page can choose its algorithm without constructing a new client.

How do you apply a global sliding window?

src/hooks.server.ts runs on every request. Put a baseline sliding window here, then skip routes that call protect() themselves so you do not double-count.

1
import { slidingWindow } from "@arcjet/sveltekit";
2
import { aj } from "$lib/server/arcjet";
3
import { error, type RequestEvent } from "@sveltejs/kit";
4

5
const selfProtected = ["/form"];
6

7
export async function handle({
8
  event,
9
  resolve,
10
}: {
11
  event: RequestEvent;
12
  resolve: (event: RequestEvent) => Response | Promise<Response>;
13
}): Promise<Response> {
14
  if (selfProtected.includes(event.url.pathname)) {
15
    return resolve(event);
16
  }
17

18
  const decision = await aj
19
    .withRule(
20
      slidingWindow({
21
        mode: "LIVE",
22
        interval: 15,
23
        max: 5,
24
      }),
25
    )
26
    .protect(event);
27

28
  if (decision.isDenied()) {
29
    return error(429, "Too many requests");
30
  }
31

32
  return resolve(event);
33
}

protect(event) is the v1 entry point. It takes the SvelteKit RequestEvent and returns an ArcjetDecision. decision.isDenied() is the high-level conclusion. Use decision.reason.isRateLimit() when you need to distinguish a quota denial from Shield or bot rules you add later.

How do you rate limit a SvelteKit form action?

A +page.svelte file under src/routes is a page. A sibling +page.server.ts owns load and named actions. Form actions run on POST and return data through the page form prop.

Add a layout so you can move between the home page (global sliding window) and the form (token bucket). Svelte 5 layouts render children with {@render children()}:

1
<script lang="ts">
2
  let { children } = $props();
3
</script>
4

5
<nav>
6
  <a href="/">Home</a>
7
  <a href="/form">Form</a>
8
</nav>
9

10
{@render children()}

Store messages in a server-only module so the action can append and load can read:

1
type Message = { text: string; completed: boolean };
2

3
const messageList: Message[] = [
4
  { text: "Learn how forms work", completed: false },
5
];
6

7
export function getMessages() {
8
  return messageList;
9
}
10

11
export function addMessage(text: string) {
12
  messageList.push({ text, completed: false });
13
}

The page uses Svelte 5 $props() (not export let) and posts to the named action addToList:

1
<script lang="ts">
2
  import type { PageProps } from "./$types";
3

4
  let { data, form }: PageProps = $props();
5
</script>
6

7
<h1>Form</h1>
8

9
<ul>
10
  {#each data.messages as message}
11
    <li><span>{message.text}</span></li>
12
  {/each}
13
</ul>
14

15
<form method="POST" action="?/addToList">
16
  <input
17
    type="text"
18
    name="message"
19
    value={form?.message ?? ""}
20
    autocomplete="off"
21
  />
22
  <button type="submit">Add message</button>
23
</form>
24

25
{#if form?.missing}
26
  <p>This field is required.</p>
27
{/if}
28

29
{#if form?.success}
30
  <p>Added message.</p>
31
{/if}

Call protect() inside the action, not in load. A page refresh should not spend the write budget. Token bucket requires requested: the number of tokens this submission withdraws.

1
import { tokenBucket } from "@arcjet/sveltekit";
2
import { aj } from "$lib/server/arcjet";
3
import { error, fail, type RequestEvent } from "@sveltejs/kit";
4
import { addMessage, getMessages } from "$lib/server/database";
5

6
export async function load() {
7
  return { messages: getMessages() };
8
}
9

10
export const actions = {
11
  addToList: async (event: RequestEvent) => {
12
    const decision = await aj
13
      .withRule(
14
        tokenBucket({
15
          mode: "LIVE",
16
          refillRate: 1,
17
          interval: 10,
18
          capacity: 3,
19
        }),
20
      )
21
      .protect(event, { requested: 1 });
22

23
    if (decision.isDenied()) {
24
      return error(429, "Too many requests made to /form.");
25
    }
26

27
    const formData = await event.request.formData();
28
    const message = String(formData.get("message") ?? "");
29

30
    if (!message) {
31
      return fail(400, { message, missing: true });
32
    }
33

34
    addMessage(message);
35
    return { success: true };
36
  },
37
};

This bucket holds 3 tokens and refills 1 token every 10 seconds. Three fast submits succeed. A fourth submit before a refill returns HTTP 429 and SvelteKit renders the error page. If you want the user to stay on the form, return fail(429, { rateLimited: true }) instead and render that flag next to the button.

How do you verify the limits?

Run npm run dev and use the two routes.

On http://localhost:5173/, the hook applies the sliding window. Six full-page loads inside 15 seconds trip the limit. The sixth response is a SvelteKit error page with status 429 and the body "Too many requests".

On http://localhost:5173/form, submit the form four times in a row. The first three append a list item and show "Added message." The fourth submit returns 429 with "Too many requests made to /form."

In the Arcjet dashboard, each request appears with an ALLOW or DENY conclusion, the rule that produced it, remaining capacity, reset time, and the fingerprint (IP by default). Use those rows to confirm you did not double-call protect() on /form.

What should you key the limit on?

The default characteristic is ip.src. That is acceptable for an anonymous form. Shared networks and rotating proxies make it a weak identity. When the user is logged in, add a custom characteristic such as userId and pass it to protect():

1
const decision = await aj
2
  .withRule(
3
    tokenBucket({
4
      mode: "LIVE",
5
      characteristics: ["userId"],
6
      refillRate: 1,
7
      interval: 10,
8
      capacity: 3,
9
    }),
10
  )
11
  .protect(event, {
12
    userId: event.locals.user.id,
13
    requested: 1,
14
  });

Pair the limiter with bot detection on public forms if you also need to classify automated clients. Rate limiting caps volume. Bot detection names the client. You usually want both on signup, comment, and login actions.