Jesse Contreras

← Back to Blog
May 01, 2025 7 min read Engineering

What I Learned Building My Site in SvelteKit

Svelte is one of the most talked about frameworks in the Stack Overflow Developer Survey. I wanted to see what the hype was about, so I rebuilt my personal site in SvelteKit and learned what makes it different from Angular and React.

Cover image

Why Svelte caught my eye

I first got curious about Svelte after seeing it rise in Stack Overflow’s Annual Developer Survey. It consistently ranks among the most loved frameworks, which says a lot about how enjoyable it is to use. Stack Overflow has always been one of the main ways I learned to code and debug, it has been my unofficial classroom, so when that community speaks, I listen.

After spending years in Angular and React, I wanted to see why so many developers found Svelte refreshing. The result was my personal website, built entirely in SvelteKit, styled with Tailwind CSS, and deployed to Vercel. It is simple, fast, and feels like the natural next evolution of front end frameworks.

Homepage of my personal website built with SvelteKit
Homepage built with SvelteKit, Tailwind, and Vercel.

Svelte vs Angular vs React

Svelte’s approach feels different from both Angular and React. Angular gives you everything in one framework. React gives you flexibility through its ecosystem. Svelte gives you both simplicity and performance by moving most work to compile time. It compiles components into optimized vanilla JavaScript with little runtime overhead. There is no virtual DOM diffing and fewer runtime calculations. The framework almost disappears once you build.

React developers will appreciate how natural it feels to write components. You still use props and events, but with less boilerplate. Angular developers will like how declarative it feels. Each Svelte file includes markup, logic, and styles together, and the syntax stays clean. The built in reactivity with $ variables is intuitive, no setState and no extra libraries to trigger updates.

What SvelteKit adds to the mix

Svelte by itself is a UI library, but SvelteKit turns it into a complete framework. Routing, server side rendering, and data loading are built in. It reminds me of how Angular Universal and Next.js extend their core libraries, but here it is native. Everything feels integrated rather than bolted on later. Creating routes is simple, folders and files under src/routes map directly to URLs. There is no routing configuration file to maintain.

It also supports server side code in the same project. For example, I can handle form submissions or API calls directly from endpoints inside src/routes. That makes it feel like a full stack experience without setting up a separate backend. Deploying to Vercel was also seamless, SvelteKit is officially supported and production ready.

TypeScript and the developer experience

I love developing in TypeScript. SvelteKit has excellent TypeScript support and it feels just as smooth as Angular’s, maybe even lighter. Type safety is not intrusive and the type hints integrate cleanly with VS Code/Cursor. If you have worked in Angular, you will feel right at home with the type definitions. If you come from React, you will notice how little configuration you need to get everything working.

Performance and optimization wins

What surprised me most was the performance out of the box. SvelteKit ships minimal JavaScript, and there is no framework runtime loading on the client. It uses Vite’s build pipeline for bundling, minification, and asset optimization, the same tool React projects can use, but because Svelte compiles away its framework runtime, the output is dramatically smaller without extra configuration. I did very little intentional optimization myself, mainly to see if I would need to come back and fine tune everything later. The result was excellent for an unoptimized build, great Lighthouse scores right out of the gate. It was a reminder of how much time developers spend in React or Angular setting up optimizations that are automatic here.

Regional Lighthouse performance score for jessecontreras.dev
Lighthouse audit results: Performance 91, Accessibility 91, Best Practices 100, SEO 82.
Regional Lighthouse performance score for jessecontreras.dev
Performance score of 91 with 2.5s load time on Vercel’s US West region.

Where it still feels early

The biggest gap I found was in the documentation. It is clear and concise, but sometimes light. Angular and React both have massive communities and extensive examples for every edge case. With Svelte, you sometimes have to piece things together or explore GitHub discussions. It never slowed me down completely, but it reminded me that professional adoption is still growing.

If adoption increases, I can see myself diving deeper. For now, I feel like I scratched the itch. I learned how it works, I understand its trade offs, and I see why so many developers love it. It is a framework with real promise, even if it came late to the party. For now, I will keep an eye on it and continue following its evolution.

Final thought

SvelteKit is the kind of tool that makes you remember why you started coding in the first place. It strips away the noise and gives you something elegant to work with. The syntax is clean, the performance is impressive, and the developer experience feels refreshing.

I do not know if it will ever reach React or Angular’s level of enterprise adoption, but that almost does not matter. It proves that simplicity and performance can coexist. And for me, that was worth every line of code I wrote.