Bunny

Bijection component for file storage and CDN delivery with Bunny.net

Markdown ▾

View Markdown Download MarkdownOpen in ChatGPT ↗Open in Claude ↗Open in Perplexity ↗

Bijection source

git clone https://github.com/bijectionhq/bunny.git
cd bunny
git checkout 3575dd81fd63b0f84b2293ff6d5853f2a39c7e16

Bijection repository access is required. Request access.

Description

Bijection component for file storage and CDN delivery with Bunny.net

Explore the package README for API concepts, configuration, and examples. Check the Bijection source for adaptation-specific setup.

Available to evaluate

Review the source and its dependencies before adopting this package. Source availability does not establish npm publication or runtime qualification.

Getting started

Get the source at the revision above and read its package documentation.
Check the required Bijection SDK version, dependencies, and external service credentials.
Follow the package setup instructions and the guide to using components.
Exercise the component in your deployment according to your project’s verification rules.

Open source

Maintained source: bijectionhq/bunny. Based on lipaonline/convex-bunny. License: MIT. Consult the repository for license terms, notices, and contributor attribution.

From the upstream publisher

Convex component for file storage and CDN delivery with Bunny.net

Explore the demo ↗

Upstream overview

From the upstream package documentation.

A Convex component that integrates Bunny.net's global CDN and storage service with your Convex backend. Upload files through Convex actions, store metadata in your database for reactive queries, and serve content through Bunny's edge network. Supports all Bunny Storage regions and provides automatic CDN URL generation with file management capabilities.

Use cases

From the upstream package documentation.

Building a media-heavy application where you need global CDN delivery with sub-100ms response times across multiple continents
Creating a file upload system that requires reactive UI updates when files are added or removed, leveraging Convex's real-time database queries
Developing an app that needs cost-effective storage with CDN capabilities, using Bunny.net as an alternative to traditional cloud storage solutions
Building a content management system where you need to track file metadata in your database while serving actual files from a high-performance CDN
Creating a multi-tenant application where different regions need optimized file delivery through Bunny's regional storage zones

How it works

From the upstream package documentation.

The component wraps Bunny.net's Storage API within Convex actions and queries. You configure a BunnyStorage instance with your storage zone credentials and CDN hostname, then use methods like upload() in actions and listFiles() in queries. When files are uploaded, the component stores them in Bunny Storage via HTTP API calls and saves metadata in your Convex database.

File operations follow Convex's function model: uploads and deletions happen in actions (which can call external APIs), while file listing and metadata queries use standard Convex queries for real-time reactivity. The component automatically generates CDN URLs using your configured hostname and provides methods like getFileByKey() for retrieving stored metadata.

Setup involves registering the component in convex.config.ts, creating a BunnyStorage instance with your API credentials, and setting environment variables for your storage zone and CDN hostname. The component supports all Bunny Storage regions (DE, NY, LA, SG, SYD, BR, JH) through the region configuration option.

Upstream package FAQ

How do I get Bunny.net API credentials for the Convex Bunny Storage component?

Create a Storage Zone in your Bunny.net dashboard and copy the Storage Zone Password as your API key. You'll also need your CDN hostname in the format your-zone.b-cdn.net for the Convex Bunny Storage component configuration.

Can I query uploaded files reactively in Convex with this component?

Yes, the Convex Bunny Storage component stores file metadata in your Convex database automatically. You can use listFiles queries and getFile queries to reactively display file information in your frontend components.

What file formats can I upload through Convex Bunny Storage?

The Convex Bunny Storage component accepts base64-encoded file data with optional content-type specification. It supports any file format that Bunny Storage accepts, with files delivered through Bunny's global CDN infrastructure.

How does file deletion work with this Convex component?

The Convex Bunny Storage deleteFile action removes files from both Bunny Storage and your Convex database metadata. You can also use removeFileRecord to delete only the database record while keeping the CDN file.

Use with agents and CLI

View Skill

Give your coding agent the component’s source identity and setup guidance.

agent-prompt.md

Help me integrate Bunny with Bijection.

Read: https://bijection.com/components/bunny/SKILL.md

Check SDK compatibility and dependency availability.
Follow this project's execution and verification rules.

Download SKILL.md llms.txt

Upstream README.md

View repository ↗

