PACKAGES

Rasengan MDX

The @rasenganjs/mdx package allows you to use MDX (Markdown + JSX) files as pages in your Rasengan.js project. This enables you to write content using Markdown while embedding React components seamlessly.

Installation

Terminal

bashnpm install @rasenganjs/mdx

Configuration

Before you can use MDX pages in your Rasengan.js project, you need to configure the mdx plugin in your rasengan.config.js file.

rasengan.config.js

javascriptimport { defineConfig } from 'rasengan';
import mdx from '@rasenganjs/mdx/plugin';
 
export default defineConfig({
  vite: {
    plugins: [mdx()],
  }
});

Usage

From Markdown files to MDX Pages

Follow these steps to create an MDX page in your Rasengan.js project:

[01]Create an MDX Page

Place an .mdx or .md file inside the app directory with the format [name].page.mdx or [name].page.md. For example, you can create a blog.page.mdx file with the following content:

blog.page.mdx

mdx---
path: /blog
metadata:
  title: Blog Page
  description: Discover our new blog posts
---
 
# Blog Page
 
This is a `blog` page.

[02]Register the MDX Page in the Router

Import the MDX page component you just created, then add it to your router configuration. For example:

app.router.ts

typescriptimport { RouterComponent, defineRouter } from 'rasengan';
import AppLayout from '@app/app.layout';
import Blog from '@app/blog.page.mdx';
 
class AppRouter extends RouterComponent {}
 
export default defineRouter({
  imports: [],
  layout: AppLayout,
  pages: [Blog],
})(AppRouter);

[03]Load the MDX Styles

To ensure proper styling for your MDX pages, import the CSS file from @rasenganjs/mdx in your main.ts file. For example:

main.ts

typescriptimport "@rasenganjs/mdx/css";
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
 
export default function App({ children, Component }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

[04]Run the Project and Visit /blog

Start your development server and navigate to the URL of the MDX page you created. For example:

Terminal

bashnpm run dev

From Markdown string to MDX Component

You can also use the Markdown component to render markdown content from a string. This is useful when you want to render dynamic content or when you need to render markdown content from an API response.

[01]Load the MDX Styles

To ensure proper styling for your MDX pages, import the CSS file from @rasenganjs/mdx in your main.ts file. For example:

main.ts

typescriptimport "@rasenganjs/mdx/css";
import { type AppProps } from "rasengan";
import AppRouter from "@/app/app.router";
 
export default function App({ children, Component }: AppProps) {
  return <Component router={AppRouter}>{children}</Component>;
}

[02]Create an MDX Component

Use the Markdown component from @rasengan/mdx to render markdown content from a string. For example:

MDX Component

tsximport { Markdown } from '@rasengan/mdx';
 
const mdContent = "# Hello, World!";
const MyComponent = () => <Markdown content={mdContent} />;

API

Markdown

The Markdown component is used to render markdown content from a string.

Markdown.tsx

tsximport { Markdown } from '@rasengan/mdx';

Props

Name	Type	Description
content	string	The markdown content to render.
className	string	The class name to apply to the rendered markdown content.

mdx() Plugin

The mdx() plugin is used to enable MDX support in your Rasengan.js project.