Your Technical Content Toolkit

Meticulously crafted React components and utilities to help you create engaging content and documentation.

Start Writingnpm install renoun

  1. Collect

    Collect, organize, and validate structured data using the File System API.

    import { Directory } from 'renoun/file-system'
import type { MDXContent } from 'renoun/mdx'

const posts = new Directory<{ mdx: { default: MDXContent } }>({
  path: 'posts',
})

  2. Render

    Query and render your file system entries programmatically using a simple API.

    import { Directory } from 'renoun/file-system'
import type { MDXContent } from 'renoun/mdx'

const posts = new Directory<{ mdx: { default: MDXContent } }>({
  path: 'posts',
  getModule: (path) => import(`./posts/${path}`),
})

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>
}) {
  const post = await posts.getFile((await params).slug, 'mdx')

  if (!post) {
    return <div>Post not found</div>
  }

  const Content = await post.getExport('default').getRuntimeValue()

  return <Content />
}

  3. Personalize

    Select from a growing list of pre-built components to tailor your content and documentation to fit your unique needs and brand identity.

    import { CodeBlock, Tokens } from 'renoun/components'

export function Page() {
  return (
    <CodeBlock
      language="tsx"
      value={`import { CodeBlock } from 'renoun/components'`}
    >
      <pre>
        <Tokens />
      </pre>
    </CodeBlock>
  )
}
Learn More About Collections →

Stay Updated