NakedJSX Plugin - @nakedjsx/plugin-asset-mdx

Import an MDX file as a JSX function.

Return to NakedJSX documentation

This plugin is not bundled with the npx nakedjsx command and must be installed. It can be installed globally:

npm install -g @nakedjsx/plugin-asset-mdx

Or locally, in any parent directory of your source files (you don't otherwise need to be using a Node project):

npm install @nakedjsx/plugin-asset-mdx

Usage example:


import { Page } from '@nakedjsx/core/page';

import HelloMdx from ':mdx:hello.mdx';

        <HelloMdx />


# Hello, MDX!

This markdown will become a *paragraph* tag.

> And this, a blockquote.

1. Lists
2. are also supported

<p css="color: fuchsia">And HTML with scoped CSS.</p>

# build command

$ npx nakedjsx src --out out --plugin mdx @nakedjsx/plugin-asset-mdx --pretty

The result:

out/index.html (507 bytes) (open in new tab)

<!doctype html>
<html lang="en">
            .a {
                color: #f0f;
        <h1>Hello, MDX!</h1>
        <p>This markdown will become a <em>paragraph</em> tag.</p>
            <p>And this, a blockquote.</p>
            <li>are also supported</li>
        <p class="a">And HTML with scoped CSS.</p>

Return to NakedJSX documentation