Skip to content

Demo

The following examples showcase the Starlight Image Zoom plugin in action.

Markdown

src/content/docs/example.md
---
title: My page title
---
![Ceramic mug on table](../../assets/mug.jpg)
Preview

<Image />

src/content/docs/example.mdx
---
title: My page title
---
import { Image } from 'astro:assets'
import paper from '../../assets/paper.jpg'
<Image src={paper} alt="Brown pencil on white printing paper" />
Preview

<Picture />

src/content/docs/example.mdx
---
title: My page title
---
import { Picture } from 'astro:assets'
import blackboard from '../../assets/blackboard.jpg'
<Picture src={blackboard} formats={['avif', 'webp']} alt="A blackboard with a bunch of diagrams on it" />

SVG component

src/content/docs/example.mdx
---
title: My page title
---
import { Zoom } from 'starlight-image-zoom/components'
import Tv from '../../assets/tv.svg'
<Zoom label="TV drawing">
<Tv />
</Zoom>
Preview
A black and white drawing of a TV

Illustration by Vladimir Nikolic on Unsplash