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/solid (SolidJS: Past, Present, Future is insightful, especially part about future focus).

Solid Start or better Create JD App is great starter template. Trying to make Solid Start work/deploy on Deno easily.

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.

Solid Dev Tools are useful.

Use Solid URQL as GraphQL client.

Solid Native is exciting. Modular Forms is great for forms.

Nano Store Solid is nice for state. Solid Lib Starter is great starter code.

I'm also exploring Voby as alternative to Solid.

OSS apps ​

• CodeImage
• 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
• Create JD App - SolidStart & tRPC Full-Stack TypeScript application template.
• SolidStart SSR with @tanstack/query v5 preview using tRPC
• SolidStart Notes
• Yal - Launcher app similar to Alfred, Raycast, ScriptKit, Spotlight, and many others. (Plugins)

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).
• createResource makes a signal out of a promise
• Solid has builtin state management system with stores and context, so you don't need to install a third party state manager. Context is fine grained reactive on SolidJS, in React all the components are re-rendered on a provider update.
• Solid will never "re-render" your component/function. With Solid you will never ever think about optimizing "re-renders" It will out of the box be fully optimized.
• On a high level, in case it's useful, in Solid: 1. Signal tells it's parent computations to re-execute. 2. Only things like effects a memos can be re-executed. 3. In Show the condition is calculated in a memo, to account for signals changing but the result staying the same. 4. The condition memo is read inside another memo that does the branching between children and fallback props. 5. The resulting branch is resolved inside the Show, as in Solid children much be called inside their parents, in React it's kinda the other way around. As a summary basically most of Solid is just a signal that keeps track of the computations it's read in, computations (functions) that can be re-executed, calling things in the right order, and "tricks" to cache things.

Links ​

