A declarative, efficient, and flexible JavaScript library for building user interfaces.
Installations
npm install solid-js
Developer Guide
Typescript
Yes
Module System
ESM
Node Version
22.12.0
NPM Version
10.9.0
Score
99.6
Supply Chain
100
Quality
85.4
Maintenance
100
Vulnerability
100
License
Releases
v1.9.0 - LGTM!
Updated on Sep 24, 2024
v1.8.0 - Bifröst
Updated on Oct 09, 2023
v1.7.0 - U Can't Type This
Updated on Mar 30, 2023
v1.6.0 - Castle in the Sky
Updated on Oct 20, 2022
v1.5.0 - Batch to the Future
Updated on Aug 26, 2022
v1.4.0 - Level Up!
Updated on May 12, 2022
Contributors
Languages
TypeScript (71.76%)
JavaScript (28.03%)
CSS (0.21%)
Love this project? Help keep it running — sponsor us today! 🚀
Developer
Download Statistics
Total Downloads
25,087,560
Last Day
52,548
Last Week
301,735
Last Month
1,296,495
Last Year
15,692,317
GitHub Statistics
MIT License
32,959 Stars
1,810 Commits
949 Forks
211 Watchers
6 Branches
170 Contributors
Updated on Feb 13, 2025
Bundle Size
11.72 kB
Minified
3.90 kB
Minified + Gzipped
Package Meta Information
Latest Version
1.9.4
Package Id
solid-js@1.9.4
Unpacked Size
868.04 kB
Size
189.54 kB
File Count
76
NPM Version
10.9.0
Node Version
22.12.0
Published on
Jan 07, 2025
Total Downloads
Cumulative downloads
Total Downloads
25,087,560
Last Day
4.1%
52,548
Compared to previous day
Last Week
2%
301,735
Compared to previous week
Last Month
-31.3%
1,296,495
Compared to previous month
Last Year
139.8%
15,692,317
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
Dependencies
3
Website • API Docs • Features Tutorial • Playground • Discord
Solid is a declarative JavaScript 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. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun. Check out our intro video or read on!
Key Features
- Fine-grained updates to the real DOM
- Declarative data: model your state as a system with reactive primitives
- Render-once mental model: your components are regular JavaScript functions that run once to set up your view
- Automatic dependency tracking: accessing your reactive state subscribes to it
- Small and fast
- Simple: learn a few powerful concepts that can be reused, combined, and built on top of
- Provides modern framework features like JSX, fragments, Context, Portals, Suspense, streaming SSR, progressive hydration, Error Boundaries and concurrent rendering.
- Naturally debuggable: A
<div>
is a real div, so you can use your browser's devtools to inspect the rendering - Web component friendly and can author custom elements
- Isomorphic: render your components on the client and the server
- Universal: write custom renderers to use Solid anywhere
- A growing community and ecosystem with active core team support
Quick Start
You can get started with a simple app by running the following in your terminal:
1> npx degit solidjs/templates/js my-app 2> cd my-app 3> npm i # or yarn or pnpm 4> npm run dev # or yarn or pnpm
Or for TypeScript:
1> npx degit solidjs/templates/ts my-app 2> cd my-app 3> npm i # or yarn or pnpm 4> npm run dev # or yarn or pnpm
This will create a minimal, client-rendered application powered by Vite.
Or you can install the dependencies in your own setup. To use Solid with JSX (recommended), run:
1> npm i -D babel-preset-solid 2> npm i solid-js
The easiest way to get set up is to add babel-preset-solid
to your .babelrc
, babel config for webpack, or rollup configuration:
1"presets": ["solid"]
For TypeScript to work, remember to set your .tsconfig
to handle Solid's JSX:
1"compilerOptions": { 2 "jsx": "preserve", 3 "jsxImportSource": "solid-js", 4}
Why Solid?
Performant
Meticulously engineered for performance and with half a decade of research behind it, Solid's performance is almost indistinguishable from optimized vanilla JavaScript (See Solid on the JS Framework Benchmark). Solid is small and completely tree-shakable, and fast when rendering on the server, too. Whether you're writing a fully client-rendered SPA or a server-rendered app, your users see it faster than ever. (Read more about Solid's performance from the library's creator.)
Powerful
Solid is fully-featured with everything you can expect from a modern framework. Performant state management is built-in with Context and Stores: you don't have to reach for a third party library to manage global state (if you don't want to). With Resources, you can use data loaded from the server like any other piece of state and build a responsive UI for it thanks to Suspense and concurrent rendering. And when you're ready to move to the server, Solid has full SSR and serverless support, with streaming and progressive hydration to get to interactive as quickly as possible. (Check out our full interactive features walkthrough.)
Pragmatic
Do more with less: use simple, composable primitives without hidden rules and gotchas. In Solid, components are just functions - rendering is determined purely by how your state is used - so you're free to organize your code how you like and you don't have to learn a new rendering system. Solid encourages patterns like declarative code and read-write segregation that help keep your project maintainable, but isn't opinionated enough to get in your way.
Productive
Solid is built on established tools like JSX and TypeScript and integrates with the Vite ecosystem. Solid's bare-metal, minimal abstractions give you direct access to the DOM, making it easy to use your favorite native JavaScript libraries like D3. And the Solid ecosystem is growing fast, with custom primitives, component libraries, and build-time utilities that let you write Solid code in new ways.
Show Me!
1import { render } from "solid-js/web"; 2import { createSignal } from "solid-js"; 3 4// A component is just a function that (optionally) accepts properties and returns a DOM node 5const Counter = props => { 6 // Create a piece of reactive state, giving us a accessor, count(), and a setter, setCount() 7 const [count, setCount] = createSignal(props.startingCount || 1); 8 9 // The increment function calls the setter 10 const increment = () => setCount(count() + 1); 11 12 console.log( 13 "The body of the function runs once, like you'd expect from calling any other function, so you only ever see this console log once." 14 ); 15 16 // JSX allows us to write HTML within our JavaScript function and include dynamic expressions using the { } syntax 17 // The only part of this that will ever rerender is the count() text. 18 return ( 19 <button type="button" onClick={increment}> 20 Increment {count()} 21 </button> 22 ); 23}; 24 25// The render function mounts a component onto your page 26render(() => <Counter startingCount={2} />, document.getElementById("app"));
See it in action in our interactive Playground!
Solid compiles our JSX down to efficient real DOM expressions updates, still using the same reactive primitives (createSignal
) at runtime but making sure there's as little rerendering as possible. Here's what that looks like in this example:
1import { render, createComponent, delegateEvents, insert, template } from "solid-js/web"; 2import { createSignal } from "solid-js"; 3 4const _tmpl$ = /*#__PURE__*/ template(`<button type="button">Increment </button>`, 2); 5 6const Counter = props => { 7 const [count, setCount] = createSignal(props.startingCount || 1); 8 const increment = () => setCount(count() + 1); 9 10 console.log("The body of the function runs once . . ."); 11 12 return (() => { 13 //_el$ is a real DOM node! 14 const _el$ = _tmpl$.cloneNode(true); 15 _el$.firstChild; 16 17 _el$.$$click = increment; 18 19 //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button 20 insert(_el$, count, null); 21 22 return _el$; 23 })(); 24}; 25 26render( 27 () => 28 createComponent(Counter, { 29 startingCount: 2 30 }), 31 document.getElementById("app") 32); 33 34delegateEvents(["click"]);
More
Check out our official documentation or browse some examples
Browser Support
SolidJS Core is committed to supporting the last 2 years of modern browsers including Firefox, Safari, Chrome and Edge (for desktop and mobile devices). We do not support IE or similar sunset browsers. For server environments, we support Node LTS and the latest Deno and Cloudflare Worker runtimes.
Community
Come chat with us 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]

No vulnerabilities found.
Reason
no dangerous workflow patterns detected
Reason
7 commit(s) and 16 issue activity found in the last 90 days -- score normalized to 10
Reason
no binaries found in the repo
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
security policy file detected
Details
- Info: security policy file detected: github.com/solidjs/.github/SECURITY.md:1
- Info: Found linked content: github.com/solidjs/.github/SECURITY.md:1
- Info: Found disclosure, vulnerability, and/or timelines in security policy: github.com/solidjs/.github/SECURITY.md:1
- Info: Found text in security policy: github.com/solidjs/.github/SECURITY.md:1
Reason
Found 8/27 approved changesets -- score normalized to 2
Reason
8 existing vulnerabilities detected
Details
- Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
- Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
- Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
- Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
- Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
- Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
- Warn: Project is vulnerable to: GHSA-vg6x-rcgg-rjx6
- Warn: Project is vulnerable to: GHSA-9crc-q9x8-hgqq
Reason
dependency not pinned by hash detected -- score normalized to 0
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-ci.yml:15: update your workflow using https://app.stepsecurity.io/secureworkflow/solidjs/solid/main-ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main-ci.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/solidjs/solid/main-ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-ci.yml:17: update your workflow using https://app.stepsecurity.io/secureworkflow/solidjs/solid/main-ci.yml/main?enable=pin
- Warn: third-party GitHubAction not pinned by hash: .github/workflows/main-ci.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/solidjs/solid/main-ci.yml/main?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main-ci.yml:41: update your workflow using https://app.stepsecurity.io/secureworkflow/solidjs/solid/main-ci.yml/main?enable=pin
- Info: 0 out of 3 GitHub-owned GitHubAction dependencies pinned
- Info: 0 out of 2 third-party GitHubAction dependencies pinned
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/main-ci.yml:1
- Info: no jobLevel write permissions found
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'main'
Reason
SAST tool is not run on all commits -- score normalized to 0
Details
- Warn: 0 commits out of 12 are checked with a SAST tool
Score
4.4
/10
Last Scanned on 2025-02-03
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn MoreOther packages similar to solid-js
@tanstack/virtual-core
Headless UI for virtualizing scrollable elements in TS/JS + Frameworks
vite-plugin-solid
solid-js integration plugin for vite 3/4/5/6
esbuild-plugin-solid
Solid's integration for ESBuild
@tanstack/table-core
Headless UI for building powerful tables & datagrids for TS/JS.