solid-js

Website • API Docs • Tutorial • GitHub • Discord

You are looking at Solid 2.0 (Release Candidate). 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 @solidjs/babel-plugin

Add @solidjs/babel-plugin 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. Start with the primer skill, skills/solid-2.0/SKILL.md (node_modules/solid-js/skills/solid-2.0/SKILL.md): the three rules that matter most, the 1.x → 2.0 corrections, and the primitives to reach for. Then read CHEATSHEET.md (node_modules/solid-js/CHEATSHEET.md, also shipped as the solid-2.0-cheatsheet skill) — the bottom enumerates the specific patterns that changed from 1.x. The Solid 2.0 docs are at v2.solidjs.com (/llms.txt, /llms-full.txt).

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 — v2.solidjs.com.
• Examples — the examples/ folder (see documentation/plans/examples-grid-plan.md for the grid they cover).
• 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.