Awesome Solid Js

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
  • Internationalisation
  • State Management
  • Web Components
  • Frameworks & Component Libraries
  • Authentication & Authorization
  • Helpers(like React hooks, or Vue composables for SolidJS)
  • Testing
  • DX
  • SSR
  • 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

Online Courses

• Solid JS & Firebase - The Complete Guide (Twitter Clone App) - (Udemy Course Paid)

🗣️ 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!
• Solid + Vite + Electron Starter - Build an Electron app with SolidJS
• DBEST Stack - DrizzleORM, Bun, ElysiaJS, SolidStart, Tailwind CSS stack.

Tutorials

• Learn Solid(Official)
• Solid.js for X developer. A brief guide for Vue, Svelte and React developers to Solid.js.

Books

• SolidJS: The Complete Guide by Sinan Polat A comprehensive guide to reactive web development with SolidJS and TypeScript.

✍️ 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

• Made in Solid - SolidJS Portfolio — What have people built with it?
• ambient-rvx.web.app
• artbyqreature.com

🛠️ Tooling

• bun-plugin-solid - A plugin to compile Solid.js with Bun.

📦 Components & Libraries

UI Components

Table

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

Overlay

• Solid Popper
• Solid Dismiss
• Solid Ninja Keys
• Solid Tippy (NPM)
• Solid Floating UI

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

Map

• Solid MapGL

  Markdown

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

Drag and Drop

• Solid DnD
• Solid DND Directive
• Neodrag (NPM)

  List

• Solid Virtual Container (NPM)
• TanStack Virtual (NPM)
• Virtua (NPM)

Scrollbar

• Perfectly Scrollable (NPM)

Select

• Solid Select
• Solid Multi-select

Slider

• Solid Slider (NPM)

Toast / Snackbar

• Solid Toast (NPM)
• Solid Sonner (NPM)

Image

• Zoom Image Library - A little yet powerful framework agnostic headless-library to zoom image on the web

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.
• Solid-quiz - Simple quiz component

Rich-Text Editor

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

Routing

• Solid App Router(official)
• Solid Typefu Router5
• Solid Tiny Router - Tiny routing library for SolidJS

SEO

• Solid Meta(official)

Internationalisation

• Solid Primitives — i18n - Library of internationalisation primitives.
• Typesafe i18n - SolidJS adapter for typesafe-i18n
• i18n-pro/solid - Lightweight, simple, flexible, automatic translation internationalization tool for Solid

State Management

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

Web Components

• Solid Element - Library for authoring web components with SolidJS.
• Lume Element - Fast and simple custom elements

Frameworks & Component Libraries

• Solid Blocks - UI building blocks for SolidJS.
• Solid Headless - Headless UI for SolidJS
• Solid Bootstrap - The most popular front-end framework, re-built for SolidJS
• Pigment - A design system built with Kobalte and Tailwind CSS
• Kobalte - An unstyled UI toolkit for building accessible web apps and design systems
• 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 CodeMirror - CodeMirror 6 component for SolidJS (yes, there are two)
• Solid Knobs - Primitives for building user-friendly controls with SolidJS
• Flowbite SolidJS - Open-source UI components based on Flowbite and Tailwind CSS
• Solid Material
• TW Elements SolidJS - Integrate Solid application with Open Source TW Elements - A free collection of UI components, templates, sections & plugins for Tailwind CSS.
• Ark UI - Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks.

Authentication & Authorization

• msal-community-solid (NPM) - Authentication library for SolidJS SPAs based on the Microsoft Identity Platform

Helpers

Re-usable behavioral code (like React hooks, or Vue composables for SolidJS)

• Solid Primitives
• Solid Signals
• Solid Request
• Solid Use - A collection of SolidJS utilities
• Solid Immer
• Solid Proxies - Solid.js library adding signaling to built-in non-primitives
• Solid Hooks - A high-quality & reliable Solid Hooks library.

Querying/GraphQL

• Solid URQL
• TanStack Solid Query (NPM)

Testing

• Solid Jest(official)
• Solid Testing Library(official)
• solid-register

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 - Undestructure - 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
• Fireproof - Pure JS, zero dependency, CRDT database for SolidJS - runs in the browser and connects to any cloud or backend

SSR

• Solid Start - Official meta framework for SolidJS
• create-jd-app - The quickest and most efficient way to start new full stack, type safed Solid web app
• 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...