Documentation from lipaonline/convex-bunny, recorded October 23, 2026. APIs and setup may differ in the Bijection adaptation.

convex-bunny

A Convex component for file storage and CDN delivery with Bunny.net.

Upload, manage, and serve files through Bunny.net's global CDN directly from your Convex backend.

Features

File Upload — Upload files to Bunny Storage via Convex actions
CDN Delivery — Automatic CDN URL generation for uploaded files
File Management — List, query, and delete files with metadata tracking
Multi-Region — Support for all Bunny Storage regions (DE, NY, LA, SG, SYD, BR, JH)
Metadata Tracking — File metadata stored in Convex for reactive queries

Installation

npm install convex-bunny

Setup

1. Register the component

In your convex/convex.config.ts:

import { defineApp } from "convex/server";
import bunny from "convex-bunny/convex.config";

const app = defineApp();
app.use(bunny);

export default app;

2. Create a component instance

In your convex/bunny.ts:

import { BunnyStorage } from "convex-bunny";
import { components } from "./_generated/api";

export const bunnyStorage = new BunnyStorage(components.bunny, {
  storageZone: process.env.BUNNY_STORAGE_ZONE!,
  apiKey: process.env.BUNNY_API_KEY!,
  cdnHostname: process.env.BUNNY_CDN_HOSTNAME!,
  region: "default", // optional: de, ny, la, sg, syd, br, jh
});

3. Set environment variables

npx convex env set BUNNY_STORAGE_ZONE your-storage-zone
npx convex env set BUNNY_API_KEY your-storage-api-key
npx convex env set BUNNY_CDN_HOSTNAME your-zone.b-cdn.net

4. Use in your functions

import { action, query } from "./_generated/server";
import { v } from "convex/values";
import { bunnyStorage } from "./bunny";

export const upload = action({
  args: {
    fileName: v.string(),
    fileData: v.string(), // base64 encoded
    contentType: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
    return await bunnyStorage.upload(ctx, {
      fileName: args.fileName,
      fileData: args.fileData,
      contentType: args.contentType,
      path: "uploads",
    });
  },
});

export const listFiles = query({
  args: {},
  handler: async (ctx) => {
    return await bunnyStorage.listFiles(ctx);
  },
});

export const deleteFile = action({
  args: { key: v.string() },
  handler: async (ctx, args) => {
    return await bunnyStorage.deleteFile(ctx, args.key);
  },
});

API Reference

`BunnyStorage(component, config)`

Config	Type	Required	Description
`storageZone`	`string`	Yes	Bunny Storage zone name
`apiKey`	`string`	Yes	Bunny Storage API key
`cdnHostname`	`string`	Yes	CDN hostname (e.g., `zone.b-cdn.net`)
`region`	`string`	No	Storage region (`default`, `ny`, `la`, `sg`, `syd`, `br`, `jh`)

Methods

Method	Context	Description
`upload(ctx, options)`	Action	Upload a file to Bunny Storage
`getFile(ctx, fileId)`	Query	Get file metadata by ID
`getFileByKey(ctx, key)`	Query	Get file metadata by storage key
`listFiles(ctx, options?)`	Query	List all files
`deleteFile(ctx, key)`	Action	Delete a file from Bunny + metadata
`removeFileRecord(ctx, fileId)`	Mutation	Remove metadata only
`checkFile(ctx, key)`	Action	Check if file exists on Bunny
`getCdnUrl(key)`	Sync	Generate CDN URL for a key

Getting a Bunny.net API Key

Sign up at bunny.net
Create a Storage Zone in the dashboard
Copy the Storage Zone Password (this is your API key)
Note your CDN hostname (e.g., your-zone.b-cdn.net)

Example App

See the example/ directory for a complete demo app with file upload UI.

cd example
npm install
npx convex dev  # Start Convex backend
npm run dev     # Start Vite frontend

License

MIT

Keywords

Bunny Storage

Related Components

Cloudflare R2

Cloudflare R2 file storage

bijectionhq

86.1K / week · upstream npm

StoragePreview

Static Hosting

Static application hosting

bijectionhq

16.2K / week · upstream npm

StoragePreview

File System

Durable file management on Bunny.net

bijectionhq

3.8K / week · upstream npm

StoragePreview

Files Control

A Bijection files control component for Bijection.

bijectionhq

6.1K / week · upstream npm

StoragePreview