ReMDX

Create beautiful minimalist presentations with React & MDX.

Example Presentations

• Dev Velocity Presentation: source code
• Turn Based AI Presentation: source code

Setup

npm init remdx

And:

npm run dev

Custom Setup

See the Example Deck to get started with adding ReMDX to your project:

npm add @nkzw/remdx @nkzw/vite-plugin-remdx

vite.config.js:

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

export default defineConfig({
  plugins: [remdx(), react()],
});

index.html:

<div id="app"></div>
<script type="module">
  import '@nkzw/remdx/style.css';
  import { render } from '@nkzw/remdx';

  render(document.getElementById('app'), import('./slides.re.mdx'));
</script>

Then create your slides.re.mdx and start the dev server via npx run vite dev.

Usage

• Individual slides are separated by three dashes: ---.
• Front matter blocks can be inserted at the top of a slide and separated from the slide content by two dashes: --. The theme can be set via theme: <name>, and background images can be set via image: <url>, referring to images in the public/ folder.
• You can export a set of HTML and custom components using export { Components } from './Components'. The Components.tsx file should export an object with component names mapping to their implementation as default export.
• ReMDX provides a default theme, but you can leave it out and bring your own or customize styles via
• Code blocks are styled via shiki-twoslash and support syntax highlighting via CSS variables.
• The inbuilt image component used for inline images via Markdown syntax (for example: ![Tokyo in the Dark](dark.jpg?height=60vh&borderRadius=20px)) can be styled by passing CSS properties to the query string.
• If you are using ReMDX for presentations and you like it, please add a slide or note at the end saying "Made with ReMDX". If you can, share the source of your slide deck with the community.

Context & Decisions

Prior Art

ReMDX was inspired by:

• mdx-deck
• Spectacle
• Slidev

The core of ReMDX is a lean fork of Spectacle. create-remdx is based on Slidev. I'd like to thank the authors of the above tools for their awesome work.

Why ReMDX?

All three of the above solutions fall short in some way. Some are a bit outdated, and some have too much cruft or are slow. Slidev is modern but only works with Vue instead of React. I wanted to build a fast MDX-based slide deck tool on top of Vite that uses React and only supports a minimal set of features.

ReMDX does not have feature XYZ!

That's not a question. Fork it, build it, and submit a PR.

Opinions

• Basics: React + Markdown together is a great way to make technical JavaScript presentations.
• Minimal: ReMDX has few features. If you'd like to add new features, please fork it and consider sending a Pull Request.
• Composable: ReMDX doesn't box you in. Bring your design system or use Tailwind to lay out your slides.