Guide · Open source

How to use Solid: install, build a counter and understand signals

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Solid is an open-source JavaScript library for building user interfaces. It compiles your templates into real DOM nodes and re-runs only the code that depends on state that changed, instead of diffing a Virtual DOM. This guide shows you how to start a project, read a small counter component, and decide when Solid is a good fit.

Solidsolidjs/solid · ★ 36.2k · MIT Install options & downloads

Quick start

1Check prerequisites. Make sure Node.js and one of npm, yarn, or pnpm are installed. The README does not state a minimum Node.js version.
2Create a starter app. Run npx degit solidjs/templates/js my-app for JavaScript or npx degit solidjs/templates/ts my-app for TypeScript.
3Install and run. Change into the folder, run npm i, then npm run dev to start the development server.
4Read the counter example. Open the component and note how createSignal, the count() accessor and the setter fit together.
5Add Solid to an existing project. Run npm i solid-js in your project, and add babel-preset-solid if you use JSX with Babel.
6Configure TypeScript JSX. Set jsx to preserve and jsxImportSource to solid-js in your tsconfig.
7Explore the docs. Use the API docs and the interactive features tutorial linked from the README to learn more primitives.

What Solid is and how it updates the page

Solid is a declarative library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. When a piece of state changes, only the code that depends on it reruns.

A component in Solid is a regular JavaScript function that runs once to set up your view. The README describes the rendered output as a real element, so a div in Solid is a real div you can inspect with your browser's devtools.

Fine-grained updates to the real DOM
Automatic dependency tracking: reading reactive state subscribes to it
Components are plain functions that run once

Install Solid with a starter template or npm

The fastest route is a starter template. Run one of the commands below in your terminal, then move into the new folder and install dependencies. The template creates a minimal, client-rendered application powered by Vite.

If you already have a project, install the library with npm. The README says the JSX setup uses babel-preset-solid, and TypeScript projects need their tsconfig set to handle Solid's JSX. You can also use yarn or pnpm.

Requirements: Node.js (the README does not specify a version), plus npm, yarn, or pnpm
Starter templates are available for JavaScript and TypeScript

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

Write your first component with a signal

Solid's core state primitive is createSignal. Calling it returns an accessor, which you read by calling it as a function, and a setter. In the README's counter, count() reads the value and setCount() updates it.

Derived values are plain functions. The example wraps count() * 2 in doubleCount, and only the text that uses it updates when the button is clicked. The body of the component function logs once, which shows that it does not rerun on each change.

createSignal(0) returns [count, setCount]
Read state with count(), not count
Wrap an expression in a function to make derived state

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

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

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

render(Counter, document.getElementById("app")!);

Set up JSX and TypeScript in an existing project

The README recommends JSX. For a custom setup, install babel-preset-solid as a dev dependency, add the solid preset to your Babel config, webpack config, or rollup config, and install solid-js.

For TypeScript, set jsx to preserve and jsxImportSource to solid-js in your tsconfig. The README shows these options as the minimum for Solid's JSX to work.

Dev dependency: babel-preset-solid
Runtime dependency: solid-js
Add "solid" to the presets list in your Babel or bundler config

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

Use built-in features for state, data and SSR

The README lists Context and Stores for global state, so you do not need a third-party library for that unless you want one. Resources let you use server-loaded data like any other state, and Suspense and concurrent rendering help the UI stay responsive while it loads.

Solid also supports server-side rendering with streaming and progressive hydration. The README lists Portals, Error Boundaries, fragments and web component authoring among its features.

Context and Stores for shared state
Resources for server-loaded data
Suspense, concurrent rendering, Error Boundaries
Streaming SSR and progressive hydration

What people use it for

Building interactive client-rendered single-page apps
Building server-rendered apps with streaming and progressive hydration
Creating reusable web components with Solid
Inspecting rendered output directly in browser devtools when debugging UI updates

Frequently asked questions

How do I install Solid?

Run npx degit solidjs/templates/js my-app for a JavaScript starter or the ts template for TypeScript, then run npm i and npm run dev. To add it to an existing project, run npm i solid-js. The README also mentions yarn and pnpm as alternatives.

What do I need to use Solid?

You need Node.js and npm, yarn, or pnpm. The README does not specify a Node.js version. It also assumes familiarity with components and state, so beginners with no JavaScript background may find it hard.

Is Solid free to use?

The repository is licensed under MIT. The README does not describe any paid tier, so the library itself is open source under that licence.

Is Solid the same as React?

No. Solid does not use a Virtual DOM, and components run once instead of rerunning on each state change. Solid is often compared with React, Vue, Svelte and Preact, but the README does not provide a direct comparison, so check the benchmark and docs for your own needs.

Why does my component not rerun when a value changes?

In Solid, the component function runs once. Only expressions that read a signal, such as count(), update when that signal changes. Put reactive reads inside JSX or derived functions so they can update.

Can Solid render on the server?

Yes. The README says Solid supports full SSR and serverless use, with streaming and progressive hydration.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Solid suits developers who are comfortable with JSX and TypeScript and want precise control over what re-renders. Beginners without JavaScript experience, or teams that need a large ready-made component ecosystem or long production track record, should consider other options such as React or Vue.

Install options & downloads