solid
A declarative, efficient, and flexible JavaScript library for building user interfaces.
Top Related Projects
The library for web and native user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Deliver web apps with confidence 🚀
Cybernetically enhanced web apps
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
A rugged, minimal framework for composing JavaScript behavior in your markup.
Quick Overview
Solid is a declarative JavaScript library for creating user interfaces. It uses a reactive system to efficiently update the DOM, offering a component-based architecture similar to React but with a unique approach to reactivity and rendering.
Pros
- Excellent performance due to its fine-grained reactivity system
- Small bundle size, leading to faster load times
- Intuitive API that feels familiar to React developers
- No virtual DOM, resulting in more predictable behavior and potentially better performance
Cons
- Smaller ecosystem compared to more established frameworks like React or Vue
- Learning curve for developers not familiar with reactive programming concepts
- Limited tooling and IDE support compared to more mature frameworks
- Potential for memory leaks if reactive dependencies are not managed properly
Code Examples
Creating a simple counter:
import { createSignal } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(0);
return (
<button onClick={() => setCount(count() + 1)}>
Clicks: {count()}
</button>
);
}
Conditional rendering:
import { createSignal, Show } from "solid-js";
function ToggleContent() {
const [visible, setVisible] = createSignal(false);
return (
<>
<button onClick={() => setVisible(!visible())}>Toggle</button>
<Show when={visible()}>
<p>Now you see me!</p>
</Show>
</>
);
}
Creating a derived signal:
import { createSignal, createMemo } from "solid-js";
function TemperatureConverter() {
const [celsius, setCelsius] = createSignal(0);
const fahrenheit = createMemo(() => celsius() * 9/5 + 32);
return (
<>
<input
type="number"
value={celsius()}
onInput={(e) => setCelsius(e.target.value)}
/>
<p>Fahrenheit: {fahrenheit()}</p>
</>
);
}
Getting Started
To start using Solid, you can create a new project using the Solid CLI:
npx degit solidjs/templates/js my-solid-project
cd my-solid-project
npm install
npm run dev
This will create a new Solid project with a basic setup. You can then start editing the src/App.jsx
file to build your application. Here's a simple example to get you started:
import { render } from "solid-js/web";
function App() {
return <h1>Hello, Solid!</h1>;
}
render(() => <App />, document.getElementById("root"));
Competitor Comparisons
The library for web and native user interfaces.
Pros of React
- Larger ecosystem and community support
- More mature and battle-tested in production environments
- Extensive documentation and learning resources
Cons of React
- Larger bundle size and potentially slower performance
- More complex state management (often requiring additional libraries)
- Steeper learning curve for beginners
Code Comparison
React:
function Counter() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}
Solid:
function Counter() {
const [count, setCount] = createSignal(0);
return <button onClick={() => setCount(count() + 1)}>{count()}</button>;
}
React uses a virtual DOM and re-renders components, while Solid uses a reactive system with fine-grained updates. Solid's approach often results in better performance and smaller bundle sizes. However, React's widespread adoption and extensive ecosystem make it a popular choice for many developers and projects.
Both frameworks offer component-based architecture and declarative syntax, but Solid's reactivity model and compilation step provide advantages in terms of performance and bundle size. React, on the other hand, benefits from its maturity, community support, and vast selection of third-party libraries and tools.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Pros of Vue.js Core
- Larger ecosystem and community support
- More comprehensive documentation and learning resources
- Wider adoption in enterprise environments
Cons of Vue.js Core
- Larger bundle size compared to Solid
- Slightly slower performance in some benchmarks
- More complex reactivity system
Code Comparison
Vue.js Core:
<template>
<div>{{ message }}</div>
</template>
<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
}
}
</script>
Solid:
import { createSignal } from 'solid-js';
function App() {
const [message, setMessage] = createSignal('Hello, Solid!');
return <div>{message()}</div>;
}
Summary
Vue.js Core offers a more mature ecosystem and extensive documentation, making it easier for developers to find resources and support. However, Solid provides a smaller bundle size and potentially better performance in certain scenarios. Vue.js uses a template-based approach with a more traditional component structure, while Solid employs a more functional style with fine-grained reactivity. The choice between the two depends on project requirements, team expertise, and performance needs.
Deliver web apps with confidence 🚀
Pros of Angular
- Comprehensive framework with built-in tools for routing, forms, and HTTP requests
- Strong TypeScript integration and support
- Large ecosystem and community support
Cons of Angular
- Steeper learning curve due to its complexity
- Larger bundle size compared to Solid
- More verbose syntax and boilerplate code
Code Comparison
Angular:
@Component({
selector: 'app-hello',
template: '<h1>Hello, {{name}}!</h1>'
})
export class HelloComponent {
name: string = 'World';
}
Solid:
const Hello = () => {
const [name, setName] = createSignal('World');
return <h1>Hello, {name()}!</h1>;
};
Angular offers a more structured approach with decorators and TypeScript, while Solid provides a simpler, more lightweight syntax. Angular's component definition requires more boilerplate, whereas Solid's functional approach is more concise.
Angular's two-way data binding is implicit, while Solid uses fine-grained reactivity with signals. This difference in reactivity models impacts performance and how developers approach state management in their applications.
Overall, Angular is better suited for large-scale enterprise applications with complex requirements, while Solid excels in scenarios where performance and simplicity are prioritized.
Cybernetically enhanced web apps
Pros of Svelte
- Simpler syntax and less boilerplate code
- Built-in state management and reactivity
- Smaller bundle sizes due to compile-time optimization
Cons of Svelte
- Smaller ecosystem and community compared to Solid
- Less flexibility in terms of rendering strategies
- Limited support for server-side rendering
Code Comparison
Svelte:
<script>
let count = 0;
const increment = () => count++;
</script>
<button on:click={increment}>
Clicks: {count}
</button>
Solid:
import { createSignal } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(0);
return <button onClick={() => setCount(count() + 1)}>Clicks: {count()}</button>;
}
Both Svelte and Solid aim to provide efficient and reactive UI development experiences. Svelte offers a more straightforward syntax and smaller bundle sizes, while Solid provides greater flexibility and a larger ecosystem. Svelte's compile-time approach contrasts with Solid's runtime reactivity system, resulting in different trade-offs in terms of performance and development experience. The choice between the two often depends on specific project requirements and developer preferences.
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
Pros of Preact
- Smaller bundle size (3KB gzipped) compared to Solid's 7KB
- Wider adoption and more mature ecosystem
- Easier learning curve for developers familiar with React
Cons of Preact
- Less performant than Solid in many scenarios
- Lacks some of Solid's advanced reactivity features
- More frequent re-renders due to Virtual DOM diffing
Code Comparison
Preact:
import { h, render } from 'preact';
function App() {
return <h1>Hello, World!</h1>;
}
render(<App />, document.body);
Solid:
import { render } from 'solid-js/web';
function App() {
return <h1>Hello, World!</h1>;
}
render(() => <App />, document.body);
Both Preact and Solid offer similar JSX syntax, making it easy for developers to transition between the two. However, Solid's rendering approach is more efficient, as it compiles components to real DOM operations without using a Virtual DOM.
Preact is an excellent choice for projects requiring a lightweight React-like library with broad compatibility. Solid, on the other hand, shines in scenarios where maximum performance and fine-grained reactivity are crucial, albeit with a steeper learning curve for its unique reactive system.
A rugged, minimal framework for composing JavaScript behavior in your markup.
Pros of Alpine
- Lightweight and easy to learn, with a minimal API
- Can be added to existing HTML without a build step
- Ideal for enhancing static sites or server-rendered applications
Cons of Alpine
- Limited ecosystem and fewer advanced features compared to Solid
- Performance may not scale as well for complex, dynamic applications
- Less suitable for building large single-page applications (SPAs)
Code Comparison
Alpine:
<div x-data="{ count: 0 }">
<button @click="count++">Increment</button>
<span x-text="count"></span>
</div>
Solid:
import { createSignal } from "solid-js";
function Counter() {
const [count, setCount] = createSignal(0);
return (
<>
<button onClick={() => setCount(count() + 1)}>Increment</button>
<span>{count()}</span>
</>
);
}
Alpine is more HTML-centric, adding interactivity directly to markup. Solid uses a component-based approach with JSX, offering more structure for complex applications. While Alpine excels in simplicity for small-scale enhancements, Solid provides a more robust foundation for building larger, more dynamic web applications with better performance characteristics.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
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 a 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
- 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:
> 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.
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]
Top Related Projects
The library for web and native user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Deliver web apps with confidence 🚀
Cybernetically enhanced web apps
⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
A rugged, minimal framework for composing JavaScript behavior in your markup.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot