Zone5 Documentation

Build optimized image galleries for SvelteKit with automatic processing, lightbox, and EXIF metadata.

Getting Started

New to Zone5? Start here:

• Getting Started Tutorial - Create your first gallery in 5 minutes
• Add to Existing Project - Integrate Zone5 into a SvelteKit app

How-To Guides

Task-oriented guides for common needs:

Configuration

• Customize Image Variants - Adjust sizes for your use case
• Configure Caching - Optimize build performance
• Use Different Package Managers - npm, pnpm, yarn, bun

Reference

Complete API documentation:

Core

• Configuration - .zone5.toml options
• Component Props - Zone5, Zone5Img, Zone5Lightbox props
• CLI Commands - zone5 create command

Plugins

• Vite Plugin API - Build-time processing
• Remark Plugin API - Markdown image transformation

Data

• ItemFeature Schema - GeoJSON output format
• Package Exports - Import paths

UI

• Keyboard Shortcuts - Lightbox navigation

Explanation

Understand the design and architecture:

Architecture

• Architecture Overview - How the four systems connect
• Image Processing Pipeline - Variants, blurhash, EXIF

Design Decisions

• GeoJSON Format Choice - Why ItemFeature uses GeoJSON
• Caching Strategy - Hash-based invalidation

Implementation

• Registry State Management - Cross-gallery navigation
• Vite Module Resolution - Virtual modules and ?z5

Quick Links

Installation

# Create a new project
npx zone5 create my-gallery --input ~/photos

# Or add to existing project
npm install zone5

Basic Usage

<script>
  import { Zone5, Zone5Provider, Zone5Lightbox } from 'zone5/components';
  import photo from './photo.jpg?z5';
</script>

<Zone5Provider>
  <Zone5 images={[photo]} />
  <Zone5Lightbox />
</Zone5Provider>

Configuration

# .zone5.toml
[processor]
widths = [640, 768, 1280, 1920, 2560]