SolidJS Tooling: What Actually Works (And What's Total Garbage)

Started using SolidJS when 1.7 was current, been through enough version updates to know what breaks and what doesn't. Here's the brutal truth: it's fast as hell, but you'll spend weekends building things that just exist for React. The official ecosystem page makes everything look great, but reality is messier.

Build Tools: Actually Good

The build setup doesn't suck, which is saying something. Vite integration works out of the box and HMR doesn't break every 10 minutes like some frameworks I could mention. TypeScript support is solid (pun intended) – the JSX compilation actually understands what you're doing.

What works:

• Vite - Fast dev server, builds don't take forever
• SolidStart - Meta-framework that actually works (when it wants to)
• TypeScript - First-class support, IntelliSense doesn't lie to you
• Rollup - Library packaging works fine
• esbuild - Does the heavy lifting, you won't notice it

Build times are genuinely faster than equivalent React setups. We're talking 3-second rebuilds vs 45 seconds with Create React App. The Solid DevTools crash Chrome more often than my hopes of using a stable dev environment. Maybe 1 in 15 sessions if you're lucky. When they don't crash, signal flow debugging is actually useful.

UI Libraries: Kobalte or DIY

Kobalte is your best friend. It's basically Radix for SolidJS and actually implements accessibility correctly. Everything else? Good luck.

The realistic options:

• Kobalte - Headless, accessible, actually maintained. Use this.
• Hope UI - Complete library, looks decent, but customization can be a pain
• SUID - Material-UI port that works but feels like a translation layer
• Solid UI - Newer, smaller, might work for your use case

The ugly truth? You'll build half your components from scratch because the ecosystem has 3 decent libraries and 47 abandoned experiments. Spent 3 days on a fucking date picker because everything either broke accessibility or shit the bed on mobile Safari.

State Management: Signals Are Pretty Great

SolidJS's built-in signals and stores handle most cases without the Redux ceremony. Solid Primitives fills gaps with utilities you'd expect to be built-in.

State options:

• Built-in signals & stores - Covers 90% of what you need
• Solid Primitives - Reactive utilities like debouncing, storage
• TanStack Query - Server state that actually works
• Zustand - Framework-agnostic, if you want familiar patterns

The reactivity model is genuinely better than useEffect hell. Once you get signals, going back to React feels like working with stone tools. But debugging runaway effects is still a nightmare – they just happen at compile time instead of runtime.

Forms: Limited and Frustrating

This is where you'll miss React Hook Form the most. Felte is decent but has weird quirks with validation timing. Modular Forms is newer and type-safe but the API feels overengineered.

Form reality:

• @felte/solid - Most mature, but validation can be wonky
• @modular-forms/solid - Type-safe, complex API
• Roll your own - What most of us end up doing

Used Felte in production and it works, but the validation timing will make you question your life choices. Error states randomly disappear when you need them most, like they're playing hide-and-seek with your sanity.

Animation: Basically CSS or Tears

React spoiled us with Framer Motion. SolidJS? You get Motion One (5.8kb, hardware accelerated) or you write CSS keyframes like it's 2015.

Animation options:

• Motion One for Solid - Works for basic stuff
• AutoAnimate - One-line layout animations
• CSS animations - What you'll actually use
• WAAPI - Direct browser APIs when desperate

Designer wanted complex page transitions that looked "smooth and modern." Ended up writing 200 lines of CSS and vanilla JS because Motion One shit the bed trying to sync state changes. Three days of debugging why animations stuttered on Safari, only to discover it was a z-index issue. Motion One works fine for button hovers and spinners, anything complex and you're back to CSS hell.

Routing: Solid Router Does the Job

Solid Router is solid (sorry). It's not React Router but it handles nested routes, data loading, and doesn't randomly break your app state.

Routing features that work:

• Nested route definitions (actually work)
• Data loading at route level
• File-based routing in SolidStart
• TypeScript route parameters (when configured right)
• Server-side rendering support

The data loading patterns take some getting used to if you're coming from React Router, but the route data functions are more predictable than useEffect chains.

Testing: Solid Testing Library Gets the Job Done

Solid Testing Library follows the React Testing Library patterns, so your existing test knowledge transfers. Vitest is the recommended runner and it's genuinely fast.

Testing stack:

• Vitest - Fast test runner, Vite integration
• @solidjs/testing-library - DOM testing utilities
• Playwright - E2E testing (better than Cypress)
• MSW - API mocking that doesn't suck

Setup requires manual config because there's no Create React App crutch, but SolidStart gives you sane defaults. Spent a morning getting source maps working because Vitest decided to be special about TypeScript paths. Once you fight through the config hell, test runs are consistently under 2 seconds for a 300+ test suite, which is nice.

Deployment: Works Everywhere

SolidJS builds to static assets, so it deploys anywhere. SolidStart gives you adapters for major platforms when you need SSR.

Deployment platforms:

• Netlify - Static hosting, edge functions work
• Vercel - Edge runtime support is solid
• Cloudflare Pages - Fast edge deployment
• Any CDN - Static builds work everywhere

Cloudflare Pages deployment is usually under 2 minutes unless their CDN is having a bad day. No Docker hell, no webpack configs that break randomly, just git push and pray. Bundle sizes stay sane (around 45kb for a decent-sized app) which is a fucking miracle compared to React's bloat.

Production Reality Check

Yandex switched from React to SolidJS in 2022. CodeSandbox and Netlify use it in production. It's not a toy, but you need to know what you're signing up for:

The good:

• Build times that don't make you hate life
• Bundle sizes that won't break mobile users
• Performance that makes React look sluggish
• Reactivity that actually makes sense
• TypeScript support that works correctly

The frustrating:

• Smaller talent pool for hiring (good luck finding senior SolidJS devs)
• You'll build more custom components than you want
• Animation ecosystem is basically nonexistent
• Some third-party libraries just don't have SolidJS versions
• DevTools crash more often than they should

Current Status and What's Coming

SolidJS 2.0 is in development with compilation improvements, but it's still experimental. The current stable version is 1.9.x, which won't randomly break your shit in production.

The community is growing but Reddit discussions still revolve around "should I use this instead of React?" The Discord server is active and Ryan Carniato actually responds to questions.

Look, SolidJS is fucking fast and signals make sense, but you'll spend extra weekends building shit that React developers get for free. If you value performance over the comfort of 50 different form libraries, and your team won't mutiny when they can't find Stack Overflow answers, go for it. If you need to ship yesterday and can't afford to explain your framework choice to every contractor, stick with React's bloated ecosystem.

Built enough SolidJS apps to know which tools actually work when shit hits the fan at 3am. Here's the stack that won't make you want to delete your GitHub account.

Build Setup: Vite Just Works

Vite with the SolidJS plugin is the only build tool you should consider. Create React App takes 45 seconds to rebuild? Vite does it in 3 seconds.

npm create solid@latest my-app
cd my-app
npm install
npm run dev

That's it. No webpack.config.js hell, no babel presets, no wondering why your source maps broke. The official SolidJS templates work immediately.

Vite config that actually works:

// vite.config.ts
import { defineConfig } from 'vite';
import solid from 'vite-plugin-solid';

export default defineConfig({
  plugins: [solid()],
  build: {
    target: 'esnext', // Use modern JS features
    sourcemap: true,  // Debug production issues
  },
  server: {
    port: 3000,
    open: true, // Auto-opens browser
  },
});

Hot module replacement doesn't randomly break like React's. When you save a file, it actually updates without losing state. Heads up though: if you have circular imports, HMR will shit the bed and you'll need to restart the dev server.

UI Components: Kobalte or Build It Yourself

Kobalte is your lifeline. It's headless, accessible, and actually maintained. Everything else is a gamble.

Component strategy that works:

1. Start with Kobalte for complex interactive components
2. Use Tailwind CSS for styling (integrates perfectly)
3. Build simple components yourself using SolidJS primitives
4. Hope UI for rapid prototyping (if you can live with limited customization)

Don't bother with:

• SUID - Material Design port that feels like a translation layer
• Random UI libraries with 3 GitHub stars
• Porting React components (trust me, I tried)

Wasted a week trying to port some React component because I was too stubborn to admit it wouldn't work. Ended up rewriting it from scratch in 2 hours using Kobalte primitives. Should've just done that first.

State Management: Signals Are Actually Good

SolidJS's built-in signals and stores handle 90% of state management needs. No Redux ceremony, no useEffect dependency hell.

// This actually works as expected
const [count, setCount] = createSignal(0);
const [todos, setTodos] = createStore([]);

// Derived state that updates efficiently
const completedCount = createMemo(() => 
  todos.filter(todo => todo.completed).length
);

For complex state:

• Solid Primitives - Utilities that should be built-in
• TanStack Query - Server state that actually works
• Zustand - If you need familiar patterns

Signals are so much better than useState/useEffect that going back to React feels like using stone tools. No stale closures, no dependency arrays, no mysterious re-renders.

Forms: Felte or Roll Your Own

Form handling is where SolidJS shows its youth. Felte works but has quirks. Modular Forms is overengineered.

Felte setup that works:

import { createForm } from '@felte/solid';
import { validator } from '@felte/validator-yup';
import * as yup from 'yup';

const schema = yup.object({
  email: yup.string().email().required(),
  password: yup.string().min(8).required(),
});

const { form, errors, isValid } = createForm({
  extend: validator({ schema }),
  onSubmit: (values) => {
    // Actually submits when valid
    console.log(values);
  },
});

Here's what the docs won't tell you: Felte's validation timing is fucked if you have async validation that depends on other fields. Error messages disappear randomly when signals update. For simple forms, just use signals and save yourself the headache. Pro tip: if you have nested objects in your form, Felte will make you want to switch back to React Hook Form.

Routing: Solid Router Does the Job

Solid Router works reliably. File-based routing in SolidStart is clean when you need SSR.

Route setup that works:

// App.jsx
import { Router, Routes, Route } from '@solidjs/router';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/users/:id" component={UserDetail} />
      </Routes>
    </Router>
  );
}

