TanStack Start your engines

Today’s issue: Promoting type safety with AI celebrities, Framer gets 50% faster, and number transitions that will make your haters jealous.

Welcome to #332.

---

TanStack Start your engines

Remember when the Beatles released 12 of the greatest albums of all time in a 7-year period in the 1960s?

Of course you don’t, because you (probably) aren’t 80 years old. But luckily, we’re all living through a similar period of world-changing output today – with the TanStack ecosystem blossoming before our eyes.

Tanner Linsley’s discography is up to nine different libraries now, and the still-alpha TanStack Start framework has been getting a ton of buzz this month as a potential Next.js competitor. And since it’s been almost 72 hours since we last wrote about a new React framework, I figured we should take a closer look 🙃.

How we got here: TanStack Start is built on top of TanStack Router – a fully type-safe React router with built-in data fetching and lots of other powerful features designed to “handle the beefiest routing requirements with ease.”

To create Start, Tanner & Co. combined their router with Vite and Vinxi to create a feature-rich, full-stack React framework with a uniquely appealing DX:

• Full-document SSR, streaming, server functions, and RPCs – so you can have powerful server-side rendering without sacrificing first-class client-side interactivity.

• Enterprise-grade routing – thanks to everything we wrote earlier about TanStack Router, plus type-safe, full-stack APIs

• Deployable anywhere that JavaScript can run – thanks to Vinxi handling bundling and deployment.

Bottom Line: React Query is still by far the most popular library in the TanStack ecosystem – but if Start can live up to the early hype, it could end up becoming TanStack’s version of Sgt. Pepper.

---

New TanStack + Convex integration just dropped

Tanner Linsley just went on the Syntax Podcast to talk about TanStack Start and the “pretty mindblowing” integrations they’re building with Convex.

Wtf is Convex? It’s a sync platform that uses serializable TypeScript functions on top of a relational DB to replace your backend and client state management.

Here’s what they’ve been cooking up with TanStack:

• The TanStack Query adapter lets you supercharge Query with live updating queries that never have stale results and can handle invalidation automatically.

• The TanStack Start integrations let you server render a consistent snapshot of server state from multiple queries and automatically resume live updates on hydration.

Here’s how Tanner described it on Syntax:

“All you do is create this query client from Convex and marry it to the normal query client. Then you just pass your queries to useQuery, and Convex takes care of the rest of it. So it’s real-time, socket-based queries.”

The integrations are still early stage, but you can try them out for yourself if you like to live dangerously.

---

function addOneMonth(date) {
  const newDate = new Date(date);
  newDate.setMonth(newDate.getMonth() + 1);
  if (newDate.getDate() !== date.getDate()) {
    newDate.setDate(0);
  }
  return newDate;
}

const today = new Date(2024, 10, 17); // October 17, 2024
const oneMonthFromToday = addOneMonth(today);

console.log(oneMonthFromToday);

---

1. Next.js 15 RC 2 comes with async request APIs, enhanced security for Server Actions, a static route indicator, and lots more.

2. Jam built a slick browser extension for creating one-click bug reports. It lets you take a screenshot or video of the issue, then it generates a link to share with your team that automatically adds diagnostic info like the device & browser used, console logs, network logs, and repro steps. It’s surprisingly painless. [sponsored]

3. Josh Wontoon wrote 5,000 words and created a bunch of interactive visuals to tell us about how his experience building drag to select functionality for his company’s app was “harder than he thought it would be.” His pain is our gain.

4. Thorsten Ball wrote about How he uses git.

5. Node.js 23 just came out with support for loading ES modules with require() because miracles still happen.

6. Yusuke Wada, wrote an article on The story of Hono. Besides being the creator of Hono, I’m not sure exactly what qualifies him to write this article, but it’s a good read.

7. QA Wolf writes hundreds of tests for your product in Playwright, maintains those tests as your product scales, and provides the infra to let you run 100% of your test suite in parallel. They’re like little magic testing fairies that’ll make sure you never ship another bug to prod, while drastically speeding up your QA cycles. [sponsored]

8. openai-realtime-api is a TypeScript client for OpenAI’s realtime voice API. It’s comforting to know that my knock-off version of Cameo with AI-voiced “celebrities” will be type safe now 🙏.

9. Framer wrote about how their new update makes Framer sites become interactive 50% faster.

10. Number Flow is a new React component that lets you transition, format, and localize numbers in a cool way that will make people think, “You know what, we really shouldn’t have bullied that kid so much in middle school. Look at how smoothly the numbers transition in the app he built.”

---

Months are 0 indexed in JavaScript. So, new Date(2024, 10, 17) is actually November 17, 2024. When we add one month to that date, we get December 17, 2024.

function addOneMonth(date) {
  const newDate = new Date(date);
  newDate.setMonth(newDate.getMonth() + 1);
  if (newDate.getDate() !== date.getDate()) {
    newDate.setDate(0);
  }
  return newDate;
}

const today = new Date(2024, 9, 17); // October 17, 2024
const oneMonthFromToday = addOneMonth(today);

console.log(oneMonthFromToday);