The Documentation Toolkit for React

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

Start Writingnpx create-renoun

Easy Setup so You Can Focus on What Matters

Start writing type-safe content and documentation in just a few simple steps.

  1. Collect

    Collect, organize, and validate structured data using powerful file system utilities.

    View Utilities
    import { Directory, withSchema } from 'renoun/file-system'
import { z } from 'zod'

export const posts = new Directory({
  path: 'posts',
  include: '*.mdx',
  loaders: {
    mdx: withSchema(
      {
        frontmatter: z.object({
          title: z.string(),
          date: z.coerce.date(),
          summary: z.string().optional(),
          tags: z.array(z.string()).optional(),
        }),
      },
      (path) => import(`./posts/${path}.mdx`)
    ),
  },
  sort: async (a, b) => {
    const aFrontmatter = await a.getExportValue('frontmatter')
    const bFrontmatter = await b.getExportValue('frontmatter')

    return bFrontmatter.date.getTime() - aFrontmatter.date.getTime()
  },
})

  2. Render

    Query and render your file system entries programmatically in your favorite framework.

    Framework Guides
    import { Directory } from 'renoun/file-system'

const posts = new Directory({ path: 'posts' })

async function Page({ slug }: { slug: string }) {
  const post = await posts.getFile(slug, 'mdx')
  const Content = await post.getExportValue('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.

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

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

Stay Updated