VistaView - A Modern Lightweight Image Lightbox for the Web

Tri Rahmat Gunadi — Wed, 07 Jan 2026 20:31:55 +0000

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.

Docs: https://vistaview.jujiplay.com/

Why VistaView?

🪶 Lightweight: Zero dependencies, minimal footprint (~10KB gzipped)
🎨 Beautiful: 17+ pre-built themes with smooth animations
🔌 Extensible: Support for YouTube, Vimeo, Dailymotion, Wistia, Vidyard, Streamable, and more
🎯 Framework Agnostic: Works with React, Vue, Svelte, Solid, or vanilla JS
📱 Responsive: Touch-friendly and mobile-optimized
♿ Accessible: Keyboard navigation and ARIA support
🗺️ Maps Integration: Google Maps, Mapbox, and OpenStreetMap support

Quick Start

Installation

npm install vistaview

Basic Usage

import { vistaView } from 'vistaview';
import 'vistaview/style.css';

vistaView({
  elements: 'a.gallery',
});

<a href="image-large.jpg" class="gallery">
  <img src="image-thumb.jpg" alt="Beautiful landscape" />
</a>

That's it! Your images now open in a beautiful lightbox with smooth transitions.

Themes

VistaView comes with 17 carefully crafted themes. Simply import the theme CSS:

import 'vistaview/dist/styles/midnight-ocean.css';
import 'vistaview/dist/styles/neon-nights.css';
import 'vistaview/dist/styles/cotton-candy.css';
// ... and 14 more!

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

import { useVistaView } from 'vistaview/react';
import 'vistaview/style.css';

function Gallery() {
  const galleryRef = useVistaView({
    controls: {
      topRight: ['zoomIn', 'zoomOut', 'close'],
    },
  });

  return (
    <div ref={galleryRef}>
      <a href="large-1.jpg">
        <img src="thumb-1.jpg" alt="Image 1" />
      </a>
      <a href="large-2.jpg">
        <img src="thumb-2.jpg" alt="Image 2" />
      </a>
    </div>
  );
}

Vue

<script setup>
import { useVistaView } from 'vistaview/vue';
import 'vistaview/style.css';

const galleryRef = useVistaView({
  controls: {
    topRight: ['zoomIn', 'zoomOut', 'close'],
  },
});
</script>

<template>
  <div ref="galleryRef">
    <a href="large-1.jpg">
      <img src="thumb-1.jpg" alt="Image 1" />
    </a>
  </div>
</template>

Svelte

<script>
  import { useVistaView } from 'vistaview/svelte';
  import 'vistaview/style.css';

  const galleryRef = useVistaView({
    controls: {
      topRight: ['zoomIn', 'zoomOut', 'close'],
    },
  });
</script>

<div use:galleryRef>
  <a href="large-1.jpg">
    <img src="thumb-1.jpg" alt="Image 1" />
  </a>
</div>

Extensions

VistaView's extension system lets you add powerful features:

Video Platform Support

import { vistaView } from 'vistaview';
import { youtubeVideo } from 'vistaview/extensions/youtube-video';
import { vimeoVideo } from 'vistaview/extensions/vimeo-video';

vistaView({
  elements: '.gallery a',
  extensions: [
    youtubeVideo(),
    vimeoVideo(),
  ],
});

Now your gallery can display YouTube and Vimeo videos directly:

<a href="https://www.youtube.com/watch?v=VIDEO_ID">
  <img src="thumbnail.jpg" alt="Video thumbnail" />
</a>

Supported video platforms:

YouTube
Vimeo
Dailymotion
Wistia
Vidyard
Streamable

Image Story

Add descriptions and stories to your images:

import { imageStory } from 'vistaview/extensions/image-story';
import 'vistaview/dist/styles/extensions/image-story.css';

vistaView({
  elements: '.gallery a',
  extensions: [
    imageStory({
      getStory: async (index) => ({
        content: `<p>Description for image ${index + 1}</p>`,
      }),
    }),
  ],
  controls: {
    bottomCenter: ['imageStory'],
  },
});

Download

Let users download images:

import { download } from 'vistaview/extensions/download';

vistaView({
  elements: '.gallery a',
  extensions: [download()],
  controls: {
    topRight: ['download', 'close'],
  },
});

Maps Integration

Display interactive maps in your lightbox:

import { googleMaps } from 'vistaview/extensions/google-maps';
import { openStreetMap } from 'vistaview/extensions/openstreetmap';

vistaView({
  elements: '.gallery a',
  extensions: [
    googleMaps({ apiKey: 'YOUR_API_KEY' }),
    openStreetMap(),
  ],
});

<a href="https://www.google.com/maps/@40.7128,-74.0060,15z">
  <img src="map-thumbnail.jpg" alt="New York City" />
</a>

Advanced Configuration

Custom Controls

Position controls exactly where you want them:

vistaView({
  elements: '.gallery a',
  controls: {
    topLeft: ['counter'],
    topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
    bottomCenter: ['imageStory'],
  },
});

Responsive Images

Support multiple image resolutions:

<a href="large.jpg" 
   data-vistaview-srcset="medium.jpg 800w, large.jpg 1600w, xlarge.jpg 2400w">
  <img src="thumb.jpg" alt="Responsive image" />
</a>

Real-World Example

Here's a complete example with multiple extensions:

import { vistaView } from 'vistaview';
import { youtubeVideo } from 'vistaview/extensions/youtube-video';
import { vimeoVideo } from 'vistaview/extensions/vimeo-video';
import { download } from 'vistaview/extensions/download';
import { imageStory } from 'vistaview/extensions/image-story';
import 'vistaview/style.css';
import 'vistaview/dist/styles/midnight-ocean.css';
import 'vistaview/dist/styles/extensions/image-story.css';

vistaView({
  elements: '.my-gallery a',
  controls: {
    topRight: ['zoomIn', 'zoomOut', 'download', 'close'],
    bottomCenter: ['imageStory'],
  },
  extensions: [
    youtubeVideo(),
    vimeoVideo(),
    download(),
    imageStory({
      getStory: async (index) => ({
        content: `
          <h3>Image ${index + 1}</h3>
          <p>This is a beautiful photo taken in 2024.</p>
        `,
      }),
    }),
  ],
});

Performance

VistaView is designed for performance:

Lazy loading: Images load only when needed
Smooth animations: Hardware-accelerated CSS transforms
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 Out

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.

Give it a try and let me know what you think! ⭐

Built with ❤️ by juji

DEV Community: Tri Rahmat Gunadi