Here’s what I use and why.
The Core: SvelteKit + Svelte
SvelteKit is the foundation. It handles routing, server-side rendering, prerendering, and the dev experience all in one package. Svelte’s runes — $state, $derived, and $props() — give me a clean reactivity model without the overhead of a virtual DOM.
The thing I like most about Svelte is that it compiles away. There’s no virtual DOM diffing at runtime, no framework tax in the browser. Components are just markup, styles, and logic compiled into tight, efficient JavaScript.
For a content site like this one, SvelteKit’s prerendering is key. Every page is built at deploy time into static HTML — fast loads, good SEO, and no server running.
Styling: Tailwind CSS
I use Tailwind CSS for all styling. It runs as a Vite plugin, which keeps the dev server fast. Configuration lives in CSS using @theme, which feels cleaner than a separate config file.
@theme {
--color-void: #0a0a0b;
--color-flame: #ff6b35;
--font-display: 'Syne', system-ui, sans-serif;
--font-serif: 'Source Serif 4', Georgia, serif;
--font-mono: 'Space Mono', 'SF Mono', monospace;
}All design tokens — colors, fonts, spacing — live right in the CSS. No config file, no JavaScript object, just CSS custom properties that Tailwind picks up automatically.
Content: mdsvex
Articles are written in Markdown and processed by mdsvex. It lets me write .md files that get treated as Svelte components — so I can use frontmatter for metadata, standard Markdown for content, and drop in Svelte components when I need something interactive.
Each article is a SvelteKit route. This one lives at src/routes/articles/my-current-web-stack/+page.md. No dynamic slug resolution, no content API — just files in folders. SvelteKit handles the rest.
Since mdsvex compiles Markdown as Svelte components, I can embed interactive elements directly in an article. Here’s a counter component — written in Svelte, dropped right into this Markdown file:
Build Tool: Vite
Vite powers the dev server and production builds. It’s fast enough that I rarely think about it — and that’s the best compliment I can give a build tool. Hot module replacement is instant, builds are quick, and it handles TypeScript, CSS, and Svelte without extra configuration.
Language: TypeScript
Everything is written in TypeScript. Not because I love type annotations, but because the editor experience is dramatically better. Autocomplete, inline errors, refactoring confidence — especially valuable when working with SvelteKit’s file-based routing and data loading patterns.
Hosting: Vercel
The site deploys to Vercel using @sveltejs/adapter-vercel. Push to git, site builds, done. I deploy to multiple edge regions (IAD, PDX, SFO) so pages load fast regardless of where visitors are.
Since the site is fully prerendered, Vercel is mostly serving static files from CDN — which means it’s fast and cheap.
Quality: ESLint, Prettier, Vitest, Playwright
The tooling around the code matters as much as the code itself:
- Prettier with the Svelte and Tailwind plugins handles formatting. I never think about tabs vs. spaces or class ordering — it’s automated.
- ESLint catches potential issues before they ship.
- Vitest runs unit tests. Fast, native ES modules, and works directly with Vite’s config.
- Playwright handles end-to-end testing. If the contact form breaks or a page doesn’t render, I know before it hits production.
Why This Stack
I’ve built sites with Next.js, Astro, Hugo, and plain HTML. I’ve landed on SvelteKit because it has the best balance of developer experience and output quality. The code I write is close to what ships. There’s no abstraction layer I’m fighting with.
Tailwind’s CSS-based configuration removed the last thing I didn’t like about it. mdsvex means I write articles in Markdown without giving up component power. Vercel means I don’t think about infrastructure.
The whole thing is simple enough that I can focus on content instead of fighting the toolchain. That’s the point.