SolidJS

Simple and performant reactivity for building user interfaces

Using Solid for all my web apps and static sites. Love how it takes all the best parts of React (component tree model with one way data flow & JSX) but does it better due to fine grained reactivity & avoiding VDOM thus being much faster than React.

Ryan Carniato does great YouTube videos on web/solidJS (SolidJS: Past, Present, Future is insightful, especially part about future focus). Solid Start is great starter template. solid-primitives/fetch is great alternative to React Query.

Hope UI is nice component library. Motion One for Solid is great for animations.

My personal site & LA are OSS & built with Solid.

OSS apps

• Solid Hacker News
• Solid Storefront - Open-source e-commerce storefront in Solid.js with TypeScript, GraphQL, URQL & Tailwind CSS.
• Chrome Extension Boilerplate with SolidJS + Vite + TypeScript

Notes

• To me the biggest difference between React and Solid is that things that can change are wrapped in signals in Solid, and in dependencies arrays in React.
• Components are rendered only once and are there pretty much to organize the code. The built-in components (Show, For) are awesome and should be used instead of following React-type patterns (multiple dynamic returns, map(), etc).

Links

• SolidJS New Docs (Code)
• solid-nanostores - Global state management in Solid using Nano Stores.
• Solid Lib Starter
• Solid Three, Custom Renderers, and SolidStart w/ Nikhil Saraf (2022)
• Solid App Router - Universal router for Solid inspired by Ember and React Router.
• Let's do an AMA (2022)
• Solid Command Palette - UI Library for Command Palette in SolidJS webapps.
• Solid Start - Solid's official starter.
• A Solid option for building UIs (2022)
• Solid Select - Select component for Solid.
• Solid Docs Code
• Solid Labels - Simple, reactive labels for SolidJS.
• Solid Headless - Headless UI for SolidJS.
• Streaming SolidJS: Fine-Grained Reactivity (2021)
• solid-firebase - Solid hooks for Firebase.
• Solid Primitives
• solid-ui - User Interface widgets and utilities for Solid.
• vite-plugin-solid - Simple integration to run solid-js with Vite.
• Solid MultiSelect - Multi-select implementation for Solid.
• Solid.js feels like what I always wanted React to be (HN)
• Solid Starter Kit
• Solid Styled - Reactive stylesheets for SolidJS.
• Solid Search for Community Solid Server - Adds full-text search to Community Solid Server. Powered by atomic-server.
• Blitz - Fast, simple and efficient state management for SolidJS apps.
• solid-boundaries - Utility to track the boundaries of html-elements in SolidJS.
• i18next for Solid
• Solid FLIP - Lightweight transition library for Solid.
• Solid Playground - Quickly discover what the solid compiler will generate from your JSX template. (Code)
• solid-utils - Ultimate companion of all your solid-js applications.
• Solid Slider - Carousel/slider implementation for SolidJS.
• SolidHack 2022 (Code)
• solid-spring - Port of react-spring, for SolidJS.
• Solid Ninja Keys - Add cmd+k interface to your solid site.
• SolidJS plugin for Preview.js
• Solid JSX - Use mdx or xdm with solid-js.
• Solid-Blocks - UI building blocks for SolidJS.
• Solid + Netlify Edge functions powered by Deno HN Demo (Tweet)
• Solid Aria - Library of high-quality primitives that help you build accessible user interfaces with SolidJS.
• Motion One for Solid - Combines Solid's amazing performance with declarative WAAPI animations, independent transforms, springs, stagger, and more. (Tweet)
• Solid Services - Solid.js library adding a services layer for global shared state.
• Solid Proxies - Solid.js library adding signaling to built-in non-primitives.
• Solid DND - Lightweight, performant, extensible drag and drop toolkit for Solid. (Web) (Web Code)
• Turbo Solid - Lightweight asynchronous data management for solid.
• Solid in 100 Seconds (2022)
• solid-primitives/fetch - Creates a primitive to support abortable HTTP requests. If any reactive request options changes, the request is aborted automatically.
• Praises of SolidJS (2022)
• Let's Learn SolidJS (2021)
• Hope UI - SolidJS component library you've hoped for. (Docs)
• Solid DSL Experiments
• Solid Meta - Asynchronous SSR-ready Document Head management for Solid based on React Head.
• Early return in Solid
• The Quest for ReactiveScript (2021)
• solid-auto-animate - SolidJS bindings for FormKit's AutoAnimate.
• Solid Dev Tools - Reactivity Debugger & Devtools Chrome Extension for SolidJS.
• solid-register - Solid.js execution environment for Node.js. Allows running and testing Solid.js browser code in Node.js.
• solid-marked - MDX/Markdown compiler for SolidJS.
• Solid Native - NativeScript bindings for Solid.JS.
• Solid Templates (using Vite)
• Solid Heroicons
• SolidJS - YouTube
• Carbon Components (SolidJS Port)
• SolidJS Effector
• Solid Native - Expands the Solid ecosystem to include development of native mobile applications.
• typesafe-i18n Solid
• Solid-Use - Collection of SolidJS utilities.
• rollup-preset-solid - Small opinionated preset for rollup to bundle your solid libraries with rollup.
• SolidJS: Past, Present, Future (2022)
• Solid JS and How its Different | Ryan Carniato (2022)
• Solid Virtual Scroll
• Solid Cached Resource - Cache Solidjs resources by key (derived from the resource source).
• SUID - Port of Material-UI (MUI) built with SolidJS.
• Solid Hotkeys - Hotkeys library for solid that adds only 2 event listeners.
• How to Deploy SolidJS (2022)
• Solid Service API - Code that powers Solid Service API on Cloudflare Workers.
• Opinionated Vite Starter Template
• Solid Custom Scrollbars
• SolidJS: Reactivity Unchained – Ryan Carniato (2022)
• JavaScript UI Compilers: Comparing Svelte and Solid (2019)
• Thinking Granular: How is SolidJS so Performant? (2021)
• Solid Valtio - State management in Solid with valtio.
• ReScript SolidJS
• Solid Cache - Resource caching in SolidJS.
• SolidJS Package Monorepo Starter
• Nested Routing, Parallelized Data Fetching, and SolidJS w/ Ryan Turnquist (2022)
• Solid Floating UI
• Solid Future Working Group
• Rigidity - SSR framework for SolidJS. (Tweet)
• Rallax - Parallax library for SolidJS.
• Solid-Dexie - Dexie integration for Solid.
• SolidJS bindings for atomic-router
• Introducing SolidStart w/ Nikhil Saraf (2022)
• Solid Toast - Customizable Toast Notifications for SolidJS.
• Solid-Query - Tanstack Query Adapter For Solid JS.
• Solid Jest - Jest preset for SolidJS.
• Solid Testing Library - Simple and complete Solid testing utilities that encourage good testing practices.
• Solid-Pebble - State management library for SolidJS.