Website • API Docs • Tutorial • Discord

Solid 2.0 (experimental beta)

You're on the next branch — Solid 2.0. The public API 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? Start with documentation/solid-2.0/MIGRATION.md.
• Quick API reference: packages/solid/CHEATSHEET.md (one screen, every public export).
• Design rationale: the 2.0 RFCs at documentation/solid-2.0/.
• 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;

  // The component body runs once. Only `{doubled()}` updates when count changes.
  return <button onClick={() => setCount(c => c + 1)}>{doubled()}</button>;
}

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

Try it in our Playground.

Explain this!

Solid compiles your JSX to real DOM operations at build time. The component function runs once on mount; reactivity is per-expression, not per-render. The {doubled()} expression compiles to a tracked update that only touches that one DOM position when count() changes.

import { template, delegateEvents, insert } from "@solidjs/web";
import { createSignal } from "solid-js";

const _tmpl$ = /*#__PURE__*/ template(`<button>`);

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

  return (() => {
    const _el$ = _tmpl$();
    _el$.$$click = () => setCount(c => c + 1);
    insert(_el$, doubled);
    return _el$;
  })();
}
delegateEvents(["click"]);

Reads update on the next microtask (or call flush() for synchronous interop). Effects are split into a tracking compute phase and a side-effecting apply phase — see MIGRATION.md for the full model.

Key features

• Fine-grained updates to the real DOM — no virtual DOM diff.
• Declarative reactive primitives (createSignal, createMemo, createStore).
• Render-once components — your component function is plain JavaScript that runs once.
• Automatic dependency tracking — reading reactive state subscribes to it.
• Microtask-batched updates with flush() for synchronous interop.
• First-class async: any computation can return a Promise/AsyncIterable; <Loading> is the boundary.
• Optimistic UI primitives (createOptimistic, createOptimisticStore) and structured action(...) mutations.
• Streaming SSR and progressive hydration.
• TypeScript-first, JSX-first, web-component friendly.
• Universal: write custom renderers via @solidjs/universal to target non-DOM platforms.

Quick start

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 configure TypeScript:

{
  "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.

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

For LLMs / AI assistants

The public API differs from any Solid examples that predate 2.0. Before generating Solid 2.0 code, read:

• packages/solid/CHEATSHEET.md — one-page reference; the bottom enumerates patterns that changed from 1.x.
• documentation/solid-2.0/MIGRATION.md — full migration guide.

The cheatsheet ships inside the solid-js npm package, so it's also reachable as node_modules/solid-js/CHEATSHEET.md from any user project.

Repository

This is a PNPM workspaces monorepo. The packages here are versioned together as 2.0.0-beta.x:

Package	Path	Purpose
solid-js	packages/solid	Core runtime — components, flow controls, context, hydration.
@solidjs/signals	packages/solid-signals	Reactive primitives — signals, memos, effects, stores.
@solidjs/web	packages/solid-web	Web platform runtime — render, hydrate, SSR, Portal, Dynamic.
@solidjs/h	packages/solid-h	Hyperscript / JSX factory.
solid-html	packages/solid-html	Build-less tagged template literals.
@solidjs/universal	packages/solid-universal	Universal runtime for custom renderers.
solid-element	packages/solid-element	Web Components wrapper.
babel-preset-solid	packages/babel-preset-solid	Babel preset for JSX compilation.

DOM operations live in the dom-expressions repo.

Why Solid?

Performant

Engineered for performance with years of research behind it — Solid's runtime cost is close to optimized vanilla JavaScript on the JS Framework Benchmark. Small, fully tree-shakable, fast on the server too. (Read more about Solid's performance.)

Powerful

Performant state management is built in (Context, Stores, Projections). Async is a first-class capability of computations — no separate createResource model — with <Loading> / <Errored> boundaries and isPending for revalidation indicators. Full SSR, streaming, and progressive hydration when you're ready to move to the server.

Pragmatic

Components are plain functions. Rendering is determined by how state is used — no rendering system to learn. Read-write segregation is encouraged but not enforced.

Productive

Built on JSX and TypeScript, integrates with the Vite ecosystem. Bare-metal abstractions give you direct access to the DOM. Growing ecosystem of primitives, component libraries, and build-time utilities.

More

• Documentation
• Examples
• Tutorial

Browser support

SolidJS Core supports the last 2 years of modern Firefox, Safari, Chrome, and Edge (desktop and mobile). IE and similar sunset browsers are not supported. For server environments, Node LTS, the latest Deno, and Cloudflare Worker runtimes are supported.

Community

Come chat on Discord. Solid's creator and the rest of the core team are active there, and we're always looking for contributions.

Contributors

Open Collective

Support us with a donation and help us continue our activities. [Contribute]

Sponsors

Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]