VistaView: A Modern Lightweight Image Lightbox for the Web
VistaView is a zero-dependency, framework-agnostic image lightbox library that brings a smooth, modern viewing experience to your web projects. Whether you're building with React, Vue, Svelte, or vanilla JavaScript, VistaView has you covered.
Available themes include Dark Rounded, Midnight Ocean, Midnight Gold, Neon Nights, Retro Arcade, Ember Glow, Cotton Candy, Strawberry, Lavender Fields, Paper Light, Soft Neutral, Stark Minimal, and more!
Framework Integration
React
VistaView provides a React hook for seamless integration:
1import { useVistaView } from 'vistaview/react';
2import 'vistaview/style.css';
3
4function Gallery() {
5 const galleryRef = useVistaView({
6 controls: {
7 topRight: ['zoomIn', 'zoomOut', 'close'],
8 },
9 });
10
11 return (
12 <div ref={galleryRef}>
13 <a href="large-1.jpg">
14 <img src="thumb-1.jpg" alt="Image 1" />
15 </a>
16 <a href="large-2.jpg">
17 <img src="thumb-2.jpg" alt="Image 2" />
18 </a>
19 </div>
20 );
21}
Vue
For Vue developers, VistaView provides a composable:
1<script setup>
2import { useVistaView } from 'vistaview/vue';
3import 'vistaview/style.css';
4
5const galleryRef = useVistaView({
6 controls: {
7 topRight: ['zoomIn', 'zoomOut', 'close'],
8 },
9});
10</script>
11
12<template>
13 <div ref="galleryRef">
14 <a href="large-1.jpg">
15 <img src="thumb-1.jpg" alt="Image 1" />
16 </a>
17 </div>
18</template>
Svelte
Svelte users can use the action directive:
1<script>
2 import { useVistaView } from 'vistaview/svelte';
3 import 'vistaview/style.css';
4
5 const galleryRef = useVistaView({
6 controls: {
7 topRight: ['zoomIn', 'zoomOut', 'close'],
8 },
9 });
10</script>
11
12<div use:galleryRef>
13 <a href="large-1.jpg">
14 <img src="thumb-1.jpg" alt="Image 1" />
15 </a>
16</div>
Powerful Extensions
VistaView's extension system is where things get really interesting. Let's explore what you can do.
Video Platform Support
Embed videos from popular platforms directly in your lightbox:
1import { vistaView } from 'vistaview';
2import { youtubeVideo } from 'vistaview/extensions/youtube-video';
3import { vimeoVideo } from 'vistaview/extensions/vimeo-video';
Small bundle: ~10KB gzipped for core, extensions loaded on-demand
Zero dependencies: No bloat from third-party libraries
Browser Support
VistaView works on all modern browsers:
Chrome/Edge 90+
Firefox 88+
Safari 14+
Mobile browsers (iOS Safari, Chrome Android)
Try It Yourself
Check out the interactive demo to see VistaView in action with all themes and extensions.
Conclusion
VistaView makes it easy to add a beautiful, performant lightbox to any web project. With zero dependencies, extensive framework support, and powerful extensions, it's the modern solution for image viewing on the web.
Whether you're building a portfolio, a photo gallery, an e-commerce site, or any project that needs a great image viewing experience, VistaView has you covered.
