solid.md

title	SolidJS

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.

Solid Dev Tools are useful.

Use Solid URQL as GraphQL client.

Solid Native is exciting.

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.

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.

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.
• 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