other-emerald

MDX integration

Does anyone know how to integrate mdx with a tanstack router project? I want to have the flexibility to use markdown files and wrap them with a prose class. I am surprised I can't find any examples of this. Thanks for any ideas.

12 Replies

quickest-silver•7mo ago

see e.g. here https://github.com/ally-ahmed/tss-blog-starter

GitHub

GitHub - ally-ahmed/tss-blog-starter: A blog/portfolio starter proj...

A blog/portfolio starter project built with TanStack Start. - ally-ahmed/tss-blog-starter

other-emeraldOP•7mo ago

thank you!

other-emeraldOP•7mo ago

I ended up doing a bit differently bc I want to just be able to switch to markdown for specific files and they are not always in the same dir like a blog. Here is what I did. Maybe it will help some others. Above is dir structure. Then you need two files a tsx and mdx. The index.mdx contains markdown content. And the route index.lazy.tsk imports and renders the content.

import { createLazyFileRoute } from "@tanstack/react-router";
import HomeContent from "./index.mdx";

export const Route = createLazyFileRoute("/_main-layout/")({
  component: HomePage,
});

function HomePage() {
  return (
    <article className="max-w-[75ch] mx-auto p-4 prose dark:prose-invert">
      <HomeContent />
    </article>
  );
}

import { createLazyFileRoute } from "@tanstack/react-router";
import HomeContent from "./index.mdx";

export const Route = createLazyFileRoute("/_main-layout/")({
  component: HomePage,
});

function HomePage() {
  return (
    <article className="max-w-[75ch] mx-auto p-4 prose dark:prose-invert">
      <HomeContent />
    </article>
  );
}

other-emeraldOP•7mo ago

Let me know if someone has a better idea. Thanks!

quickest-silver•7mo ago

would not use manual lazy routes just flip on autoCodeSplitting

other-emeraldOP•7mo ago

can you explain? I am not sure what you mean.

quickest-silver•7mo ago

https://tanstack.com/router/v1/docs/framework/react/guide/code-splitting/#using-automatic-code-splitting

Code Splitting | TanStack Router React Docs

Code splitting and lazy loading is a powerful technique for improving the bundle size and load performance of an application. Reduces the amount of code that needs to be loaded on initial page load Co...

other-emeraldOP•7mo ago

thanks. I will take a look. works like a charm. Thank you so much. I had not seen that before. Huge help. Be well.

quickest-silver•7mo ago

we should add native mdx support to router I think

other-emeraldOP•7mo ago

sounds like a good idea to me. It's so nice on docs type of pages where you have a lot of long-form content

quickest-silver•7mo ago

it'll take some time as we are very much working on start but we'll get there, or atleast add a way to allow users to configure a mdx integration ideally this is not in the core of router

other-emeraldOP•7mo ago

no worries. You will never have me rushing you guys. Very much respect all you are working on

Gaming

Programming

MDX integration

Did you find this page helpful?