Custom Routes

Updated Oct 21, 2026

Livemark builds on TanStack Router. Any .tsx file you drop into .livemark/routes/ becomes a page at the matching URL — no registration, no config change.

Minimal example

import { createFileRoute } from "@tanstack/react-router"
import { Layout } from "livemark/components/Layout"

export const Route = createFileRoute("/about")({
  component: About,
})

function About() {
  return (
    <Layout>
      <div className="mx-auto max-w-3xl px-6 py-16 prose">
        <h1>About</h1>
        <p>Anything you'd write in a normal React page, here.</p>
      </div>
    </Layout>
  )
}

Save and visit /about/. Layout gives the page the same chrome as an article — banner, header, navigation and dark-mode toggle.

Choosing the chrome

A custom route starts bare: nothing is drawn around it until you add it. Compose as much as the page needs:

A landing page usually wants just the header:

import { createFileRoute } from "@tanstack/react-router"
import { Banner } from "livemark/components/Banner"
import { Header } from "livemark/components/Header"

export const Route = createFileRoute("/")({ component: Landing })

function Landing() {
  return (
    <>
      <Banner />
      <Header />
      <main>{/* your hero */}</main>
    </>
  )
}

How it fits with the rest of the site

• Exact paths win. Custom routes take precedence over the catch-all that serves Markdown articles. If you create /about, a docs/about.md article at the same path becomes unreachable.
• The root path /. Drop .livemark/routes/index.tsx to replace the default landing page with your own. Livemark's default site has a Markdown home page — overriding it gives you full React control of the hero.
• Nested paths. File paths mirror URL paths: .livemark/routes/guide/quickstart.tsx ⇒ /guide/quickstart/.

Importing Livemark primitives

Reuse the same components Livemark uses internally via the livemark/* subpath exports:

import { Link } from "@tanstack/react-router"
import { Button, buttonVariants } from "livemark/elements/button"
import { cn } from "cn"

export const Route = createFileRoute("/about")({ component: About })

function About() {
  return (
    <main className="mx-auto max-w-3xl px-6 py-16">
      <h1 className="text-4xl font-bold tracking-tight">About</h1>
      <Link to="/" className={cn(buttonVariants({ variant: "outline" }), "mt-6")}>
        ← Back home
      </Link>
    </main>
  )
}

Static assets

Files placed in .livemark/public/ are served at the site root. Put a robots.txt, a custom favicon.svg, or an /og-image.png there.

See also

• Overriding/Escaping — replace a built-in page or component instead of adding a new one.
• Site Metadata — the site title and favicon that show on custom routes too.