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.
https://github.com/one-aalam/awesome-solid-js

Last synced: 2 days ago
JSON representation

📦 Components & Libraries
- Authentication & Authorization
  - msal-community-solid - community-solid)) - Authentication library for SolidJS SPAs based on the Microsoft Identity Platform
- DX
  - Solid Refresh (HMR) - 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 - plugin-solid)) - 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)
  - Roll-up preset for Solid Libraries - Preset for rollup to bundle your solid libraries with rollup
  - ESLint for Solid - Solid-specific linting rules for ESLint
  - Babel Solid Plugin - Labels - Simple, reactive labels for SolidJS
- 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
  - Lexical Solid
  - Solid Quill - quill))
  - TipTap Solid
  - Slate Solid
  - FormGear
- Frameworks & Component Libraries
  - 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
  - Flowbite SolidJS - Open-source UI components based on Flowbite and Tailwind CSS
  - 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.
  - 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
  - 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
  - Solid Material
  - Mystic UI - Cool and beautiful animated components, crafted with Tailwind / PandaCSS and Motion One. Unofficial port of Magic UI for Solid.
  - Solid Headless - Headless UI for SolidJS
  - Kobalte - An _unstyled_ UI toolkit for building accessible web apps and design systems
  - Solid Blocks - UI building blocks for SolidJS.
  - Solid Blocks - UI building blocks for SolidJS.
  - Kobalte - An _unstyled_ UI toolkit for building accessible web apps and design systems
- Helpers
  - 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.
  - Solid Primitives
- Internationalisation
  - Solid Primitives — i18n - Library of internationalisation primitives.
  - Typesafe i18n - SolidJS adapter for [typesafe-i18n](https://github.com/ivanhofer/typesafe-i18n)
  - i18n-pro/solid - Lightweight, simple, flexible, automatic translation internationalization tool for Solid
- Misc.
  - Solid Keep-Alive - Keep you components alive even after parent's unmounts, saving signals and DOM elements in cache to reuse them.
  - 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 Firebase
- Querying/GraphQL
  - TanStack Solid Query - query))
  - Solid URQL
  - Solid URQL
- Routing
  - Solid Typefu Router5
  - Solid Tiny Router - Tiny routing library for SolidJS
  - Solid App Router
- SEO
  - Solid Meta
- 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)
  - Solidus JS - Plug-and-Play SSR for SolidJS (In Development)
- State Management
- Storage
  - Fireproof - Pure JS, zero dependency, CRDT database for SolidJS - runs in the browser and connects to any cloud or backend
  - Solid Cache - Resource caching in SolidJS
  - Solid Dexie - Dexie(wrapper around IndexedDB) integration for Solid
- 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
- Testing
- UI Components
  - Phosphor Solid
  - AutoAnimate
  - Solid DnD
  - TanStack Virtual - virtual))
  - Solid Toast - toast))
  - Solid Sonner - sonner))
  - TanStack Solid Table - table))
  - Solid Simple Table - simple-table))
  - Solid Table - table))
  - Solid Popper
  - Solid Dismiss
  - Solid Ninja Keys
  - Solid Tippy - tippy))
  - Solid Floating UI
  - Solid Split Pane
  - Solid Icons - icons))
  - Solid HeroIcons - heroicons))
  - Solid SVG - plugin-solid-svg))
  - Solid Slider - slider))
  - Solid ApexCharts
  - Solid Transition Group
  - Solid Flip
  - Solid Spring
  - Solid MapGL
  - Solid Markdown - Render Markdown as Solid components
  - Solid MDX
  - Solid DND Directive
  - Neodrag
  - Solid Virtual Container - virtual-container))
  - Virtua
  - Perfectly Scrollable - scrollable))
  - Solid Select
  - Solid Multi-select
  - Zoom Image Library - A little yet powerful framework agnostic headless-library to zoom image on the web
  - Solid Readotron - readotron))
  - Solid Chart.js - chartjs))
  - Solid Particles - Particles, confetti, fireworks and more animations
  - Solid Multi-select
  - TanStack Solid Table - table))
  - Unplugin Icons - icons))
  - Solid Transition Group
  - Solid Spring
  - Solid MotionOne
  - Solid Sonner - sonner))
  - Zoom Image Library - A little yet powerful framework agnostic headless-library to zoom image on the web
  - Solid MotionOne
  - Solid Sonner - sonner))
  - Zoom Image Library - A little yet powerful framework agnostic headless-library to zoom image on the web
- Web Components
  - Solid Element - Library for authoring web components with SolidJS.
  - Lume Element - Fast and simple custom elements
- Works with Solid
  - Astro
  - Vite Plugin - SSR - plugin-ssr/tree/master/examples/solid))
  - Mitosis
Resources
- Apps/Websites
  - ambient-rvx.web.app
  - artbyqreature.com
  - Made in Solid - SolidJS Portfolio — What have people built with it?
  - artbyqreature.com
- ✍️ Blog Posts

Programming Languages

TypeScript 104 JavaScript 7

Categories

Resources 192 📦 Components & Libraries 142 🛠️ Tooling 1

Sub Categories

✍️ Blog Posts 135 UI Components 48 Frameworks & Component Libraries 22 📹 Videos/Screencasts/Twitch 17 🏃 Examples and Starter Kits 14 DX 12 Form 11 Helpers 7 State Management 7 Misc. 7 Official Resources 6 Apps/Websites 5 🗣️ Podcasts 4 SSR 4 Community 4 Internationalisation 3 Testing 3 Works with Solid 3 Querying/GraphQL 3 Routing 3 Books 3 Storage 3 Web Components 2 Tutorials 2 Styling 2 Open Source 2 Online Courses 1 Authentication & Authorization 1 SEO 1

Keywords

solidjs 34 solid 22 solid-js 22 typescript 9 javascript 8 react 7 svelte 7 vue 5 css 3 reactive 3 ui 3 tailwindcss 3 editor 3 components 3 jsx 3 state-management 3 solid-codemirror 2 form 2 primitives 2 reactivity 2 codemirror 2 forms 2 component 2 vite 2 solidstart 2 babel 2 babel-plugin 2 innovation-labx 2 preset 2 webgl 2 rollup 2 animation 2 declarative 2 compiler 2 performance 2 react-table 1 mapbox-gl 1 bun 1 javascript-framework 1 mapbox-gl-js 1 template 1 solidjs-boilerplate 1 electron 1 supabase-storage 1 maplibre 1 supabase-js 1 supabase-db 1 maps 1 supabase-auth 1 supabase 1