Local Storage

Parallax Designer stores images and custom presets locally in the browser using IndexedDB, accessed through the Dexie library. No server-side storage is involved.

Database

Property	Value
Database	parallax-designer-assets-v2
Library	Dexie 4.x
Tables	assets, customPresets

The database is defined in src/core/assetDb.ts.

Image Assets

The following sequence shows the complete lifecycle for uploading and resolving local images:

Upload Flow

1. User clicks the upload button in the layer's Basic tab
2. A file dialog opens (via VueUse useFileDialog)
3. The selected image is stored as a blob in the assets IndexedDB table
4. The layer's imageSrc is set to idb://asset/<id> where <id> is the auto-generated database key

Resolution Flow

The useLayerAssets composable watches the project for idb:// references and resolves them:

1. On project load or layer change, all idb://asset/<id> references are collected
2. For each reference, the corresponding blob is loaded from IndexedDB
3. A browser object URL is created via URL.createObjectURL(blob)
4. The object URL is stored in a reactive Map and used by ParallaxScene.vue for rendering
5. Object URLs are revoked (URL.revokeObjectURL) on cleanup to free memory

Missing Asset Detection

If a layer references an idb:// asset that no longer exists in IndexedDB (e.g., the database was cleared or the project was imported on a different browser), a toast notification warns the user about the missing asset.

In-Use Protection

The UI tracks which assets are referenced by current project layers. Referenced assets show an "in use" indicator and cannot be accidentally deleted.

Asset Management

From the UI, users can:

• View all stored assets
• Select an asset to apply to a layer
• Delete individual assets (with confirmation, blocked if in use)
• Clear all local data (assets + presets) from the danger zone

Custom Presets

Custom presets are stored in the customPresets table:

Field	Type	Description
id	number	Auto-incremented primary key
name	string	User-assigned preset name
project	object	Full ParallaxDesignerProject snapshot
createdAt	number	Creation timestamp (epoch ms)
updatedAt	number	Last update timestamp (epoch ms)
layerCount	number	Number of layers in the snapshot

Custom presets are managed by useProjectIO and are not included in JSON exports — they are local to the browser profile.

Portability

WARNING

idb://asset/<id> references in exported JSON are valid only in the browser profile that contains the corresponding IndexedDB records. When sharing projects, recipients will need to re-upload any locally referenced images.

The Copy JSON export preserves these references as-is and surfaces a portability warning to the user.

Download HTML handles local references through an export modal:

• Inline IDB Images: local blobs are converted to data URLs and embedded in the downloaded runtime HTML
• Use Blank Placeholders: local refs are replaced with transparent placeholders

Missing local assets are exported as blank placeholders with warning feedback.

localStorage

A single localStorage key is used:

Key	Value	Purpose
parallax-designer-locale	Locale code	UI language preference (not part of project data)