Documentation You Want To Use

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'

interface PostTypes {
  mdx: {
    default: MDXContent
  }
}

const posts = new Directory<PostTypes>('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'

interface PostTypes {
  mdx: {
    default: MDXContent
  }
}

const posts = new Directory<PostTypes>('posts').withModule((path) => import(`./posts/${path}`))

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

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

  const Content = await post.getExportValueOrThrow('default')
    
  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