solid README

The project's README from github.com/solidjs/solid. As one markdown file: README.md.

SolidJS

Build Status Coverage Status

NPM Version Discord Subreddit subscribers

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.

At a Glance

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

function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

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

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

Try this code in our playground!

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

// A component is just a function that returns a DOM node
function Counter() {
  // Create a piece of reactive state, giving us an accessor, count(), and a setter, setCount()
  const [count, setCount] = createSignal(0);
  
  //To create derived state, just wrap an expression in a function
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

  // JSX allows you to write HTML within your JavaScript function and include dynamic expressions using the { } syntax
  // The only part of this that will ever rerender is the doubleCount() text.
  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        Increment: {doubleCount()}
      </button>
    </>
  );
}

// The render function mounts a component onto your page
render(Counter, document.getElementById("app")!);

Solid compiles your JSX down to efficient real DOM updates. It uses 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:

import { template as _$template } from "solid-js/web";
import { delegateEvents as _$delegateEvents } from "solid-js/web";
import { insert as _$insert } from "solid-js/web";
//The compiler pulls out any static HTML
const _tmpl$ = /*#__PURE__*/_$template(`<button>Increment: `);

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

function Counter() {
  const [count, setCount] = createSignal(0);
  
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");
  
  return (() => {
    //_el$ is a real DOM node!
    const _el$ = _tmpl$();
    _el$.$$click = () => setCount(c => c + 1);
     //This inserts the count as a child of the button in a way that allows count to update without rerendering the whole button
    _$insert(_el$, doubleCount);
    return _el$;
  })();
}
render(Counter, document.getElementById("app"));
_$delegateEvents(["click"]);

Key Features

Quick Start

You can get started with a simple app by running the following in your terminal:

> npx degit solidjs/templates/js my-app
> cd my-app
> npm i # or yarn or pnpm
> npm run dev # or yarn or pnpm

Or for TypeScript:

> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i # or yarn or pnpm
> 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:

> npm i -D babel-preset-solid
> 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:

"presets": ["solid"]

For TypeScript to work, remember to set your .tsconfig to handle Solid's JSX:

"compilerOptions": {
  "jsx": "preserve",
  "jsxImportSource": "solid-js",
}

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.

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.

Testing Powered By SauceLabs

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]

solid (solidjs/solid)

ssr
Searching Database…

36.1K ·GitHub
Solid
What is this?Solid is a declarative JavaScript library for building user interfaces. Instead of using a Virtual DOM, it compiles JSX templates to real DOM nodes and updates them with fine-grained reactions.
Is this a UI framework or just a rendering library?It behaves like a full framework: components are plain functions that run once, and Solid ships Context, Stores, Suspense, streaming SSR, progressive hydration and Error Boundaries out of the box, on top of a lightweight reactive core.
How do I start a new Solid project?Scaffold a client-rendered app with Vite by running the Solid template (JavaScript or TypeScript), or add 'babel-preset-solid' to your own Babel/webpack/rollup config if you're wiring Solid into an existing setup.
Do I need a build step like Babel or Vite?Yes — Solid's JSX needs to be compiled, so you need 'babel-preset-solid' (or the Vite plugin) in your toolchain, and if you use TypeScript you must set your tsconfig to handle Solid's JSX.
Does Solid work in old browsers like IE?No. Solid supports the last two years of modern browsers (Firefox, Safari, Chrome, Edge) plus Node LTS, Deno and Cloudflare Workers on the server, but explicitly drops IE and similar sunset browsers.
Can Solid run on the server, not just the client?Yes — Solid is isomorphic and universal: it supports full server-side rendering, serverless deployment, streaming and progressive hydration, and you can even write custom renderers to target other environments.
How is Solid different from React's Virtual DOM approach?Solid compiles JSX directly to real DOM updates and uses fine-grained reactive primitives (createSignal) so only the exact code that depends on a changed value re-runs, instead of re-rendering whole components and diffing a Virtual DOM.
Do components re-render on every state change like in React?No. Components run once to set up the view ('render-once' model); afterwards, only the specific reactive expressions tied to changed state update, not the whole component.
Can I manage global state without a separate library?Yes, Solid has built-in Context and Stores for performant state management, so you typically don't need a third-party state library.
Is Solid fast compared to other frameworks?Solid is small, tree-shakable, and benchmarks close to optimized vanilla JavaScript on the JS Framework Benchmark, both on the client and when rendering on the server.
What are similar projects?mitosis, vue, shaders, svelte, leptos, framework, core, ice
Which topics is it in?solid, javascript-framework, spa, declarative, reactive, jsx, ssr, web-framework, node, vite, ui, web-development
Creator
solidjs
Size
34.3 MB
Stars
36.1K
Updated
CommitOct 07Releasev1.9.0Sep 24
Age
8y
Commits · 90 Days