SolidJS

Frontend UI Libraries

Simple and performant reactivity for building user interfaces

weekly downloads1.5M

versionv1.9.11

licenseMIT

Fine-grained reactivityNo VDOM overheadReact-like syntax

Overview

Solid-js is a declarative JavaScript library for building user interfaces that takes a fundamentally different approach from React and Vue. Instead of using a Virtual DOM, Solid compiles JSX templates directly to efficient, fine-grained DOM updates. This means your components run once to establish the structure, and only the specific DOM nodes affected by state changes get updated—no diffing, no reconciliation overhead.

The library was created by Ryan Carniato to solve the performance limitations of Virtual DOM frameworks while maintaining a familiar developer experience. Solid's reactivity system automatically tracks dependencies when you access reactive values, creating a precise subscription graph that knows exactly what needs to update when state changes. This results in bundle sizes often 50-70% smaller than equivalent React applications and significantly faster runtime performance.

With over 1.4 million weekly downloads, Solid has gained traction among developers building performance-critical applications, data-heavy dashboards, and projects where bundle size matters. It provides a complete solution including server-side rendering, suspense, error boundaries, context, and routing—everything needed for production applications without the ecosystem bloat of larger frameworks.

Quick Start

typescript

import { createSignal, createEffect, For, Show } from 'solid-js';
import { render } from 'solid-js/web';

function TodoApp() {
  const [todos, setTodos] = createSignal([]);
  const [input, setInput] = createSignal('');
  
  const addTodo = () => {
    const text = input().trim();
    if (text) {
      setTodos([...todos(), { id: Date.now(), text, done: false }]);
      setInput('');
    }
  };
  
  const toggleTodo = (id) => {
    setTodos(todos().map(todo => 
      todo.id === id ? { ...todo, done: !todo.done } : todo
    ));
  };
  
  const remaining = () => todos().filter(t => !t.done).length;
  
  createEffect(() => {
    console.log(`${remaining()} tasks remaining`);
  });
  
  return (
    <div>
      <h1>Solid Todo App</h1>
      <input 
        value={input()} 
        onInput={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && addTodo()}
      />
      <button onClick={addTodo}>Add</button>
      
      <Show when={todos().length > 0} fallback={<p>No todos yet</p>}>
        <p>{remaining()} of {todos().length} remaining</p>
        <ul>
          <For each={todos()}>
            {(todo) => (
              <li 
                style={{ 'text-decoration': todo.done ? 'line-through' : 'none' }}
                onClick={() => toggleTodo(todo.id)}
              >
                {todo.text}
              </li>
            )}
          </For>
        </ul>
      </Show>
    </div>
  );
}

render(() => <TodoApp />, document.getElementById('app'));

Use Cases

High-performance dashboards: Applications displaying real-time data with frequent updates benefit from Solid's fine-grained reactivity, which updates only the specific DOM nodes that changed rather than re-rendering entire component trees.

Progressive web apps with strict size budgets: Mobile-first applications and PWAs where every kilobyte matters can leverage Solid's smaller bundle sizes (often 5-10KB for basic apps) compared to React's minimum 40KB+ overhead.

Interactive data visualizations: Complex visualizations with thousands of data points that need responsive interactions work well with Solid because updates don't trigger virtual DOM diffing—only the affected elements re-render.

Server-side rendered applications: Projects requiring fast time-to-interactive with streaming SSR and progressive hydration, where Solid can hydrate individual components as they become visible rather than blocking on the entire page.

Migration from React codebases: Teams wanting better performance without completely rewriting can leverage Solid's React-like API (createSignal vs useState, createEffect vs useEffect) to port components with familiar patterns.

Pros & Cons

Pros

+True fine-grained reactivity with automatic dependency tracking eliminates unnecessary re-renders and diffing overhead
+Significantly smaller bundle sizes and faster runtime performance compared to Virtual DOM frameworks
+React-like API reduces learning curve for developers familiar with hooks and JSX syntax
+Components are just functions that run once—easier mental model without complex lifecycle methods
+Built-in solutions for SSR, streaming, hydration, routing, and state management without external dependencies

Cons

−Smaller ecosystem with fewer third-party libraries and community resources compared to React or Vue
−JSX behaves differently than React—control flow uses components (For, Show) instead of JavaScript map/ternary operators
−Reactive primitives must be called as functions (count() not count) which can be confusing when migrating from other frameworks
−Less enterprise adoption means fewer case studies, tutorials, and developer job opportunities
−DevTools and debugging experience still maturing compared to established frameworks with decade-long tooling investment

Install

bash

npm install solid-js

bash

pnpm add solid-js

bash

bun add solid-js

↗ View full npm package details