Data loading patterns are different from React Router but more predictable. No useEffect chains to load route data.

Testing: Vitest + Testing Library

Vitest is fast and doesn't randomly timeout like Jest. Solid Testing Library follows React Testing Library patterns.

// UserList.test.jsx
import { render, screen } from '@solidjs/testing-library';
import { UserList } from './UserList';

test('displays user names', async () => {
  const users = [{ id: 1, name: 'John Doe' }];
  render(() => <UserList users={users} />);
  
  expect(screen.getByText('John Doe')).toBeInTheDocument();
});

Setup is manual compared to Create React App, but once configured, test runs are consistently under 2 seconds for our 300+ test suite.

Styling: Tailwind or CSS Modules

Tailwind CSS works perfectly with SolidJS and Vite. UnoCSS is lighter if bundle size matters.

Tailwind config that works:

// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

CSS-in-JS options like Stitches work but add complexity. Plain CSS modules work fine for component-scoped styles.

Development Tools: Chrome DevTools + Console.log

The SolidJS DevTools crash Chrome about 1 in 20 sessions. When they work, signal flow debugging is useful. Protip: if DevTools start acting weird, disable and re-enable the extension instead of restarting Chrome.

Debugging that actually works:

• console.log in signal effects
• Chrome DevTools performance tab for rendering issues
• Vite's built-in error overlay for build problems

