1. Skeleton for a Fast UI
SvelteKit gives you a blank canvas, which is powerful but can be daunting when you need to build a user interface quickly. Enter Skeleton, a UI toolkit built from the ground up for Svelte. What makes Skeleton special
is its philosophy: it embraces modern web standards and stays out of your way. Based on Tailwind CSS, it provides a set of beautifully designed, accessible, and unstyled components that you can easily customize to fit your brand. It’s not a bloated library that forces its design opinions on you; it's a launchpad. The library also includes 'actions'—Svelte's unique superpower—for things like tooltips and pop-ups, making complex UI interactions feel simple and declarative. If you want to build a polished, professional-looking app without spending weeks on custom CSS, but still want full control, Skeleton is the perfect partner for your SvelteKit project.
2. Storybook for Component Isolation
Svelte’s entire model is built around components. You think in components, you build in components, and you ship components. So, it only makes sense to have a tool dedicated to developing them in isolation. That's exactly what Storybook does. It provides a sandboxed environment where you can build, view, and test each of your Svelte components without needing to run the entire application. This is a massive productivity boost. You can mock different states (loading, error, empty), test edge cases, and ensure your components are truly reusable and robust before integrating them into your pages. It also serves as living documentation for your design system, making it easier for new developers to get up to speed and for designers to review UI implementation. With excellent Svelte integration, setting up Storybook is straightforward and immediately pays dividends in code quality and development speed.
3. tRPC for Type-Safe APIs
One of SvelteKit’s biggest strengths is its full-stack nature, allowing you to write backend server code right alongside your frontend. But how do you ensure your client and server are speaking the same language? That’s where tRPC comes in, and it feels like magic. tRPC (TypeScript Remote Procedure Call) lets you create fully type-safe APIs with zero code generation or YAML schemas. You define your API functions on the server with standard TypeScript, and tRPC’s client-side library automatically infers the types. This means you get autocompletion for your API routes and full type-checking on your payloads and responses. If you change a backend function, TypeScript will immediately tell you everywhere you need to update your frontend code. It eliminates a whole class of runtime errors and makes refactoring fearless. For SvelteKit developers, tRPC is a perfect match, amplifying the framework's integrated approach and providing an unbeatable developer experience.
4. Playwright for End-to-End Testing
How do you know your application works for real users? You test it like a real user would. End-to-end (E2E) testing simulates user flows—clicking buttons, filling out forms, and navigating pages—to verify that everything works together. SvelteKit has first-class, out-of-the-box support for Playwright, a modern E2E testing framework from Microsoft. This tight integration is a game-changer. With a single command (npx playwright test), you can run tests against a running dev server in a real browser environment. Playwright's API is intuitive, allowing you to write tests that are easy to read and maintain. It can simulate different devices, network conditions, and even user locations. Because it's an official part of the SvelteKit ecosystem, you can be confident that it will continue to work seamlessly as both projects evolve. Stop shipping bugs and start using Playwright to gain confidence in every deployment.
5. MDSveX for Supercharged Markdown
If you're building a blog, documentation site, or any project with a significant amount of content, you'll quickly realize that plain Markdown is limiting. You'll want to embed interactive charts, custom callouts, or dynamic components directly within your prose. This is where MDSveX shines. It's a Markdown preprocessor for Svelte that allows you to seamlessly use Svelte components inside your Markdown files. Want to add an interactive poll in the middle of a blog post? Just import the component and use it like you would in any other Svelte file. MDSveX parses your content, renders the Svelte components, and outputs clean HTML. It effectively turns your content files into powerful, interactive pages. It's the engine behind many of the most popular Svelte-based static site generators and is an essential tool for anyone serious about blending rich content with interactive components in a SvelteKit application.
