Our Laravel SaaS backend with a Svelte 5 frontend written with runes and TypeScript. The UI is built from shadcn-svelte components on Bits UI, and shared .svelte.ts modules handle permissions, layout and translations.
Features
Every backend feature comes with a finished Svelte UI: pages, dialogs, forms and toasts.
Login, registration, password reset, email verification, two-factor auth, passkeys and profile & security settings. You switch each one on or off per domain.
Each tenant gets its own database and subdomain. You create and edit tenants from a list with stats, track workspace status and invite each tenant's admin.
Give each tenant a primary domain and as many secondary ones as you need. Every domain has its own app name, default language and sign-in options.
Put every tenant workspace into maintenance with your own message, a secret bypass link and allowed IPs. You can also suspend a single workspace, which blocks it.
Manage users with search and stats, give them a role and extra permissions, and invite them by email with a signed link.
Spatie roles and permissions with protected system roles, separate permission config files for the central and tenant apps, and menus that respect them.
Menus live in the database and you reorder them by drag & drop. Pick a sidebar or header layout, a sidebar style, a sign-in layout and light or dark mode.
17 languages. Each user picks their own, each domain has a default, and validation messages are translated and shared with the frontend.
Pest feature tests, Larastan, Pint, ESLint and Prettier are set up, along with Laravel Boost guidelines and skills for AI coding agents.
Conventions
The Svelte kit sticks to the usual Svelte conventions, and svelte-check checks the types.
resources/js/pages/tenants/Index.sveltePascalCase .svelte filesresources/js/lib/*.ts and *.svelte.tsTranslations in a component
import { svelteLang } from '@erag/lang-sync-inertia/svelte'
const { __ } = svelteLang()
__('modules.tenant.index.title')Typed routes with Wayfinder
import { index } from '@/routes/tenants'
index.url()Framework-specific implementation
The Svelte kit uses runes for page state and shared .svelte.ts modules for behavior, while Laravel and Inertia continue to handle routing, validation and authorization.
A page in Svelte
<script lang="ts">
let { tenants }: { tenants: Tenant[] } = $props();
let query = $state('');
let filtered = $derived(
tenants.filter((tenant) => tenant.name.includes(query)),
);
</script>See the complete Svelte implementation guide, including pages, layouts and daily development.
Shared backend
The Vue, React and Svelte kits run exactly the same backend code. Only resources/js is different.
The Svelte Starter Kit is $33, paid once, or get all three kits for $79. You keep access for life and get weekly updates.
One-time payment · Lifetime access · Weekly updates included · No recurring subscription