solid

Solid is a declarative JavaScript library for building user interfaces. Instead of diffing a virtual DOM, it compiles templates to real DOM nodes and updates them through fine-grained reactions, so only the specific piece of the UI tied to changed state re-runs. It's aimed at developers who want a component model similar to React's, without the rendering overhead that comes from re-running whole components on every state change.

Key features

• Fine-grained reactivity: State is created with createSignal, and only the code that actually reads a piece of state re-runs when that state changes, rather than re-rendering an entire component tree.
• Render-once components: Components are regular JavaScript functions that run once to set up the view; there's no repeated re-render cycle for the component body itself the way there is in virtual DOM frameworks.
• Automatic dependency tracking: Reading reactive state inside an expression automatically subscribes that expression to future changes, with no explicit dependency arrays to maintain.
• Small and fast: Solid is small and fully tree-shakable, and performs close to optimized vanilla JavaScript on the JS Framework Benchmark.
• Modern framework features: JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries, and concurrent rendering are all supported.
• Built-in state management: Context and Stores provide state management without needing a third-party library for most cases, and Resources let server-loaded data behave like any other piece of reactive state.
• Real DOM, real debugging: Because Solid renders real DOM nodes, elements can be inspected directly in browser devtools like any other webpage, without a virtual DOM layer to look past.
• Web component friendly: Solid can author custom elements and integrates with the web component model, and supports custom renderers for using Solid outside the browser DOM.
• Isomorphic rendering: Components can render on both the client and the server, and Solid supports Node LTS along with the latest Deno and Cloudflare Worker runtimes.

Ideal use cases

Solid fits developers building performance-sensitive UIs, whether a fully client-rendered single-page app or a server-rendered app with SSR and progressive hydration, who want React-like component ergonomics without virtual DOM overhead. Its small bundle size and tree-shaking make it a reasonable choice for projects where JavaScript payload size matters, and its Suspense and streaming SSR support fit apps that load data from a server and want a responsive loading experience.

It's a less obvious choice if your team is deeply invested in React's ecosystem and tooling and doesn't have a specific performance or bundle-size problem to solve; Solid's component model is similar to React's but not identical (components run once, not on every render), which means some patterns need to be relearned rather than copied directly. Teams that need the largest possible pool of existing libraries and hires should weigh that against Solid's smaller, though active and growing, ecosystem.

Installation

The quickest way to start a new app is with a template:

npx degit solidjs/templates/js my-app
cd my-app
npm i
npm run dev

Or for TypeScript:

npx degit solidjs/templates/ts my-app
cd my-app
npm i
npm run dev

Both templates produce a minimal, client-rendered application powered by Vite.

To add Solid to an existing setup with JSX (the recommended approach):

npm i -D babel-preset-solid
npm i solid-js

Add the Solid preset to your Babel configuration (in .babelrc, or your webpack or rollup Babel config):

"presets": ["solid"]

For TypeScript projects, configure tsconfig.json to handle Solid's JSX:

"compilerOptions": {
  "jsx": "preserve",
  "jsxImportSource": "solid-js"
}

From there, the official documentation and interactive tutorial cover the reactive primitives, component patterns, and SSR setup in more depth.