LightNews LightNews
banner
souporserious.com
@souporserious.com
480 followers 21 following 34 posts
Design / Systems / React
Building https://www.renoun.dev/
Posts Replies Media Videos
souporserious.com
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.
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 /> }
October 16, 2025 at 6:23 PM
souporserious.com
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.
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> ) }
October 12, 2025 at 8:27 PM