TanStack Start Setup

Getting started with Ariadocs in a TanStack Start project is simple.

Prerequisites: Complete the Installation & Configuration first.

Create Docs Route

Catch all docs pages inside src/routes/docs/$.tsx:

// src/routes/docs/$.tsx
import { createFileRoute, notFound } from "@tanstack/react-router";
import { MdxClient } from "@ariadocs/react/client";
import { docs } from "@/ariadocs";

export const Route = createFileRoute("/docs/$")({
  loader: async ({ params }) => {
    const slug = params._splat;
    if (!slug) throw notFound();
    return docs.serialize({ slug });
  },
  component: Page,
});

function Page() {
  const { serialized, frontmatter } = Route.useLoaderData();

  return (
    <section>
      <title>{frontmatter.title}</title>
      <MdxClient serialized={serialized} />
    </section>
  );
}

Create Your First Doc

contents/docs/hello-world.mdx

---
title: Hello World
---

# Hello World

This is your **first Ariadocs page**.

Run the App

pnpm dev

Open http://localhost:3000/docs/hello-world