slidev-parser

A powerful browser-side parser and renderer for Slidev presentations, enabling real-time MDC syntax rendering and UnoCSS styling.

English | 简体中文 | 🤹‍♂️ Demo | 🚀 Playground

Features ✨

• 📝 Enhanced Markdown

  • Full MDC support
  • Seamless Vue component integration
  • Style modifiers (e.g. {.text-blue})
  • Nested syntax and shortcuts

• 🎨 UnoCSS Integration

  • Atomic CSS utilities
  • Dynamic class generation
  • Icon preset support
  • Custom rules & theming

• 🧩 Component System

  • Remote component loading
  • Custom component injection
  • Real-time component updates
  • Full lifecycle management

• 📐 Layout Templates

  • default - Standard layout
  • center - Centered content
  • cover - Cover slide
  • two-cols - Two-column layout
  • image-right/left - Image with text
  • iframe - Embedded frame

• 🔥 Advanced Features

  • Browser-side rendering
  • Responsive design
  • Zoom controls
  • Theme customization
  • Hot component reload

Installation 📦

# Using npm
npm install slidev-parser

# Using yarn
yarn add slidev-parser

# Using pnpm
pnpm add slidev-parser

Usage Guide 📖

Basic Usage

<script setup>
import { SlideRender } from 'slidev-parser'
import 'slidev-parser/index.css'

const slide = {
  frontmatter: {
    layout: 'cover', // Use cover layout
  },
  content: `
# My Presentation {.text-blue-500}

Content written in **Markdown**
  `,
  note: 'Speaker notes here'
}
</script>

<template>
  <SlideRender
    id="my-slide"
    :slide="slide"
    :zoom="1"
    :slide-aspect="16 / 9"
  />
</template>

Multiple Slides

<script setup>
import { SlidesRender } from 'slidev-parser'
import 'slidev-parser/index.css'

const slides = [
  {
    frontmatter: { layout: 'cover' },
    content: '# First Page',
  },
  {
    frontmatter: { layout: 'two-cols' },
    content: `
# Left Content
::right::
# Right Content
    `,
  }
]
</script>

<template>
  <SlidesRender :slides="slides" />
</template>

Remote Components

<script setup>
import { SlideRender } from 'slidev-parser'
import 'slidev-parser/index.css'

const slide = {
  frontmatter: {
    layout: 'cover',
  },
  content: `
# My Presentation

<remote url="https://gist.githubusercontent.com/MarleneJiang/b205007f50abcbc404f07127439c686a/raw/05414d8f57cf7d0af626200f73feb19d01d79619/test.vue"/>
  `,
  note: 'Speaker notes here'
}
</script>

<template>
  <SlideRender
    id="my-slide"
    :slide="slide"
  />
</template>

Custom Components

<script setup>
import { SlideRender } from 'slidev-parser'
import CustomComp from './CustomComp.vue'
import 'slidev-parser/index.css'

const slide = {
  frontmatter: {
    layout: 'cover',
  },
  content: `
# My Presentation

<CustomComp/>
  `,
  note: 'Speaker notes here'
}
</script>

<template>
  <SlideRender
    id="my-slide"
    :slide="slide"
  />
</template>

Configuration Options

interface BaseConfigOptions {
  mdOptions?: Record<string, any>
  sfcOptions?: Record<string, any>
  components?: Record<string, Component>
}
export interface RendererOptions extends BaseConfigOptions {
  unoConfig?: {
    customConfigRaw?: string
    customCSSLayerName?: string
    uno?: boolean
  }
  SlideLoading?: Component
  SlideError?: Component
}

Warn

1. CAN NOT be used in SSR environment, if you want to use it in Nuxt, you can set ssr: false in nuxt.config.js to disable SSR.