Welcome to SvelteForge Admin

SvelteForge Admin is a production-ready admin dashboard built entirely with SvelteKit 3 and Svelte 5's runes API. It provides everything you need to build internal tools, back-office applications, and content management systems — with authentication, role-based access control, a CMS, analytics dashboards, and more out of the box.

Unlike admin templates built on React or Vue, SvelteForge leverages the Svelte compiler to ship dramatically less JavaScript to the browser. No virtual DOM, no runtime overhead — just efficient, compiled code that updates the DOM surgically.

Why Svelte 5

Svelte 5 introduces runes — a new reactivity system that replaces Svelte 4's implicit $: syntax with explicit, composable primitives. SvelteForge Admin is built entirely on runes from the ground up:

• $state — Declare reactive state with fine-grained granularity. No wrapping in stores or signals — just assign and go.
• $props — Type-safe component props with destructuring. No more export let.
• $derived — Computed values that automatically track their dependencies and update only when needed.
• $effect — Side effects that run when their dependencies change, with automatic cleanup.

The Svelte compiler turns these runes into highly optimized vanilla JavaScript at build time:

• Smaller bundle sizes — No framework runtime shipped to the client
• Faster updates — Direct DOM manipulation instead of virtual DOM diffing
• Better DX — Less boilerplate than React hooks or Vue's Composition API

Example: Reactive state with Svelte 5 runes

<script lang="ts">
  let count = $state(0);
  let doubled = $derived(count * 2);

  $effect(() => {
    console.log(`Count is now ${count}`);
  });
</script>

<button onclick={() => count++}>
  {count} (doubled: {doubled})
</button>

Why SvelteKit

SvelteKit is the official application framework for Svelte, and it powers every aspect of SvelteForge Admin:

• Server-side rendering (SSR) — Pages render on the server for fast initial loads, then hydrate on the client for interactivity.
• File-based routing — Routes are defined by the filesystem. SvelteForge uses SvelteKit's route groups ((app), (auth), (public)) to separate protected, authentication, and public pages with different layouts.
• Form actions — Server-side form handling with progressive enhancement via use:enhance. Forms work without JavaScript and upgrade seamlessly when JS is available.
• Progressive enhancement — The entire app works without client-side JavaScript and progressively enhances with it. No loading spinners, no skeleton screens for core functionality.
• Server-only modules — Sensitive code (auth, database, OAuth) lives in #lib/server/ and is guaranteed never to leak to the client bundle.

Key Features

SvelteForge Admin ships with a comprehensive feature set built on SvelteKit:

Tech Stack

Need More?