• SolidJS New Docs (Code)
• Nano Store Solid - Tiny state manager with many atomic tree-shakable 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.
• Streaming SolidJS - First look at Astro (2022)
• Solid-React - Hooks for a SolidJS-like React.
• FAQ: When do I use a Solid Signal versus a Store? (2022)
• Solid Test Recorder - Automated Chrome extension to generate unit/integration tests for SolidJS. (Demo)
• solid-optimizer - Compile-time optimizer for SolidJS.
• Voby: Simplifications Over Solid - No Babel, No Compiler (2022)
• SolidJS - World beyond components (2022)
• Solid-Form-Handler - Lightweight library for building form components and validating forms with them.
• Solid-Router-Stack - Solid router use stack like native application.
• Solid-Error-Overlay - Unstyled, dev error overlays for SolidJS.
• Capacitor Templates for SolidJS (and Vite)
• Solid Windowed - Given a list of items, only render what's visible on the screen while allowing scrolling the whole list.
• Solid Styled Components - 1kb Styled Components library for Solid.
• SolidStart, Server Functions, and the future of Islands (2022)
• Building SolidJS v1.6 (2022)
• Workaround for the '100vh' issue in mobile browsers in Solid
• Reactivity with SolidJS course
• Reatom-Solid - Solid bindings package for Reatom store.
• SolidJS tRPC - tRPC Adapter For SolidJS Using Tanstack Solid Query.
• Solid Future Architecture: Hybrid Routing + Minimal Hydration
• Client-side Routing without the JavaScript (2022)
• Solid-Stripe
• Solid URQL
• Finally, the start of something solid? (2022)
• Made in Solid - What have people built with it?
• Solid Start Auth - Extensible library to support different authentication methods.
• First look at Solid Start
• Simplifying reactivity with solidJS - Dan Jutan (2022)
• Kobalte - UI toolkit for building accessible web apps and design systems with SolidJS.
• Modular Forms - Modular form library for SolidJS.
• Babel Plugin Solid Undestructure - Babel plugin allows you to destructure your props in your Solid components without losing reactivity.
• Solid Icons - Modern solution for use icons on SolidJS.
• Storeon Solid
• Solid-Popper
• Solid-Simple-Table - Blazing fast reactive table component that gives you freedom.
• Solid-Markdown - Render Markdown as Solid components.
• Doom Reactive State - Super simple reactive state management with fine-grained reactive DOM elements.
• Jundao Design - Enterprise-class fast and modern SolidJS UI library.
• Sofine UI Solid design library
• Solid-NanoStores
• Solid Jotai - Primitive and flexible state management for Solid based on Jotai.
• Solid Mapbox
• SolidJS Uppy
• Solid i18n
• Solid Plyr - Simple HTML5, YouTube, and Vimeo player (Plyr) for SolidJS.
• Solid Supabase - Simple wrapper around Supabase.js to enable usage within Solid.
• Storybook Solid
• SolidStart implementation of NextAuth
• Fine-grained reactivity - Deep dive into SolidJS
• create-t3-app gone solid: tRPC, zod, prisma, tailwindcss, unocss; based on SolidStart (2022)
• Solid Auth - Authentication for Solid & SolidStart.
• decorock - Styled component library for solid.
• Solid tiptap
• A React Developer's First Take on Solid (2022)
• Converting a React Component to SolidJS (2022)
• Testing a SolidJS Component Using Vitest (2022)
• Taking SolidJS Dev-Tools for a Spin (2022)
• Using SolidJS Dev-Tools Locator Feature (2022)
• Convert Your SolidJS Component To TypeScript (2022)
• SolidJS Crash Course - Building a REST API Client (2023)
• Solid Query Dev Tools
• statesolid - State management library built on the top of SolidJS reactivity.
• Solid Wrap Balancer - Simple Solid Component That Makes Titles More Readable.
• Preset for building your SolidJS package with tsup
• Solid Navigation - Native navigation for SolidJS mobile apps built with NativeScript.
• Solid Rewind - Redux-style time-travel debugger and component-tree visualizer for apps made with SolidJS.
• A Comprehensive Guide to SolidJS Stores
• SolidJS in React? Reconciling Disparate Worlds (2023)
• Esbuild Solid Plugin - Plugin to compile solid-js jsx components with esbuild.
• Demystifying SolidJS' JSX (2023)
• Learn SolidJS Basics in 4 minutes (2023)
• Solid Material - High quality components built with Tailwind and Kobalte following Material You guidelines.
• Lexical Solid - Solid port for Lexical text editing component.
• Solid Mason - Masonry layout for SolidJS.
• Solid Refresh - HMR for Solid for various bundlers.
• Using Solid Start with GitHub pages (2023)
• HTML To SolidJSX (Code)
• Vite Plugin Solid SVG - Vite plugin to Import SVG files as Solid.js Components.
• Data Fetching in SolidJS: How to Use createResource (2023)
• pRPC - Write simple and interactive SolidStart code that will run on the server but will easily be used on the client. (Tweet)
• Solid Rollup AWS Lambda
• Solid Liveblocks - Solid hooks and providers to use Liveblocks declaratively.
• Solid Flow - Component for building interactive flow-based diagrams and graphs.
• 3 Patterns to Write Declarative, More Readable SolidJS Components (2023)
• SolidJS - The Hard Parts w/ Dan Jutan (2023)
• Signals in TypeScript: The Road to Solid v1.7 (2023)
• Strict Mode in SolidJS?! (2023)
• Solid-Presence-Signal - Animate the presence of an element. (Reddit)
• Solid Transition Group - SolidJS components for applying animations when children elements enter or leave the DOM.
• Solid Next Docs
• SolidStart Adapter For AuthJS
• Pigment - Open source design system for building SolidJS application.
• Solid Shadcn UI
• Collaboration between Vike and Solid
• Vike Solid - Demo showcasing a SolidJS framework built using vite-plugin-ssr.
• Debugging solid-table performance (2023)
• Solid Reactivity Overview
• Solid-Use - Collection of SolidJS utilities inspired completely by VueUse.
• Препарируем SolidJS и находим родовые травмы (2023)
• SolidStart Beta 2