Signal debugging is easier than React's re-render hell, but you'll still end up with console.log statements everywhere.

Deployment: Static Hosting Wins

SolidJS builds to static assets that deploy anywhere. Our production setup:

Cloudflare Pages deployment:

npm run build
## Outputs to dist/ directory
## Auto-deploys on git push

Bundle sizes stay reasonable (45kb for a solid-sized app vs 180kb React bloatware). Cold starts stop being a problem, edge deployment actually works instead of timing out randomly.

Deployment options that work:

• Cloudflare Pages - Fast edge deployment
• Netlify - Simple static hosting
• Vercel - Good for SolidStart SSR
• Any CDN - Static builds work everywhere

Production Monitoring: Standard Tools

SolidJS works with standard monitoring tools:

• Sentry for error tracking
• PostHog for analytics
• Lighthouse for performance audits

Performance is rarely an issue with SolidJS. Our Lighthouse scores are consistently 95+ without optimization effort.

Package Management: NPM or PNPM

PNPM is faster for SolidJS projects with many dependencies. NPM works fine for smaller projects.

## PNPM setup that works
pnpm create solid@latest my-app
cd my-app  
pnpm install
pnpm dev

Dependency management is simpler than React because the ecosystem is smaller. Fewer choices, fewer conflicts.

The Reality Stack

What we actually use in production:

• SolidJS + TypeScript for the framework
• Vite for build tool
• Kobalte for complex UI components
• Tailwind for styling
• Felte for forms (grudgingly)
• TanStack Query for server state
• Vitest for testing
• Cloudflare Pages for deployment

What we skipped:

• Complex state management (signals handle it)
• CSS-in-JS libraries (spent 2 days fighting bundle size bloat, went back to Tailwind)
• Animation libraries (CSS transitions work fine)
• Most third-party UI libraries (Kobalte + custom components)

The ecosystem is smaller but more focused. You'll build more yourself, but what you build actually works. Performance stops being a concern once you ship to production.