Thank you! LLMs definitely helped a lot, but there were still some tricky edge cases that took a few sleepless nights 😄
10.01.2026 18:10
👍 1
🔁 0
💬 0
📌 0
Thank you! LLMs definitely helped a lot, but there were still some tricky edge cases that took a few sleepless nights 😄
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.
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 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! 😊
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.
Made a small CLI that does exactly this that makes it a little easier github.com/souporseriou...
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.
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!
Yeah, sorry tsxmod isn't really helpful yet. You can code golf with a chat app, but if I understand what you're after you probably want to use structures and prune out any info you don't care about. Whipped up something to start with here stackblitz.com/edit/stackbl...
