awesome-remix

A curated list of awesome Remix 💿 packages and resources.

Contents

• Packages
• Stacks
• Templates
• Example Apps
• Snippets
• Videos
• Blog Posts

Packages

• remix-auth - Simple Authentication for Remix
• remix-utils - A set of utility functions and types to use with Remix.run
• remix-i18next - The easiest way to translate your Remix apps
• remix-seo - A package for easily managing SEO meta and link tags in Remix.
• remix-params-helper - Helpers that make it simple to use Zod with URLSearchParams, FormData, and Remix params object
• remix-tailwind - Use TailwindCSS with Remix without an extra build step
• remix-validated-form - A ValidatedForm component and helpers for easy client and server side form validation.
• remix-themes - An abstraction for themes in your Remix app.
• remix-routes - Typesafe routing for your Remix apps.
• remix-middleware - An express-like middleware system for remix loaders and actions
• remix-crash - Get better insight on why your Remix app crashed during development 💥
• remix-pwa - A package to integrate PWA features into Remix
• superjson-remix - A solution for Remix that allows you to send binary data from your loader to your React client app
• remix-etag - Makes adding an ETag header to a response easy
• domain-functions - Decouple your business logic from your Remix actions and loaders. With first-class type inference from end to end.
• remix-image - A React component for responsive images in Remix.
• remix-forms - Magically create forms + actions in Remix
• @sentry/remix - Error and performance monitoring of your Remix apps with Sentry
• remix-sitemap - Sitemap generator for Remix applications
• remix-auth-webauthn - A Remix Auth strategy for signing in with Web Authentication passkeys.
• remix-strong-routes - Strongly typed route exports.
• remix-progressbar - Progress Bar for Remix Applications.
• remix-paraglidejs - Simple, Tiny, Typesafe i18n for Remix Apps

Stacks

• blues-stack - The Blues Stack: Deployed to the edge (distributed) with a long-running Node.js server and PostgreSQL database. Intended for large and fast production-grade applications serving millions of users.
• indie-stack - The Indie Stack: Deployed to a long-running Node.js server with a persistent SQLite database. This stack is great for websites with dynamic data that you control (blogs, marketing, content sites). It's also a perfect, low-complexity bootstrap for MVPs, prototypes, and proof-of-concepts that can later be updated to the Blues stack easily.
• grunge-stack - The Grunge Stack: Deployed to a serverless function running Node.js with DynamoDB for persistence. Intended for folks who want to deploy a production-grade application on AWS infrastructure serving millions of users.
• speed-metal-stack - The Remix Blog Stack for deploying to Fly with MDX, SQLite, testing, linting, formatting, etc.
• remix-worker-template - All-in-one Remix Cloudflare worker template with tailwindcss, cypress, eslint and prettier
• remix-edgedb - Remix ft. EdgeDB, Tailwind, Fly, and cookie-based authorization
• kpop-stack - Create a Remix app with Netlify, Tailwind, TypeScript and more!
• supa-fly-stack - The Remix Stack for deploying to Fly with Supabase, authentication, testing, linting, formatting, etc.
• rockspec-stack - A fully configurable & customizable Remix PWA stack.
• dnb-stack - The Remix Stack for deploying to Vercel with testing, linting, formatting, structure and mock for 3rd party API integration.
• azure-remix-stack - A remix stack template for running a remix app on Azure
• remix-chop-suey-stack - Remix+EdgeDB+Tailwind+Fly.io=🖤
• Stripe Stack - A Stripe focused Remix Stack that integrates User Subscriptions, Authentication and Testing. Driven by Prisma ORM. Deploys to Fly.io
• cool-stack - Template repository integrating Remix & Directus into a full-stack monorepo.

Templates

• remix-azure-template - Remix app deployed to Azure Functions
• remix-nested-layouts
• remix-tailwind-starter
• remix-on-netlify
• remix-css-modules
• remix-auth-layouts-example
• remix-starter-kit - Remix ft. Supabase(Auth, CRUD, Storage) with other essentials - TailwindCSS, DaisyUI, ESLint, etc.
• remix-edge-kit - Remix ft. Prisma(Railway.app/Planetscale)/FaunaDB/Supabase and other essentials but designed for Cloudflare workers

Example Apps

• kentcdodds.com
• hova-labs-remix
• snkrs
• realworld-remix.run
• camchenry-remix
• sergiodxa/personal-site
• metronome.sh
• sergiodxa/collected-remix
• Interactive Remix Routing
• Remix Ink
• jotyy/remix-portfolio
• Runnable - Low-code admin workflows, built on Remix
• Utiliti - A collection of web-based, open-source utilities built on Remix.

Snippets

• HOWTO: Debug your server-side Remix code using VSCode
• sitemap.xml generator

Videos

• Introducing Remix v1 💿
• CDN Caching, Static Site Generation, and Server Side Rendering
• Document Titles in Remix
• Live with Kent: Building Authentication with Postgres, Prisma, and Remix
• Progressive Enhancement with Remix
• How to Add Nested/Persistent Layouts in Remix
• Introduction to HTTP Caching
• Deploy Remix to Netlify Serverless Functions in less than 3 minutes
• Remix Utah Meetup 2021-12-02
• Remix Tutorial with Kent
• Interview to Michael Jackson at devtools-fm
• Remix Tutorial | Trying out the newest React Framework!
• Remix Run Speedrun - Pokemon
• Remix is a NEW JavaScript framework you MUST try
• Playlist: Build A Fullstack App with Remix, Prisma & MongoDB
• Playlist: Build A Pet Management System With Remix, Prisma, and Postgres

Blog Posts

• React Server Components and Remix
• On Rails
• First impressions with Remix
• Loader vs Route Cache Headers in Remix
• The useMatches hook in Remix
• Validating Remix forms with Constraints API
• Test Remix loaders and actions
• Use Fathom with Remix
• Use NProgress in a Remix app
• How Remix makes CSS clashes predictable
• Super Simple Start to Remix
• Use ETags in Remix
• Stable Forms in Remix
• Generating Social Images with Remix
• Building a Simple Search UI with Remix
• Sending data from layout to leaf routes in Remix
• Using Service Workers with Remix
• Localizing Remix apps with i18next
• Adding CSRF protection to Remix
• Load only the data you need in Remix
• Server-Side authentication with Auth0 in Remix
• Using TailwindCSS with Remix
• Jest Matchers for Remix responses
• Using Form Objects inside Remix actions
• Route protection in Remix with Policies
• Redirect to the original URL inside a Remix action
• Why Remix is worth your attention
• Remix for Next.js Developers
• Series: Build A Fullstack App with Remix, Prisma & MongoDB
• Learn how to install Remix with Flowbite and Tailwind CSS
• Integrate Remix application with Tailwind Elements