solid-js

Website • API Docs • Tutorial • GitHub • Discord

You are looking at Solid 2.0 (experimental beta). Public surface differs from 1.x — split-phase createEffect, microtask batching, Loading/Errored boundaries, draft-first store setters, async-in-computations, removed solid-js/web and solid-js/store subpaths, and more.

• Migrating from 1.x? Read MIGRATION.md (full guide).
• Need a quick API reference? See CHEATSHEET.md (one page, every public export — ships with this package).
• Looking for stable Solid 1.x? Use the default main branch.

Solid is a declarative JavaScript library for building user interfaces. Instead of a Virtual DOM, it compiles templates to real DOM nodes and updates them with fine-grained reactivity. Declare your state and use it throughout your app — when a piece of state changes, only the code that depends on it re-runs.

At a glance (Solid 2.0)

import { createSignal } from "solid-js";
import { render } from "@solidjs/web";

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubled = () => count() * 2;

  return <button onClick={() => setCount(c => c + 1)}>{doubled()}</button>;
}

render(() => <Counter />, document.getElementById("app")!);

Try it in our Playground. (The hosted Playground currently runs Solid 1.x — a 2.0 build is on the way.)

The component body runs once. The {doubled()} expression is the only thing that re-renders when count changes — Solid compiles JSX to real DOM nodes and tracks the count() read at that one DOM position.

Install

npm i solid-js @solidjs/web
npm i -D babel-preset-solid

Add babel-preset-solid to your Babel config (or use Vite's Solid plugin), and set tsconfig.json:

{
  "compilerOptions": {
    "jsx": "preserve",
    "jsxImportSource": "@solidjs/web"
  }
}

For web projects, jsxImportSource points at @solidjs/web. In 2.0, solid-js owns renderer-neutral component types, while renderer packages such as @solidjs/web and @solidjs/h own their JSX namespaces and jsx-runtime type entries.

Existing 1.x starter templates target 1.x — 2.0 starter templates are tracked at solidjs/templates.

For LLMs / AI assistants

If you're an AI tool or model generating Solid 2.0 code: the public API differs from any Solid examples that predate 2.0. Read CHEATSHEET.md before generating — it lives inside this package (node_modules/solid-js/CHEATSHEET.md) for that reason. The bottom of the cheatsheet enumerates the specific patterns that changed from 1.x.

The full migration guide is MIGRATION.md. The 2.0 RFCs covering each subsystem live alongside it under documentation/solid-2.0/.

Learn more

• Why Solid, key features, browser support, community, sponsors — see the repository README.
• Full documentation — docs.solidjs.com.
• Examples — documentation/resources/examples.md.
• Discord — discord.com/invite/solidjs.

This is the npm package README for solid-js. The full repository README — including the monorepo layout, contributors, and sponsors — lives at github.com/solidjs/solid.

Similar packages

Other packages similar to solid-js

react

React is a popular JavaScript library for building user interfaces. It uses a virtual DOM and a component-based architecture. Compared to Solid.js, React has a larger ecosystem and community but may have more overhead due to its virtual DOM.

vue

Vue.js is a progressive JavaScript framework for building user interfaces. It features a reactive data binding system and a component-based architecture. Vue.js is similar to Solid.js in its reactivity model but offers more built-in features and a larger ecosystem.

svelte

Svelte is a compiler that converts declarative components into efficient imperative code that directly manipulates the DOM. Unlike Solid.js, Svelte does not use a virtual DOM and compiles components at build time, resulting in highly optimized and fast applications.