[opensourcedex]

PicImpact is a free, open source photo & video editors project written in TypeScript and released under MIT. It has 1,303 GitHub stars, 213 forks and 26 open issues, and was last pushed 3 months ago. On this registry it ranks #30 of 32 tracked projects in Photo & Video Editors, with 5 head-to-head comparisons available.

What is PicImpact?

PicImpact is a self-deployable photography portfolio website built with Next.js and Hono.js, for photographers and small teams who want to publish and share image collections from infrastructure they control.

What it is

PicImpact is an open-source photography portfolio and image-sharing application written in TypeScript and released under the MIT licence. The front end runs on Next.js with Radix and shadcn/ui components, the server layer on Hono.js, PostgreSQL through Prisma, and authentication through better-auth. It ships as a complete site rather than a component library: a masonry gallery, a WebGL image viewer, a map view, an RSS feed, and an admin dashboard for statistics, uploads, image and album management, settings, and storage configuration.

The problem it solves is the split that appears when a photographer wants rich presentation — Live Photos, EXIF metadata, geotagged map markers, tag filtering, direct links to originals — without handing the library and its metadata to a hosted service. PicImpact keeps images in storage the operator already owns, whether that is an S3-compatible bucket, Cloudflare R2, or an Open List API endpoint, and keeps the catalogue in a PostgreSQL database the operator runs. It stands in for a managed third-party portfolio or photo-hosting account: the same gallery experience, on the photographer's own domain, with the data under their control.

Key capabilities

  • Masonry gallery with Live Photos support implemented through Apple's LivePhotosKit JS.
  • WebGL image viewer with smooth zoom and pan, using tiling and LOD to keep large images responsive; based on Afilmory.
  • Map module plotting photos from the latitude and longitude stored in their EXIF data.
  • Full-resolution preview with EXIF metadata display and direct link access to the original file.
  • Storage backends covering the S3 API, Cloudflare R2, and the Open List API.
  • Tag binding and interactive tag filtering, with RSS output supporting Follow subscriptions and feed ownership verification.
  • Batch automated upload that generates a 0.3x compressed preview at upload time.
  • Admin dashboard for statistics, upload, image maintenance, album management, settings, and storage config, with automatic database initialisation and migration via Prisma; two-factor TOTP per RFC 6238 (Google Authenticator, Microsoft Authenticator, 1Password) and Passkey login via WebAuthn.

Who uses it and how

  • Solo photographers running a single portfolio on Vercel with a PostgreSQL connection string and a Cloudflare R2 bucket.
  • Small studios where several people share the admin dashboard for uploads, album organisation, and storage settings, with TOTP or Passkey protecting access.
  • Operators who want the gallery inside their own cluster, deployed through Docker or Kubernetes with the Node.js build, and who already run S3-compatible object storage.
  • Audiences following the photographer's output through the RSS feed in Follow, and browsing the library by tag.

Getting started

Deploy to Vercel with the build command set to pnpm run build:vercel, or build for Node.js with pnpm run build:node, or run it through Docker and Kubernetes. Local development is git clone, then pnpm i and pnpm run dev; production needs DATABASE_URL, DIRECT_URL for prisma migrate, BETTER_AUTH_SECRET from npx auth secret, BETTER_AUTH_URL, and the two passkey relying-party values.

How it compares

PicImpact builds on Afilmory's WebGL viewer rather than competing with it, so teams familiar with that rendering approach meet it inside a fuller site with admin, storage, and authentication. It pairs with Follow as the RSS client and with Apple's LivePhotosKit JS for Live Photos, bundling gallery, geotagging, tags, feeds, and login into one deployment where those parts are usually separate.

When to use it — and when not to

A self-hoster must run PostgreSQL, keep at least one storage backend such as an S3-compatible bucket, Cloudflare R2, or an Open List endpoint, manage the auth secrets, and serve over HTTPS, because Passkey login needs a secure context and only localhost is excepted in development. Anyone wanting a hosted service with no database or build step should look elsewhere. Documentation is the weak point: the README is detailed but points to two different documentation hostnames, and with no published installable package and 26 open issues, expect to read the source.

project readme (upstream, from github) — read inline

PicImpact

License ESLint Docker Build Repo Size

简体中文 | English | 日本語

简体中文

PicImpact 是一个支持自部署的摄影作品展示网站，基于 Next.js + Hono.js 开发。

功能特性

  • 瀑布流相册展示图片，支持实况照片(Live Photos)，基于 LivePhotosKit JS 开发。
  • 基于 WebGL 的高性能图片查看器，支持流畅的缩放和平移，采用图片分块（Tiling）和 LOD 技术优化大图加载性能。
  • 支持地图模组标记图片，根据图片经纬度标记在地图上。
  • 点击图片查看原图，浏览图片信息和 EXIF 信息，支持直链访问。
  • 响应式设计，在 PC 和移动端都有不错的体验，支持暗黑模式。
  • 图片存储兼容 S3 API、Cloudflare R2、Open List API。
  • 图片支持绑定标签，并且可通过标签进行交互，筛选标签下所有图片。
  • 支持输出 RSS，可以使用 Follow 订阅，并支持订阅源所有权验证。
  • 支持批量自动化上传，上传图片时会生成 0.3 倍率的压缩图片，以提供加载优化。
  • 后台有图片数据统计、图片上传、图片维护、相册管理、系统设置和存储配置功能。
  • 双因素认证功能，基于 TOTP 算法 RFC 6238，支持 Google Authenticator、Microsoft Authenticator 和 1Password 等。
  • Passkey 无密码登录功能，基于 WebAuthn 标准，支持生物识别（指纹、面容等）和硬件安全密钥登录。
  • 基于 SSR 的混合渲染，采用状态机制，提供良好的使用体验。
  • 基于 Prisma 的自动初始化数据库和数据迁移，简化部署流程。
  • 支持 Vercel 部署、Node.js 部署、Docker 等容器化部署，当然 k8s 也支持。

如何部署

你可以点击下面的按钮来一键部署到 Vercel，然后将 Build Command 设置为 pnpm run build:vercel，也可以 Fork 项目后手动部署到任何支持的平台。

我们推荐当新版本发布时您再进行版本更新！

Deploy with Vercel

Key 备注
DATABASE_URL PostgreSQL 连接字符串，如使用 Supabase：postgres://postgres.[project]:[password]@aws-0-[region].pooler.supabase.com:6543/postgres?pgbouncer=true
DIRECT_URL 用于 prisma migrate 的直连地址，非 serverless 数据库与 DATABASE_URL 保持一致即可
BETTER_AUTH_SECRET 权限机密，执行 npx auth secret 生成随机字符串
BETTER_AUTH_URL 访问地址，如：https://example.com
BETTER_AUTH_PASSKEY_RP_ID Passkey 依赖方标识符，填写您的域名，如：example.com
BETTER_AUTH_PASSKEY_RP_NAME Passkey 依赖方名称，如：PicImpact

Vercel 部署将 Build Command 设置为 pnpm run build:vercel，Node.js 自行部署使用 pnpm run build:node。

Passkey 功能依赖 HTTPS 环境（本地开发可使用 localhost）。

更多详细配置请查阅文档。

本地开发

git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev

技术栈

类别 技术
Web 框架 Next.js + Hono.js
UI Radix + shadcn/ui
数据库 PostgreSQL + Prisma
认证 better-auth (Email/Password, TOTP, WebAuthn)
图片渲染 WebGL 查看器（基于 Afilmory）

English

PicImpact is a self-deployable photography portfolio website built with Next.js + Hono.js.

Features

  • Masonry gallery layout with Live Photos support via LivePhotosKit JS.
  • High-performance WebGL image viewer with smooth zoom/pan, tiling, and LOD optimization.
  • Map module for geotagging photos based on EXIF coordinates.
  • Full-resolution image preview with EXIF metadata and direct link access.
  • Responsive design with dark mode support for both desktop and mobile.
  • Storage compatible with S3 API, Cloudflare R2, and Open List API.
  • Tag-based image organization with interactive tag filtering.
  • RSS feed output with Follow subscription and ownership verification.
  • Batch upload with automatic 0.3x compressed preview generation.
  • Admin dashboard: statistics, upload, image management, album management, settings, and storage config.
  • Two-factor authentication via TOTP (RFC 6238), supporting Google Authenticator, Microsoft Authenticator, 1Password, etc.
  • Passkey passwordless login via WebAuthn standard (biometrics, hardware keys).
  • SSR-based hybrid rendering with state management for optimal UX.
  • Automatic database initialization and migration via Prisma.
  • Deployable on Vercel, Node.js, Docker, and Kubernetes.

Deployment

Click the button below to deploy to Vercel. Set Build Command to pnpm run build:vercel.

Deploy with Vercel

Key Description
DATABASE_URL PostgreSQL connection string
DIRECT_URL Direct connection for prisma migrate (same as DATABASE_URL for non-serverless)
BETTER_AUTH_SECRET Auth secret, generate with npx auth secret
BETTER_AUTH_URL App URL, e.g., https://example.com
BETTER_AUTH_PASSKEY_RP_ID Passkey relying party ID (your domain, e.g., example.com)
BETTER_AUTH_PASSKEY_RP_NAME Passkey relying party name (e.g., PicImpact)

For more details, see the documentation.

Local Development

git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev

Tech Stack

Category Technology
Web Framework Next.js + Hono.js
UI Radix + shadcn/ui
Database PostgreSQL + Prisma
Auth better-auth (Email/Password, TOTP, WebAuthn)
Image Rendering WebGL Viewer (based on Afilmory)

日本語

PicImpact は、Next.js + Hono.js で構築されたセルフデプロイ可能な写真ポートフォリオサイトです。

機能

  • マソンリーレイアウトのギャラリー。ライブフォト(Live Photos) に対応（LivePhotosKit JS ベース）。
  • WebGL ベースの高性能画像ビューア。スムーズなズーム・パン操作、タイリングと LOD による大画像の最適化。
  • 地図モジュールで EXIF の座標情報に基づいて写真をマッピング。
  • 画像クリックで原寸表示、EXIF メタデータの閲覧、ダイレクトリンクに対応。
  • レスポンシブデザイン、ダークモード対応（PC・モバイル両対応）。
  • S3 API、Cloudflare R2、Open List API に対応したストレージ。
  • タグベースの画像整理とインタラクティブなタグフィルタリング。
  • RSS フィード出力、Follow による購読と所有権検証に対応。
  • バッチアップロード、0.3 倍率の圧縮プレビュー自動生成。
  • 管理画面：統計、アップロード、画像管理、アルバム管理、設定、ストレージ設定。
  • TOTP 二要素認証（RFC 6238）、Google Authenticator / Microsoft Authenticator / 1Password 等に対応。
  • WebAuthn 標準による Passkey パスワードレスログイン（生体認証、ハードウェアキー）。
  • SSR ベースのハイブリッドレンダリング。
  • Prisma によるデータベースの自動初期化とマイグレーション。
  • Vercel、Node.js、Docker、Kubernetes でのデプロイに対応。

デプロイ

以下のボタンで Vercel にデプロイできます。Build Command を pnpm run build:vercel に設定してください。

Deploy with Vercel

Key 説明
DATABASE_URL PostgreSQL 接続文字列
DIRECT_URL prisma migrate 用の直接接続（サーバーレスでなければ DATABASE_URL と同じ）
BETTER_AUTH_SECRET 認証シークレット、npx auth secret で生成
BETTER_AUTH_URL アプリの URL、例：https://example.com
BETTER_AUTH_PASSKEY_RP_ID Passkey の RP ID（ドメイン名、例：example.com）
BETTER_AUTH_PASSKEY_RP_NAME Passkey の RP 名（例：PicImpact）

詳細はドキュメントをご覧ください。

ローカル開発

git clone https://github.com/besscroft/PicImpact.git
pnpm i
pnpm run dev

技術スタック

カテゴリ 技術
Web フレームワーク Next.js + Hono.js
UI Radix + shadcn/ui
データベース PostgreSQL + Prisma
認証 better-auth (Email/Password, TOTP, WebAuthn)
画像レンダリング WebGL ビューア（Afilmory ベース）

Contributing

New Ideas & Bug Reports | Fork & Pull Request

PicImpact welcomes all contributions including improvements, new features, documentation, and bug reports.

Browser Support

  • Last 2 versions of Chrome, Firefox, Safari and Edge
  • Firefox ESR

Accessibility

Based on WAI-ARIA standards.

Acknowledgements

This project uses JetBrains open source license, developed with IntelliJ IDEA.

JetBrains logo

WebGL image viewer based on Afilmory webgl-viewer module (MIT License).

License

PicImpact is open source software licensed as MIT.

Frequently asked questions

Is PicImpact free to use?

PicImpact is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does PicImpact do?

自部署的摄影作品网站，支持多种功能特性。PicImpact，分享你和世界！

What is PicImpact written in?

PicImpact is primarily written in TypeScript. Its source is publicly available at https://github.com/besscroft/PicImpact, and it has 1,303 GitHub stars.