https://remix.run/

 Docs GitHub
Focused on web fundamentals and modern UX, you're simply going to 
build better websites
Remix is a full stack web framework that let's you focus on the user
interface and work back through web fundamentals to deliver a fast,
slick, and resilient user experience. People are gonna love using
your stuff.
Get StartedRead the Docs

export async function loader({ request }) {
  return getProjects();
}

export async function action({ request }) {
  let form = await request.formData();
  return createProject({
    title: form.get("title"),
  });
}

export default function Projects() {
  let projects = useLoaderData();
  let { state } = useTransition();
  let busy = state === "submitting";

  return (
    <div>
      {projects.map((project) => (
        <Link to={project.slug}>
          {project.title}
        </Link>
      ))}

      <Form method="post">
        <input name="title" />
        <button type="submit" disabled={busy}>
          {busy
            ? "Creating..."
            : "Create New Project"}
        </button>
      </Form>
    </div>
  );
}

export async function loader({ request }) {
  return getProjects();
}

export async function action({ request }) {
  let form = await request.formData();
  return createProject({ title: form.get("title") });
}

export default function Projects() {
  let projects = useLoaderData();
  let { state } = useTransition();
  let busy = state === "submitting";

  return (
    <div>
      {projects.map((project) => (
        <Link to={project.slug}>{project.title}</Link>
      ))}

      <Form method="post">
        <input name="title" />
        <button type="submit" disabled={busy}>
          {busy ? "Creating..." : "Create New Project"}
        </button>
      </Form>
    </div>
  );
}

[jenna]
Jenna Smith
Radix UI
I've been waiting for something to encourage progressive enhancement
in the React space *forever* and Remix truly is so much more. Proving
we don't need to sacrifice React or choose SSG for a lightning fast,
accessible UI, and the DX makes it all too easy 
[jkup]
@jkup
Cloudflare
 
holy  Remix is good
[aweary]
@aweary
Discord, prev React Core
 
I just rewrote my first Remix app on top of Cloudflare Workers and
Supabase and it's so damn good
[tiger]
@TAbrodi
Software Developer
 
My mind is still blown away with Remix! So easy and elegant . I love
how it also focuses on Accessibility (Progressive Enhancement...) ,
A few days ago I was like wazzup with remix, we got Next.js and
Svelte  ... and now I'm fired up like crazy . This is so good 
[sergio]
@sergiodxa
Daffy, prev Vercel
 
What's really cool with Remix loaders is that you can do most of your
data transformation and calculations there, like check if a list is
empty, limit the number of records, only send specific attributes, so
your React component just receives the data and renders it, no logic
needed
[elrick]
@elrickvm
Fullstack Dev, Frontside
 
Remix is going to put developers on the Hot Path to build accessible,
scaleable, and performant apps, that have stellar user experiences
and amazing developer ergonomics. It's not only going to be a win for
developers, but also a big win for the end-users!
[tom]
@theflyingcoder1
Fullstack Developer
 
In my opinion @remix_run will be game changer for corporate teams
hesitant to adopt full stack JavaScript. The core concepts are so
intuitive you can pick it up in a day, and it will even integrate
into your existing stack.
[sophia]
@wisecobbler
Software Engineer, Box
 
I love what @mjackson and @ryanflorence are doing with Remix!
Deploying to AWS Lambda in under 30 seconds 
[jens]
@meindertsmajens
Web Developer
 
Building with @remix_run has been awesome so far. Having used Next.js
for applications for years, the nested layouts are a wonderful
feature. I also haven't learned this much about the web in years.
[cammchenry]
@cammchenry
Web Developer
 
I love using @remix_run for my website. Remix has improved my
productivity as a front-end developer by empowering me to seamlessly
switch between front-end and back-end code.
[airuyi]
@airuyi
App Developer
 
If you're doing #webdevelopment you should check out Remix  It's a
new (old) paradigm for web dev, which simplifies our code, especially
state management, speeds up our page loads, and gives us a mental
model and framework we can rely on to create our best work
[wave][loading]
While you were waiting for your static site to build, distributed web
infrastructure got really good. Break through the static.

Remix is a seamless server and browser runtime that provides snappy
page loads and instant transitions by leveraging distributed systems
and native browser features instead of clunky static builds. Built on
the Web Fetch API (instead of Node) it can run anywhere. It already
runs natively on Cloudflare Workers, and of course supports
serverless and traditional Node.js environments, so you can come as
you are.

Page speed is only one aspect of our true goal though. We're after
better user experiences. As you've pushed the boundaries of the web,
your tools haven't caught up to your appetite. Remix is ready to
serve you from the initial request to the fanciest UX your designers
can think up. Check it out 

Remix has a cheat code
Nested Routes.
||||----BA
Websites usually have levels of navigation that control child views.
Not only are these components pretty much always coupled to URL
segments...
...they're also the semantic boundary of data loading and code
splitting.
Hover or tap the buttons to see how they're all related

