vitepress-html-preview

Appearance

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.

npm
npm
license

Installation ​

npm
sh
npm i @miletorix/vitepress-html-preview

Usage ​

Configuration ​

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

import { HtmlPreview } from '@miletorix/vitepress-html-preview'

export default {
  extends: DefaultTheme,
  enhanceApp(ctx) {
    ctx.app.component('HtmlPreview', HtmlPreview) 
  }
}

Html Preview ​

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

NOTE

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

Example ​

Input:

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

Output: