use-theme-editor

Version:

Zero configuration CSS variables based theme editor

45 lines • 189 kB

HTML

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="theme-color" content="#121212"><meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover"><link rel="icon" href="https://remix.run/favicon-light.1.png" type="image/png" media="(prefers-color-scheme: light)"><link rel="icon" href="https://remix.run/favicon-dark.1.png" type="image/png" media="(prefers-color-scheme: dark)"><link rel="preconnect" href="https://fonts.googleapis.com/"><link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin="anonymous"><link href="./Remix _ Blog Tutorial (short)_files/css2" rel="stylesheet"><link rel="preload" as="font" href="https://remix.run/font/founders-grotesk-bold.woff2" crossorigin="anonymous"><link rel="preload" as="font" href="https://fonts.gstatic.com/s/inter/v8/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2" crossorigin="anonymous"><link rel="preload" as="font" href="https://fonts.gstatic.com/s/sourcecodepro/v20/HI_SiYsKILxRpg3hIP6sJ7fM7PqlPevWnsUnxg.woff2" crossorigin="anonymous"><link rel="stylesheet" href="./Remix _ Blog Tutorial (short)_files/tailwind-K775WQNR.css"><link rel="stylesheet" href="./Remix _ Blog Tutorial (short)_files/bailwind-QVE66GOL.css"><link rel="stylesheet" href="./Remix _ Blog Tutorial (short)_files/docs-DYGEVPUH.css"><link rel="stylesheet" href="./Remix _ Blog Tutorial (short)_files/style-7EPHLDZJ.css"><link rel="stylesheet" href="./Remix _ Blog Tutorial (short)_files/docsearch-LMN4YJJS.css"><meta content="en" name="docsearch:language"><meta content="v1" name="docsearch:version"><title>Remix | Blog Tutorial (short)</title><meta id="ConnectiveDocSignExtentionInstalled" name="ConnectiveDocSignExtentionInstalled" data-extension-version="1.0.6"></head><body x-comp="Body" class="min-h-screen flex flex-col w-full overflow-x-hidden bg-white text-gray-900 dark:bg-gray-900 dark:text-gray-200 undefined"><div class="lg:flex lg:h-full px-6"><div class="lg:hidden"><div class="absolute top-6 right-6 flex gap-2 items-center"><div class="mr-2"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"><svg width="15" height="15" class="DocSearch-Control-Key-Icon"><path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path></svg></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><a href="https://remix.run/docs/en/v1"><svg x-comp="Wordmark" height="24" viewBox="0 0 659 165" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Remix Logo</title><path fill-rule="evenodd" clip-rule="evenodd" d="M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" fill="currentColor"></path><path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z" fill="currentColor"></path><path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" fill="url(#paint0_linear)"></path><path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" fill="currentColor"></path><path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" fill="url(#paint1_linear)"></path><path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" fill="currentColor"></path><path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" fill="url(#paint2_linear)"></path><path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" fill="currentColor"></path><path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" fill="url(#paint3_linear)"></path><path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" fill="currentColor"></path><defs><lineargradient id="paint0_linear" x1="591.052" y1="47.1035" x2="591.052" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></lineargradient><lineargradient id="paint1_linear" x1="203.19" y1="44.0317" x2="203.19" y2="164.352" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></lineargradient><lineargradient id="paint2_linear" x1="368.744" y1="44.0317" x2="368.744" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></lineargradient><lineargradient id="paint3_linear" x1="499.172" y1="0" x2="499.172" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></lineargradient></defs></svg></a></div><details><summary class="pb-4 pt-6 cursor-pointer">Docs Navigation</summary><div><nav class="md-nav py-6 text-d-p-sm font-medium"><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="1"><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading pt-0">Tutorials</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2 md-nav-item--active" href="https://remix.run/docs/en/v1/tutorials/blog" aria-current="page">Blog Tutorial (short)</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/tutorials/jokes">App Tutorial (long)</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Pages</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/philosophy">Philosophy</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/technical-explanation">Technical Explanation</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/stacks">Remix Stacks</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/contributing">Contributing</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/community">Community</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/faq">FAQs</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/gotchas">Gotchas</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">File Conventions</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/entry.client">entry.client</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/entry.server">entry.server</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/remix-config">remix.config.js</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/root">root</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/routes-files">Route File Naming</a></li></ul></li><li data-dir="" data-level="1"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading" href="https://remix.run/docs/en/v1/route">Route Module API</a><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/action">action</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/catch-boundary">CatchBoundary</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/component">Component</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/error-boundary">ErrorBoundary</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/handle">handle</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/headers">headers</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/links">links</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/loader">loader</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/meta">meta</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/should-reload">unstable_shouldReload</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Components</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/form">Form</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/link">Link</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/links">Links</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/live-reload">LiveReload</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/meta">Meta</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/nav-link">NavLink</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/outlet">Outlet</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/prefetch-page-links">PrefetchPageLinks</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/scripts">Scripts</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/scroll-restoration">ScrollRestoration</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Hooks</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-action-data">useActionData</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-before-unload">useBeforeUnload</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-fetcher">useFetcher</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-fetchers">useFetchers</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-form-action">useFormAction</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-loader-data">useLoaderData</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-matches">useMatches</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-submit">useSubmit</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-transition">useTransition</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Utilities</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/cookies">Cookies</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/json">json</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/redirect">redirect</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/sessions">Sessions</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/unstable-create-file-upload-handler">unstable_createFileUploadHandler</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/unstable-create-memory-upload-handler">unstable_createMemoryUploadHandler</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/parse-multipart-form-data">unstable_parseMultipartFormData</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Other API</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/dev">@remix-run/dev (CLI)</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/adapter">@remix-run/{adapter}</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/serve">@remix-run/serve</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/node">@remix-run/node</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/asset-imports">Asset Imports</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/react-router">React Router v6</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/fetch">Web Fetch API</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Guides</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/accessibility">Accessibility</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/api-routes">API Routes</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/bff">Backend For Frontend</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/browser-support">Browser Support</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/data-loading">Data Loading</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/data-writes">Data Writes</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/deployment">Deployment</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/disabling-javascript">Disabling JavaScript</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/envvars">Environment Variables</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/errors">Error Handling</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/file-uploads">File Uploads</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/mdx">MDX</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/migrating-react-router-app">Migrating from React Router</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/constraints">Module Constraints</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/not-found">Not Found Handling</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/optimistic-ui">Optimistic UI</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/performance">Performance</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/resource-routes">Resource Routes</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/routing">Routing</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/styling">Styling</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/typescript">TypeScript</a></li></ul></li></ul></nav></div></details><hr class="mb-4"></div><div class="shrink-0 hidden lg:block"><div class="h-full max-h-screen overflow-x-hidden overflow-y-auto w-64 xl:w-80 2xl:w-96 sticky top-0 py-10 pl-6 pr-3 xl:pr-5 2xl:pr-6"><a href="https://remix.run/docs/en/v1"><svg x-comp="Wordmark" height="24" viewBox="0 0 659 165" fill="none" xmlns="http://www.w3.org/2000/svg"><title>Remix Logo</title><path fill-rule="evenodd" clip-rule="evenodd" d="M133.85 124.16C135.3 142.762 135.3 151.482 135.3 161H92.2283C92.2283 158.927 92.2653 157.03 92.3028 155.107C92.4195 149.128 92.5411 142.894 91.5717 130.304C90.2905 111.872 82.3473 107.776 67.7419 107.776H54.8021H0V74.24H69.7918C88.2407 74.24 97.4651 68.632 97.4651 53.784C97.4651 40.728 88.2407 32.816 69.7918 32.816H0V0H77.4788C119.245 0 140 19.712 140 51.2C140 74.752 125.395 90.112 105.665 92.672C122.32 96 132.057 105.472 133.85 124.16Z" fill="currentColor"></path><path d="M0 161V136H45.5416C53.1486 136 54.8003 141.638 54.8003 145V161H0Z" fill="currentColor"></path><path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" fill="url(#paint0_linear)"></path><path d="M654.54 47.1035H611.788L592.332 74.2395L573.388 47.1035H527.564L568.78 103.168L523.98 161.28H566.732L589.516 130.304L612.3 161.28H658.124L613.068 101.376L654.54 47.1035Z" fill="currentColor"></path><path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" fill="url(#paint1_linear)"></path><path d="M229.43 120.576C225.59 129.536 218.422 133.376 207.158 133.376C194.614 133.376 184.374 126.72 183.35 112.64H263.478V101.12C263.478 70.1437 243.254 44.0317 205.11 44.0317C169.526 44.0317 142.902 69.8877 142.902 105.984C142.902 142.336 169.014 164.352 205.622 164.352C235.83 164.352 256.822 149.76 262.71 123.648L229.43 120.576ZM183.862 92.6717C185.398 81.9197 191.286 73.7277 204.598 73.7277C216.886 73.7277 223.542 82.4317 224.054 92.6717H183.862Z" fill="currentColor"></path><path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" fill="url(#paint2_linear)"></path><path d="M385.256 66.5597C380.392 53.2477 369.896 44.0317 349.672 44.0317C332.52 44.0317 320.232 51.7117 314.088 64.2557V47.1037H272.616V161.28H314.088V105.216C314.088 88.0638 318.952 76.7997 332.52 76.7997C345.064 76.7997 348.136 84.9917 348.136 100.608V161.28H389.608V105.216C389.608 88.0638 394.216 76.7997 408.04 76.7997C420.584 76.7997 423.4 84.9917 423.4 100.608V161.28H464.872V89.5997C464.872 65.7917 455.656 44.0317 424.168 44.0317C404.968 44.0317 391.4 53.7597 385.256 66.5597Z" fill="currentColor"></path><path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" fill="url(#paint3_linear)"></path><path d="M478.436 47.104V161.28H519.908V47.104H478.436ZM478.18 36.352H520.164V0H478.18V36.352Z" fill="currentColor"></path><defs><lineargradient id="paint0_linear" x1="591.052" y1="47.1035" x2="591.052" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></lineargradient><lineargradient id="paint1_linear" x1="203.19" y1="44.0317" x2="203.19" y2="164.352" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></lineargradient><lineargradient id="paint2_linear" x1="368.744" y1="44.0317" x2="368.744" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></lineargradient><lineargradient id="paint3_linear" x1="499.172" y1="0" x2="499.172" y2="161.28" gradientUnits="userSpaceOnUse"><stop stop-color="currentColor"></stop><stop offset="1" stop-color="currentColor" stop-opacity="0"></stop></lineargradient></defs></svg></a><div class="h-8"></div><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"></path></svg><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"><svg width="15" height="15" class="DocSearch-Control-Key-Icon"><path d="M4.505 4.496h2M5.505 5.496v5M8.216 4.496l.055 5.993M10 7.5c.333.333.5.667.5 1v2M12.326 4.5v5.996M8.384 4.496c1.674 0 2.116 0 2.116 1.5s-.442 1.5-2.116 1.5M3.205 9.303c-.09.448-.277 1.21-1.241 1.203C1 10.5.5 9.513.5 8V7c0-1.57.5-2.5 1.464-2.494.964.006 1.134.598 1.24 1.342M12.553 10.5h1.953" stroke-width="1.2" stroke="currentColor" fill="none" stroke-linecap="square"></path></svg></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button><div class="h-8"></div><nav class="md-nav"><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="1"><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading pt-0">Tutorials</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2 md-nav-item--active" href="https://remix.run/docs/en/v1/tutorials/blog" aria-current="page">Blog Tutorial (short)</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/tutorials/jokes">App Tutorial (long)</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Pages</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/philosophy">Philosophy</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/technical-explanation">Technical Explanation</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/stacks">Remix Stacks</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/contributing">Contributing</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/community">Community</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/faq">FAQs</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/pages/gotchas">Gotchas</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">File Conventions</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/entry.client">entry.client</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/entry.server">entry.server</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/remix-config">remix.config.js</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/root">root</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/file-conventions/routes-files">Route File Naming</a></li></ul></li><li data-dir="" data-level="1"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading" href="https://remix.run/docs/en/v1/route">Route Module API</a><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/action">action</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/catch-boundary">CatchBoundary</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/component">Component</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/error-boundary">ErrorBoundary</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/handle">handle</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/headers">headers</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/links">links</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/loader">loader</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/meta">meta</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/route/should-reload">unstable_shouldReload</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Components</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/form">Form</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/link">Link</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/links">Links</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/live-reload">LiveReload</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/meta">Meta</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/nav-link">NavLink</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/outlet">Outlet</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/prefetch-page-links">PrefetchPageLinks</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/scripts">Scripts</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/components/scroll-restoration">ScrollRestoration</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Hooks</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-action-data">useActionData</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-before-unload">useBeforeUnload</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-fetcher">useFetcher</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-fetchers">useFetchers</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-form-action">useFormAction</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-loader-data">useLoaderData</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-matches">useMatches</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-submit">useSubmit</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/hooks/use-transition">useTransition</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Utilities</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/cookies">Cookies</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/json">json</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/redirect">redirect</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/sessions">Sessions</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/unstable-create-file-upload-handler">unstable_createFileUploadHandler</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/unstable-create-memory-upload-handler">unstable_createMemoryUploadHandler</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/utils/parse-multipart-form-data">unstable_parseMultipartFormData</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Other API</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/dev">@remix-run/dev (CLI)</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/adapter">@remix-run/{adapter}</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/serve">@remix-run/serve</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/node">@remix-run/node</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/asset-imports">Asset Imports</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/react-router">React Router v6</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/other-api/fetch">Web Fetch API</a></li></ul></li><li data-dir="" data-level="1"><span class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-1 md-nav-heading">Guides</span><ul class="md-nav-list text-[color:var(--hue-0750)] mb-3" data-level="2"><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/accessibility">Accessibility</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/api-routes">API Routes</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/bff">Backend For Frontend</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/browser-support">Browser Support</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/data-loading">Data Loading</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/data-writes">Data Writes</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/deployment">Deployment</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/disabling-javascript">Disabling JavaScript</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/envvars">Environment Variables</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/errors">Error Handling</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/file-uploads">File Uploads</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/mdx">MDX</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/migrating-react-router-app">Migrating from React Router</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/constraints">Module Constraints</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/not-found">Not Found Handling</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/optimistic-ui">Optimistic UI</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/performance">Performance</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/resource-routes">Resource Routes</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/routing">Routing</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/styling">Styling</a></li><li data-dir="" data-level="2"><a class="md-nav-item py-1 block text-m-p-sm lg:text-sm md-nav-item--level-2" href="https://remix.run/docs/en/v1/guides/typescript">TypeScript</a></li></ul></li></ul></nav></div></div><div class="lg:z-[1] grow lg:h-full"><div class="py-6 md:py-8 lg:py-10 lg:pr-6 lg:pl-3 xl:pl-5 2xl:pl-6"><div><div class="markdown has-toc"><div class="md-toc-container"><div class="md-toc-nav" role="navigation"><ul class="toc"> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#quickstart">Quickstart</a></p> <ul> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#prerequisites">Prerequisites</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#creating-the-project">Creating the project</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#your-first-route">Your First Route</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#loading-data">Loading Data</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#a-little-refactoring">A little refactoring</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#pulling-from-a-data-source">Pulling from a data source</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#dynamic-route-params">Dynamic Route Params</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#nested-routing">Nested Routing</a></p> <ul> <li><a href="https://remix.run/docs/en/v1/tutorials/blog#index-routes">Index Routes</a></li> </ul> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#actions">Actions</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#progressive-enhancement">Progressive Enhancement</a></p> </li> <li> <p><a href="https://remix.run/docs/en/v1/tutorials/blog#homework">Homework</a></p> </li> </ul> </li> </ul></div><div class="md-prose"><h1 id="quickstart"><a href="https://remix.run/docs/en/v1/tutorials/blog#quickstart" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span></a>Quickstart</h1><p>We're going to be short on words and quick on code in this quickstart. If you're looking to see what Remix is all about in 15 minutes, this is it.</p><p><docs-info>Work through this tutorial with Kent in <a target="_blank" rel="noopener noreferrer" href="https://rmx.as/egghead-course">this free Egghead.io course</a></docs-info></p><p>This tutorial uses TypeScript. Remix can definitely be used without TypeScript. We feel most productive when writing TypeScript, but if you'd prefer to skip the TypeScript syntax, feel free to write your code in JavaScript.</p><p><docs-info>💿 Hey I'm Derrick the Remix Compact Disc 👋 Whenever you're supposed to <em>do</em> something you'll see me</docs-info></p><h2 id="prerequisites"><a href="https://remix.run/docs/en/v1/tutorials/blog#prerequisites" aria-hidden="true" tabindex="-1"><span class="icon icon-link"></span>