new avatar just dropped, going back to my face since times are weird and I think we should all feel more connected 🫂

Thank you! LLMs definitely helped a lot, but there were still some tricky edge cases that took a few sleepless nights 😄

@renoun/screenshot - Pixel-Perfect CSS Screenshots The screenshot library that actually works. Capture any element with pixel-perfect accuracy including transforms, gradients, clipping, filters, and everything in between.

Play around with the examples below or get started by installing @​renoun/screenshot on NPM www.renoun.dev/screenshot

Introducing @​renoun/screenshot 📸

Capture any HTML element as an image with pixel-perfect accuracy, including modern CSS features.

Always Accurate Documentation by Travis Arnold As a designer and engineer, I've faced challenges with outdated documentation causing friction and trust erosion. Documentation drift arises from scattered sources and lack of a single reference, lead...

My talk is out! Keeping documentation in sync has always been hard, but now this is crucial to implement as LLMs produce more code that needs to be validated, and it's a lot easier than you think. gitnation.com/contents/com...

By helping facilitate that everything is derived from actual source code. For example, you can point to code on disk e.g. <CodeBlock path="components/Button.tsx" /> or if you have code snippets within MDX they will all be type-checked based on the closest tsconfig.

My talk is starting right now! Learn how to use React Server Components to always keep your documentation in sync 🔄

preview of the renoun presentation template

Turning 35 today 🎉 so I’m shipping something a little early to celebrate.

A premium Next.js + MDX slide deck template for renoun 50% off for a limited time: buy.polar.sh/polar_cl_tLG...

- Record your talk in-browser (camera + slides)
- Convert to MP4
- Keep everything local

Join us on Discord if you have any questions discord.com/invite/7Mf4x...

It's a culmination and testament to React's ability to schedule work efficiently. You can now install one package and start writing accurate, high-quality documentation with a best-in-class developer and user experience.

import { Directory } from 'renoun' const posts = new Directory({ path: 'posts', filter: '*.mdx', }) export async function Page({ slug }: { slug: string }) { const post = await posts.getFile(slug, 'mdx') const Content = await post.getContent() return <Content /> }

It's been almost five years since React Server Components were announced and three years since we could practically use them.

I could not have built www.renoun.dev without React.

The following source text with "warn" highlighted in yellow and "error" highlighted in red: console.warn('Warning') console.error('Error')

import { CodeBlock } from 'renoun' export function Annotations() { return ( <CodeBlock language="ts" annotations={{ highlight: ({ children, color }) => ( <span style={{ padding: '0 0.05em', borderRadius: '0.25rem', backgroundColor: color, }} > {children} </span> ), }} > {` console./* <highlight color='rgba(255,213,0,0.35)'> */warn/* </highlight> */('Warning') console./* <highlight color='rgba(255,0,0,0.35)' /> */error('Error') `} </CodeBlock> ) }

Annotations for code blocks usually require writing regexes to target specific source code and don't stay in sync easily. Working on something new using inline JSX comments. Highly flexible, declarative, and exposes annotations as renderers you can do whatever you want with.

renoun - The Documentation Toolkit for React The renoun toolkit uses your React framework to keep documentation polished, in sync, and on brand.

renoun has taken a long time to build because I run into every single issue it's trying to solve for the documentation site. It feels good to finally talk about now though, I'm really happy with where the API is. The changelog is quite the history of where it has been so far 😄 renoun.dev/changelog

It's fully composable through React Server components that work with any bundler and ships everything you need in one package: syntax highlighting, support for multiple themes, advanced API references, table of contents, and a full-featured file system utility that works with each component.

Thank you, Josh! 😊

renoun - The Documentation Toolkit for React The renoun toolkit uses your React framework to keep documentation polished, in sync, and on brand.

Excited to officially launch renoun.dev 🚀

This has been years in the making to deliver a focused set of components, hooks, and utilities in React for building great documentation exactly to your standards that always stay in sync.

Is Promise.all necessary when returning an array of promises as children or will Suspense/SuspenseList essentially optimize this?

I also noticed iterator maps work as well which is so nice! Would be great to document this as well.

Documenting inversion of control could help here instead of baking it in:
const transition = useTransition()
<Button transition={transition}>...</Button>

Then if it's not defined the Button works as normal.

Yeah, it's super limited and tedious to manage this way. Hopefully we'll get first-class support for classes and more advanced overloading someday.

You can kind of accomplish this using assertions on getters and then "this" parameter for methods www.typescriptlang.org/play/#code/M...

This will be a much nicer onboarding experience overall, thank you for contributing all of these fixes! 🙏

So exciting! I felt like this was always a huge hinderance to adopting MDX in App Router.

Mastery Hides Labor At clarity, effort vanishes. Friction is gone. Genius looks obvious. That invisibility is the work.

Reminds me of this vv.xyz/ideas/12b00e...

Made a small CLI that does exactly this that makes it a little easier github.com/souporseriou...

Waaaaaaaah!!! Chinese American Bear · EP · 2025 · 6 songs

The new Chinese American Bear EP. It's slowed down versions of their previous songs, but it's good. open.spotify.com/album/0rCKf5...

I don't think that's exclusive to RSC, we've always needed to guard those calls with something like "typeof document !== undefined" if it is initially server rendered.

GitHub - souporserious/renoun: The Documentation Toolkit for React The Documentation Toolkit for React. Contribute to souporserious/renoun development by creating an account on GitHub.

github.com/souporseriou...

Love this! I've wanted to explore variants for posts like a free version and then more in-depth paid version. It's more work obviously, but thinking there would be more incentive to go deeper.

Just implemented this on one of my projects and it cleaned up so much, thank you!

More on structures here ts-morph.com/manipulation...