Rendering Markdown Files in a React + Vite App

📝 Summary

In this tutorial, you are going to see how to:

1. Create a new React + Vite app.

2. Install the react-markdown package.

3. Create a Markdown file in the "/src/assets" folder.

4. Configure vite.config to include markdown files when loading assets.

5. Create React + Vite Markdown Reader Component.

6. Use the Markdown reader component.

🧰 Step 1: Create a new React + Vite app

1. Run the following command to create a new React + Vite app:

npm create vite@latest app-name -- --template react

• Replace the "app-name" with the name of your app/project

2. Vite has just created your app, let's navigate into the new app folder and run the command to install the dependencies:

cd app-name
npm install

3. Now you just have to wait the installation of the dependencies, and after that, to see your app running you need to run the command:

npm run dev

4. This will start the development server, and you should see an output like this:

  VITE vA.B.C  ready in X ms

  ➜  Local: http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

5. Open your browser and head to http://localhost:5173 and you should see the default welcome page!

📦 Step 2: Install the react-markdown package

Install react-markdown to convert Markdown into React-renderable content:

npm install react-markdown

📄 Step 3: Create a Markdown file in the "/src/assets" folder

Create a folder named "content", if you don't have it yet, in the "src" folder to store your Markdown files.

mkdir src/content

Then add a file like first-post.md in "src/content/":

# My first post

This is a **Markdown** file rendered in React, and it is:

- Easy to use
- Fun to build
- Supports emojis 🎉

⚙️ Step 4: Configure vite.config to include markdown files when loading assets

You can directly import the .md file as a string using Vite's native support for raw files.

🛠 First, update vite.config.js to allow raw file imports:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  assetsInclude: ['**/*.md'], // add this configuration
});

📖 Step 5: Create React + Vite Markdown Reader Component

Create the MarkdownReader.jsx at the folder "src/components/" and paste the below content:

import ReactMarkdown from 'react-markdown';

// Import markdown as raw string
import markdownContent from '../assets/content/first-post.md?raw';

const MarkdownReader = () => {
  return (<ReactMarkdown children={markdownContent} />);
};

export default MarkdownReader;

🧪 Step 6: Use the Markdown reader component

Edit the file src/App.jsx to use the MarkdownReader component as showed below:

import MarkdownReader from './components/MarkdownReader';

function App() {
  return (
    <div className="App">
      <h1>📘 Vite + Markdown Reader</h1>
      <MarkdownReader />
    </div>
  );
}

export default App;

Now you just need to start your development server:

npm run dev

And when you visit http://localhost:5173" your Markdown content is going to be rendered inside your React + Vite app!