<Root><Sales><Invoices><Invoice id={id}>
example.com/sales/invoices/102000
Fakebooks
Dashboard
Accounts
Sales
Expenses
Reports
Sales
Overview
Subscriptions
Invoices
Customers
Deposits
Overdue
$10,800
Due Soon
$62,000
Invoice List
Santa Monica
$10,800
1995
Overdue
Stankonia
$8,000
2000
Due Today
Ocean Avenue
$9,500
2003
Paid
Tubthumper
$14,000
1997
Due in 10 Days
Wide Open Sp...
$4,600
1998
Due in 8 Days
Stankonia
$8,000
Due Today * Invoiced 10/31/2000
Pro Plan
$6,000
Custom
$2,000
Net Total
$8,000
Through nested routes, Remix can eliminate nearly every loading
state.
Most web apps fetch inside of components, creating request waterfalls
, slower loads, and jank.
Remix loads data in parallel on the server and sends a fully formed
HTML document. Way faster, jank free.
Without Remix
example.com/sales/invoices/102000
Fakebooks
Dashboard
Accounts
Sales
Expenses
Reports
Sales
 
 
 
[loading]
document
root.js
user.json
sales.js
sales/nav.json
invoices.js
invoice.js
invoice/{id}.json
With Remix
example.com/sales/invoices/102000
Fakebooks
Dashboard
Accounts
Sales
Expenses
Reports
Sales
Overview
Subscriptions
Invoices
Customers
Deposits
Overdue
$10,800
Due Soon
$62,000
Invoice List
Santa Monica
$10,800
1995
Overdue
Stankonia
$8,000
2000
Due Today
Ocean Avenue
$9,500
2003
Paid
Tubthumper
$14,000
1997
Due in 10 Days
Wide Open Sp...
$4,600
1998
Due in 8 Days
Stankonia
$8,000
Due Today * Invoiced 10/31/2000
Pro Plan
$6,000
Custom
$2,000
Net Total
$8,000
document
root.js
sales.js
invoices.js
invoice.js
 
 
 
(Keep scrolling to compare)
Say goodbye to Spinnageddon
Say goodbye to Spinnageddon
Nested routes allow Remix to make your app as fast as instant.
Remix can prefetch everything in parallel before the user clicks a
link.
Public Data. User Data. Modules. Heck, even CSS.
Zero loading states. Zero skeleton UI. Zero jank.
Alright, you caught us, they're just prefetch link tags, #
useThePlatform
example.com/dashboard
Fakebooks
Dashboard
Accounts
Sales
Expenses
Reports
Dashboard
Recent Activity
Alerts
Messages
New Invoice
Customer
Stankonia
Net Total
$8,000
New Invoice
Customer
Ocean Avenue
Net Total
$9,500
sales.js
sales/nav.json
invoices.js
invoice.js
invoice/{id}.json
invoice.css
Data loading ... [yawn]
You ever notice most of the code in your app is for changing data?

Imagine if React only had props and no way to set state. What's the
point? If a web framework helps you load data but doesn't help you
update it, what's the point? Remix doesn't drop you off at the <form
onSubmit> cliff. (What the heck does event.preventDefault do anyway?)

Resilient, progressively enhanced data updates are built in.
It's so simple it's kind of silly. Just make a form...
...and an action on the server. The whole thing works w/o JavaScript.
Remix runs the action server side, revalidates data client side, and
even handles race conditions from resubmissions.
Get fancy with transition hooks and make some pending UI. Remix
handles all the state, you simply ask for it.
Or get jiggy with some optimistic UI. Remix provides the data being
sent to the server so you can skip the busy spinners for mutations,
too.
HTML Forms. Who knew?

export default function NewInvoice() {
  return (
    <Form method="post">
      <input type="text" name="company" />
      <input type="text" name="amount" />
      <button type="submit">Create</button>
    </Form>
  );
}

export async function action({ request }) {
  let body = await request.formData();
  let invoice = await createInvoice(body);
  return redirect(`/invoices/${invoice.id}`);
}

:)
Your websites run into problems, but with Remix they don't need to be
refreshed. Error handling is hard to remember and hard to do. That's
why it's built in.
Remix handles errors while Server Rendering. Errors while Client
Rendering. Even errors in your server side data handling.
[qrcode]
Route Error Boundaries keep the happy path happy.
Each route module can export an error boundary next to the default
route component.
If an error is thrown, client or server side, users see the boundary
instead of the default component.
Routes w/o trouble render normally, so users have more options than
slamming refresh.
If a route has no boundary, errors bubble up. Just put one at the top
and chill out about errors in code review, yeah?
example.com/sales/invoices/102000
Fakebooks
Dashboard
Accounts
Sales
Expenses
Reports
Sales
Overview
Subscriptions
Invoices
Customers
Deposits
Overdue
$10,800
Due Soon
$62,000
Invoice List
Santa Monica
$10,800
1995
Overdue
Stankonia
$8,000
2000
Due Today
Ocean Avenue
$9,500
2003
Paid
Tubthumper
$14,000
1997
Due in 10 Days
Wide Open Sp...
$4,600
1998
Due in 8 Days
Stankonia
$8,000
Due Today * Invoiced 10/31/2000
Pro Plan
$6,000
Custom
$2,000
Net Total
$8,000
Oh snap!
There was a problem loading this invoice
That's probably enough for now. What are you waiting for?
Go Play!