Awesome Solid.js
A curated list of awesome things related to SolidJS
Resources
Official Resources
External Resources
- Coming Soon
Community
Conferences
- Coming Soon
🗣️ Podcasts
- The Deep Dive Episode 4: Reactive frontend frameworks
- React vs Svelte vs Solid & MicroFrontends | Ryan Carniato On the hard choices all companies are facing right now with their websites, especially with the performance
- Ryan Carniato on SolidJSDiscussion on some of the similarities and differences between different UI frameworks, and talk about what things SolidJS has taken from react The Runtime Podcast
- A Solid option for building UIs JS Party
📹 Videos/Screencasts/Twitch
- React to Solid - Stream With Ryan Carniato
- Solid.js - the NEXT React? In-depth Code Analysis
- REACTive Context in Solid.js
- Solid.js - A Fast, Declarative, Compiled Web UI Library - Better than React.js?
- Solid Javascript UI Framework (Youtube Playlist)
- Hottest React Competitor
- React vs SolidJS, Fight!
- Let's Learn SolidJS
Ryan Streams
Ryan's in-depth streams on all things Solid & reactivity
- Fine-Grained Reactivity
- First look at DOM Expressions
- Streaming SolidJS - Context, Async, & Suspense
- Streaming SolidJS - Server Rendering
- Streaming SolidJS: Routing
- Streaming SolidJS: Concurrent Rendering without a Virtual DOM
- Streaming HTML, Solid 1.3, and More
🏃 Examples and Starter Kits
Official Examples
Community Examples
Starter Kits
- Solid Templates(official)
- Vite + Solid + TailwindCSS Starter
- Solid + Supabase Starter Kit - Solid + Supabase Starter Kit is an opinionated boilerplate, with all the bells and whistles you want ready, up and running when starting a SolidJS project with Supabase
- Solid + Wundergraph - Build applications with SolidJs and WunderGraph
Tutorials
- Learn Solid(Official)
- Solid.js for X developer. A brief guide for Vue, Svelte and React developers to Solid.js.
Books
- Coming Soon_
✍️ Blog Posts
The Why's?
- Introducing the SolidJS UI Library
- SolidJS Official Release: The long road to 1.0
- SolidJS: The Tesla of JavaScript UI Frameworks?
- JavaScript Frameworks and Metagaming
- A Look at Compilation in JavaScript Frameworks
- JavaScript UI Compilers: Comparing Svelte and Solid
- A few reasons why I love Solid.js
- The Real Cost of UI Components Revisited
- Solid - The best JavaScript UI library?
- How we wrote the Fastest JavaScript UI Framework, Again!
- The Journey to Isomorphic Rendering Performance
- 5 Ways SolidJS Differs from Other JS Frameworks
- A Hands-on Introduction to Fine-Grained Reactivity
- Building a Reactive Library from Scratch
- Building JavaScript Frameworks to Conquer eCommerce
- SolidJS creator: JavaScript innovation isn’t slowing down
- JavaScript vs JavaScript. Fight!
- Solid.js feels like what I always wanted React to be
Powered by Solid
The Why not's?
Open Source
- Codeimage.dev - Create elegant screenshots of your source code. Built with SolidJS
- Bloki.app - Blocks-based collaborative editor more coming soon...
Apps/Websites
📦 Components & Libraries
UI Components
Table
Overlay
Icons
Carousel
Charts
Animation
- Solid Transition Group(official)
- Solid Particles - Particles, confetti, fireworks and more animations
- Solid Flip
- Solid Spring
- Solid MotionOne
Map
Markdown
- Solid Markdown - Render Markdown as Solid components
- Solid MDX
Drag and Drop
List
Scrollbar
Select
Slider
Misc
Form
- Felte
- FormGear
- Solar Forms
- Solid Forms - Making reusable form components easy and composable. Built upon solid-js/store.
- Solform - Very lightweight and simply managed forms.
Rich-Text Editor
Helpers
- Solid Form Action
- Solid Create Form
- Solid Immer
- Solid Proxies - Solid.js library adding signaling to built-in non-primitives
Routing
- Solid App Router(official)
- Solid Typefu Router5
- Solid Tiny Router - Tiny routing library for SolidJS
SEO
- Solid Meta(official)
Translation
State Management
Frameworks & Component Libraries
- Solid Blocks
- Lume
- Solid Headless
- Solid Bootstrap - The most popular front-end framework, re-built for SolidJS
- Hope UI - The hoped component library for your SolidJS applications
- Zag JS - UI components powered by Finite State Machines
- Suid - A port of Material-UI (MUI) built with Solid.js
- Solid RevKit - RevKit UI for SolidJS
- Solid ARIA - A library of high-quality primitives that help you build accessible user interfaces with SolidJS
- Solid CodeMirror - CodeMirror 6 component for SolidJS
- Solid Knobs - Primitives for building user-friendly controls with SolidJS
Re-usable behavioral code (like React hooks, or Vue composables for SolidJS)
Querying/GraphQL
Testing
- Solid Jest(official)
- Solid Testing Library(official)
- solid-register
i18n
- Solid i18n - Tiny internationalization library for SolidJS
DX
- Solid Refresh (HMR)(official) - HMR for Solid for various bundlers
- ESLint for Solid - Solid-specific linting rules for ESLint
- Roll-up preset for Solid Libraries - Preset for rollup to bundle your solid libraries with rollup
- ESBuild Solid Plugin(NPM) - Plugin to compile solid-js jsx components with ESbuild.
- Babel Solid Plugin - Labels - Simple, reactive labels for SolidJS
- Babel Solid Plugin - Understrcuture - Destructure component props without losing reactivity
- Solid SFC(Experimental) - Experimental SFC compiler for SolidJS
- vite-plugin-inline-css-modules - Zero runtime plugin to write CSS modules inside of component files
- LocatorJS - Click on any component to go to it's code. (it's also built with SolidJS)
Styling
- Solid Styled - Reactive stylesheets for SolidJS
- Discrete Typography - Experimental tool inspired by Capsize, implemented in Solid JS. Generates x-height and cap-height CSS
Storage
- Solid Cache - Resource caching in SolidJS
- Solid Dexie - Dexie(wrapper around IndexedDB) integration for Solid
SSR
- Solid Start - Official meta framework for SolidJS
- Rigidity - An SSR framework for SolidJS
- Solidus JS - Plug-and-Play SSR for SolidJS (In Development)
Works with Solid
Misc.
- Solid Giphy
- Solid Emoji Picker - Unstyled emoji picker for SolidJS
- Solid Firebase
- Solid Command Palette - UI Library for Command Palette in SolidJS webapps
- React2Solid
- Solid Keep-Alive - Keep you components alive even after parent's unmounts, saving signals and DOM elements in cache to reuse them.
more coming soon...