kcirtaptrick/awesome-solid-js

Curated resources on building sites with SolidJS, a brand new way(now 1.0) to build Javascript based interactive web applications. A very close looking cousin to React/JSX by syntax, and to Svelte by few important principles(compiler and fine-grained reactivity), it's a highly optimised way to deliver web applications with best-in-class performance.

Awesome Solid.js

A curated list of awesome things related to SolidJS

• Resources
  • Official Resources
  • External Resources
  • Community
  • Conferences
  • Podcasts
  • Videos/Screencasts/Twitch
  • Examples, Starter Kits, Explorations and Integrations
  • Tutorials
  • Blog Posts
• Components & Libraries
  • UI Components
  • Forms
  • Routing
  • SEO
  • Translation
  • State Management
  • Frameworks & Component Libraries
  • Re-usable behavioral code (like React hooks, or Vue composables for SolidJS)
  • Testing
  • DX
  • Works with Solid

Resources

Official Resources

• Official Guide
• Official Tutorial
• API Reference
• GitHub Repo
• Release Notes
• Resource Index
• Playground

External Resources

• Coming Soon

Community

• Twitter
• Reddit
• Discord

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

• Official Examples
• Todo MVC
• Hacker News
• Realworld

Community Examples

• Whiteboard
• Kauchicups
• TailwindCSS Layouts

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
• create-solid-library - Create a new Solid component library in seconds!

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

• 5 Reasons why we chose to transpile to SolidJS instead of React
• Front-end Studio powered by SolidJS

The Why not's?

• 5 Places SolidJS is not the Best

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

• ambient-rvx.web.app
• artbyqreature.com
• Hypetrigger

📦 Components & Libraries

UI Components

Table

• Solid Simple Table(NPM)
• Solid Table(NPM)

Overlay

• Solid Popper
• Solid Dismiss
• Solid Ninja Keys

Layout

• Solid Split Pane

Icons

• Unplugin Icons(NPM)
• Solid Icons(NPM)
• Solid HeroIcons(NPM)
• Solid SVG(NPM)
• Phosphor Solid

Carousel

• Solid Slider

Charts

• Solid Chart.js(NPM)
• Solid ApexCharts

Animation

• Solid Transition Group(official)
• Solid Particles - Particles, confetti, fireworks and more animations
• Solid Flip
• Solid Spring
• Solid MotionOne

Map

• Solid MapGL

Markdown

• Solid Markdown - Render Markdown as Solid components
• Solid MDX

Drag and Drop

• Solid DnD
• Solid DND Directive

List

• Solid Virtual Container(NPM)

Scrollbar

• Perfectly Scrollable(NPM)

Select

• Solid Select
• Solid Multi-select

Slider

• Solid Slider(NPM)

Misc

• Solid Readotron(NPM)

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

• Solid Quill(NPM)
• TipTap Solid
• Slate Solid

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

• Solid i18n(NPM)

State Management

• Solid Zustand
• Solid Nanostores
• Gstatem
• Solid Services
• Effector

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)

• Solid Primitives
• Solid Signals

Querying/GraphQL

• Solid URQL

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

• Astro
• Mitosis(playground)
• Vite Plugin - SSR(Solid Example)

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