What is solid-js?
Solid.js is a declarative JavaScript library for building user interfaces. It focuses on fine-grained reactivity, which allows for highly efficient updates and minimal re-renders. Solid.js is designed to be fast and simple, providing a reactive programming model that is easy to understand and use.
What are solid-js's main functionalities?
Reactive State Management
Solid.js uses fine-grained reactivity for state management. The `createSignal` function creates a reactive state that updates the UI efficiently when the state changes.
import { createSignal } from 'solid-js';
function Counter() {
const [count, setCount] = createSignal(0);
return (
<div>
<button onClick={() => setCount(count() + 1)}>Increment</button>
<p>Count: {count()}</p>
</div>
);
}
JSX Support
Solid.js supports JSX, allowing you to write HTML-like syntax within JavaScript. This makes it easy to create and manage UI components.
import { render } from 'solid-js/web';
function App() {
return (
<div>
<h1>Hello, Solid.js!</h1>
</div>
);
}
render(() => <App />, document.getElementById('root'));
Component Composition
Solid.js allows for easy component composition. You can create reusable components and pass data to them via props.
function Greeting(props) {
return <h1>Hello, {props.name}!</h1>;
}
function App() {
return (
<div>
<Greeting name="Solid.js" />
</div>
);
}
Direct DOM Manipulation
Solid.js provides direct DOM manipulation capabilities. The `onCleanup` function allows you to perform cleanup tasks, such as clearing intervals, when a component is unmounted.
import { onCleanup } from 'solid-js';
function Timer() {
let timerId;
const [time, setTime] = createSignal(0);
const startTimer = () => {
timerId = setInterval(() => setTime(time() + 1), 1000);
};
onCleanup(() => clearInterval(timerId));
return (
<div>
<p>Time: {time()}</p>
<button onClick={startTimer}>Start Timer</button>
</div>
);
}
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.
Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs.
Key Features
- Real DOM with fine-grained updates (No Virtual DOM! No Dirty Checking Digest Loop!).
- Declarative data
- Simple composable primitives without the hidden rules.
- Function Components with no need for lifecycle methods or specialized configuration objects.
- Render once mental model.
- Fast!
- Small! Completely tree-shakeable Solid's compiler will only include parts of the library you use.
- Supports and is built on TypeScript.
- Supports modern features like JSX, Fragments, Context, Portals, Suspense, Streaming SSR, Progressive Hydration, Error Boundaries and Concurrent Rendering.
- Works in serverless environments including AWS Lambda and Cloudflare Workers.
- Webcomponent friendly and can author Custom Elements
- Context API that spans Custom Elements
- Implicit event delegation with Shadow DOM Retargeting
- Shadow DOM Portals
- Transparent debugging: a
<div>
is just a div.
Learn more on the Solid Website and come chat with us on our Discord
The Gist
import { render } from "solid-js/web";
const HelloMessage = props => <div>Hello {props.name}</div>;
render(() => <HelloMessage name="Taylor" />, document.getElementById("hello-example"));
A Simple Component is just a function that accepts properties. Solid uses a render
function to create the reactive mount point of your application.
The JSX is then compiled down to efficient real DOM expressions:
import { render, template, insert, createComponent } from "solid-js/web";
const _tmpl$ = template(`<div>Hello </div>`);
const HelloMessage = props => {
const _el$ = _tmpl$.cloneNode(true);
insert(_el$, () => props.name);
return _el$;
};
render(
() => createComponent(HelloMessage, { name: "Taylor" }),
document.getElementById("hello-example")
);
That _el$
is a real div element and props.name
, Taylor
in this case, is appended to its child nodes. Notice that props.name
is wrapped in a function. That is because that is the only part of this component that will ever execute again. Even if a name is updated from the outside only that one expression will be re-evaluated. The compiler optimizes initial render and the runtime optimizes updates. It's the best of both worlds.
Want to see what code Solid generates:
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
> npm run dev
Or for TypeScript:
> npx degit solidjs/templates/ts my-app
> cd my-app
> npm i
> npm run dev
This will create a minimal client-rendered application powered by Vite.
Or you can install the dependencies in your own project. To use Solid with JSX (recommended) run:
> npm install solid-js babel-preset-solid
The easiest way to get setup is add babel-preset-solid
to your .babelrc, or babel config for webpack, or rollup:
"presets": ["solid"]
For TypeScript remember to set your TSConfig to handle Solid's JSX by:
"compilerOptions": {
"jsx": "preserve",
"jsxImportSource": "solid-js",
}
Documentation
Check out the Documentation website.
Examples
Browser Support
The last 2 versions of modern evergreen browsers and Node LTS.
Come chat with us on Discord
Contributors
Open Collective
Support us with a donation and help us continue our activities. [Contribute]
Become a sponsor and get your logo on our README on GitHub with a link to your site. [Become a sponsor]