1. SolidStart: The Official Meta-Framework
If Solid.js is the engine, SolidStart is the entire car. As the official meta-framework, it provides the structure you need for building full-scale applications. It comes packed with features you'd expect from a modern framework, including file-based
routing, server-side rendering (SSR), data fetching APIs, and server functions. Using SolidStart feels like a natural extension of Solid itself, allowing you to build everything from dynamic, client-rendered dashboards to SEO-friendly static sites without fighting your tools. It's the logical first step when you're ready to move beyond a simple single-page app and build something more substantial, providing a production-ready foundation that is deeply integrated with Solid's reactive principles.
2. Vite: The Blazing-Fast Build Tool
The Solid.js development experience is famously fast, and a huge part of that is thanks to Vite. While Vite works with many frameworks, its connection to Solid is particularly deep; official Solid.js templates are built on it. Vite serves code directly to the browser using native ES modules during development, which means no time-consuming bundling process and near-instant Hot Module Replacement (HMR). When you change a file, you see the update in your browser almost immediately. This rapid feedback loop is a perfect match for Solid's fine-grained reactivity, allowing you to iterate and debug at a blistering pace. For any Solid developer, mastering Vite's configuration and plugin ecosystem is non-negotiable.
3. Kobalte: Headless, Accessible UI Primitives
Solid's philosophy is to provide the core reactive primitives and get out of your way. Kobalte applies that same thinking to UI components. It’s a headless UI toolkit, meaning it provides accessible, unstyled building blocks for components like dialogs, dropdowns, and popovers. You get all the complex logic—like ARIA attributes, focus management, and keyboard navigation—handled for you, but you retain full control over the styling. This is a perfect fit for Solid developers who want to build a custom design system without reinventing the wheel on accessibility. Instead of fighting a bloated component library, you can bring your own styles (be it vanilla CSS, Tailwind, or anything else) and build beautiful, accessible interfaces faster.
4. TanStack Query: The Ultimate Server State Manager
Managing server state—fetching, caching, and updating data—is a complex problem in any modern app. TanStack Query (formerly React Query) has a first-class adapter for Solid that makes it feel native to the ecosystem. It allows you to replace messy `createResource` or `createEffect` chains for data fetching with clean, declarative hooks. TanStack Query handles all the tricky parts, like caching, request deduplication, and background refetching, out of the box. Its integration with Solid's reactive system is seamless; you can pass signals directly into query keys, and your UI will update automatically as data changes. It's an indispensable tool for managing the asynchronous complexity of server interactions.
5. Vitest: Fast and Integrated Unit Testing
Since your project is already powered by Vite, the most logical choice for testing is Vitest. Developed by the same team, Vitest is a testing framework designed to be a modern, faster replacement for tools like Jest. Its biggest advantage is its shared configuration and pipeline with Vite, which means your tests run in an environment that's nearly identical to your app, minimizing frustrating inconsistencies. It offers a Jest-compatible API, making the transition easy for many developers. Coupled with `@solidjs/testing-library`, you can write unit and component tests that are not only fast to run but also easy to write, ensuring your reactive components behave exactly as you expect.
