vitepress-html-preview

A Vue component for embedding external HTML files via iframe in VitePress. It’s useful for showcasing interactive demos with full HTML, CSS, and JavaScript support.

Live Demo and more information

✨ See it in action:
👉 https://miletorix.github.io/vitepress-html-preview/

Installation

npm i @miletorix/vitepress-html-preview

Usage

Configuration

// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'

import { HtmlPreview } from '@miletorix/vitepress-html-preview' // [!code ++]

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('HtmlPreview', HtmlPreview) // [!code ++]
  }
}

Html Preview

<HtmlPreview src="path-to-.html-file" width="..." height="..." />

• Default width: 100%
• Default height: 400px

Example

Input:

<HtmlPreview src="/demo/point-sketch.html" height="600px" />

Output: