1. SolidStart: The Official Meta-Framework
If you're building anything more than a simple, client-rendered widget, you need a framework. SolidStart is the official answer, analogous to what Next.js is for React or SvelteKit is for Svelte. It provides the essential architecture for full-stack applications,
including file-based routing, server-side rendering (SSR), API endpoints, and middleware. SolidStart is built on Vite, ensuring a lightning-fast development experience. It’s designed to be modular and platform-agnostic, allowing you to deploy on everything from Vercel to Cloudflare. For anyone serious about building a production-grade application with Solid.js, starting with SolidStart is a no-brainer. It sets up the robust foundation you need, handling the complex build configurations so you can focus on writing your app's logic.
2. TanStack Query: The Data Fetching Powerhouse
Managing server state—fetching, caching, and updating data—is a complex challenge in any modern web app. While Solid.js has its own primitive for async data, `createResource`, TanStack Query (formerly React Query) brings a whole suite of advanced features to the table. The official Solid adapter, `@tanstack/solid-query`, makes this powerful library a first-class citizen in the ecosystem. It gives you out-of-box features like request cancellation, automatic refetching on window focus, pagination support, and optimistic updates. It beautifully complements Solid’s reactive nature, helping you remove boilerplate code and making your data-fetching logic more declarative and maintainable. If your application relies heavily on interacting with APIs, Solid Query will quickly become an indispensable part of your toolkit.
3. Kobalte: The Headless UI Toolkit
Solid.js gives you the power to build your UI, but it doesn’t provide pre-built components like dropdowns, dialogs, or tooltips. This is where Kobalte shines. It's a 'headless' UI toolkit, meaning it provides all the functionality, accessibility, and state management for common UI components, but without imposing any styles. This gives you complete control over the look and feel. You can bring your own CSS, use Tailwind, or any other styling solution you prefer. Kobalte is built with accessibility as a top priority, following WAI-ARIA authoring practices to handle things like focus management and keyboard navigation for you. It's perfect for developers who want to build a custom design system from the ground up without having to reinvent the wheel on complex component logic.
4. Hope UI: The Fully-Styled Component Library
Sometimes you don't need the granular control of a headless library; you just want beautiful, functional components that work out of the box. For that, there's Hope UI. Unlike Kobalte, Hope UI is a fully-styled component library, much like Material-UI or Mantine in the React world. It provides over 40 accessible and composable components that are ready to use immediately. Built for SolidJS 2.0 and styled with Tailwind CSS, it offers an elegant and themeable system that includes light and dark modes by default. If your priority is speed of development and you want a polished, consistent look for your application without extensive custom styling, Hope UI is an excellent choice.
5. Solid Developer Tools: The Debugging Essential
Understanding how your application's state flows and updates is key to effective debugging. Solid’s fine-grained reactivity, while powerful, can sometimes be tricky to visualize. The Solid Developer Tools extension for Chrome is an essential utility for pulling back the curtain. It provides a visual representation of Solid’s reactivity graph, allowing you to see how signals, memos, and effects are connected. You can inspect the component hierarchy, see the current value of your signals, and track how changes propagate through your app. This tool is invaluable for both learning how Solid works under the hood and for pinpointing performance bottlenecks or unexpected behavior in complex applications.
