Stack of the Moment (2025)
| Layer | Tool | Purpose |
|---|
| Framework | SvelteKit 5 | App framework |
| UI | Skeleton v3 | Component library |
| Styling | Tailwind 4 | Utility CSS |
| Language | TypeScript 5.7 | Type safety |
| Runtime | Bun/Node 22 | JS engine |
Project Template
# Create project
npx sv create my-app
# Select:
# - Svelte 5
# - TypeScript
# - Tailwind
# - Skeleton
Key Patterns
Component (Svelte 5)
<script>
interface Props { value: string }
let { value = $bindable() }: Props = $props()
</script>
<input bind:value class="input" />
Load Data
// +page.ts
export const load = async ({ fetch }) => ({
data: await fetch("/api/data").then((r) => r.json()),
})
API Route
// +server.ts
export const GET = async () => {
return json({ success: true })
}
Shared State
// stores/app.svelte.ts
export const app = $state({
sidebarOpen: false,
})
Quick Commands
# Dev
bun run dev
# Build
bun run build
# Preview
bun run preview
# Type check
bun run check
File Structure
src/
├── lib/
│ ├── components/ # UI components
│ ├── stores/ # State (.svelte.ts)
│ └── utils/ # Helpers
├── routes/
│ ├── +page.svelte
│ ├── +page.ts
│ └── api/
│ └── +server.ts
└── app.html
CSS Patterns
<!-- Card -->
<div class="card preset-filled p-4">
<!-- Button -->
<button class="btn preset-filled-primary">
<!-- Input -->
<input class="input" />
<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4"></div>
</button>
</div>
Resources