Installation

VistaView is a lightweight image lightbox library that can be installed via npm or used directly from a CDN.

Package Manager Installation

npm

npm install vistaview

yarn

yarn add vistaview

pnpm

pnpm add vistaview

bun

bun add vistaview

CDN Installation

For quick prototyping or non-bundler environments, use the UMD build via CDN. Use these URLs for the latest published version:

unpkg

<link rel="stylesheet" href="https://unpkg.com/vistaview/main/dist/style.css" />
<script src="https://unpkg.com/vistaview/main/dist/vistaview.umd.js"></script>

jsDelivr

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vistaview/main/dist/style.css" />
<script src="https://cdn.jsdelivr.net/npm/vistaview/main/dist/vistaview.umd.js"></script>

Bundle Sizes

VistaView is lightweight and optimized for production. Bundle sizes are for v2:

• Core Library (ESM): 0.71 KB (0.24 KB gzip)
• Core Library (UMD): 40.16 KB (10.73 KB gzip)
• CSS: 7.71 KB (1.80 KB gzip)

Browser Support

VistaView works in all modern browsers:

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

Framework Integrations

VistaView provides official bindings for popular frameworks. Each integration ships a component (recommended) and a hook/composable for more advanced use cases:

• React – VistaView component + useVistaView hook, exports VistaViewProps and VistaComponentRef types
• Vue 3 – VistaView component + useVistaView composable, exports VistaViewProps and VistaComponentRef types
• Svelte – VistaView component + useVistaView hook, exports VistaViewProps and VistaComponentRef types
• Solid – VistaView component + useVistaView hook, exports VistaViewProps type
• Vanilla JS – Direct vistaView() API, no wrapper needed

All framework packages are imported from the same vistaview package using subpath exports:

import { VistaView, useVistaView } from 'vistaview/react';
import { VistaView, useVistaView } from 'vistaview/vue';
import { VistaView, useVistaView } from 'vistaview/svelte';
import { VistaView, useVistaView } from 'vistaview/solid';

Next Steps

• Follow an Integration guide for your framework
• Explore configuration options
• Learn about extensions