v5.0.0 RELEASE

Auto-Save & Animate
Whiteboards

Save drawings to local disk vaults with background auto-sync, animate GIFs and SVGs, render custom motion path flows, and browse the complete Iconify library directly inside Excalidraw.

⚡ INSTALL EXTENSION

* 100% Free, Secure & Open Source. Zero tracking. Local File System Access API.

🖼️

➔

🔥

👾

⚡ Core Features

v5.0 FEATURE

📁 Local Vault & Auto-Save

Connect any local folder on your computer as your drawing vault. Background debounced auto-sync (1.2s) automatically saves scene changes to standard .excalidraw files on disk. Features an in-canvas status pill (Synced / Saving...), slide-over file manager drawer with subfolders, breadcrumbs, favorites, search, and drag-and-drop file movement.

300K+ ICONS

🎨 Complete Iconify Library

Browse 200+ icon collections (Lucide, Tabler, Material, Phosphor, Font Awesome) directly via a glassmorphic sidebar panel. Star favorite icons, filter by collections or category (including native Animated SVGs), search instantly across 300,000+ icons, and drag-and-drop or click to paste SVGs. Open/close with the B shortcut.

10 MOTION STYLES

🌊 Line & Arrow Flows

Animate flows along paths and arrows on-demand. Choose from 10 motion styles: Particles, Marching Ants, Gradient Pulse, Ripple Wave, Packet Train, Snake Trail, Comet, Electricity, Wave, and Dual Flow. Fine-tune speed, direction, element size (1-5), spacing (20px-120px), and glow levels (None to Strong).

NATIVE PLAYBACK

👾 Real-time Playback

Watch GIFs loop directly on your board and run native SVG animations (SMIL/CSS). Independent playback switches in the extension popup dashboard let you turn GIF and SVG rendering on/off separately, with customizable speed multipliers (0.5x, 1x, 1.5x, 2x) for GIFs.

🕹️ Interactive Demonstration Board

Interact with the simulated Excalidraw whiteboard. Turn the simulated extension **ON** and **OFF** in the popup dashboard to see the live rendering system freeze or loop.

Iconify Library

📁 Local Vault

📂

Whiteboard is Empty

Spawn vector elements, drop stickers onto the board, or click the Synced vault button to open drawings!

ExcaliUp

v5.0.0

GIF Animations

Loop playback for canvas GIFs

Speed Multiplier:

SVG Playback

Native loops for animated SVGs

Flow Animations

Flow motion effects along paths

Active GIFs

Lines

Running

Status

💡

v5.0 Local Vault: Click the Synced button on the canvas to open your local folder drawer and manage drawings!

👾 Click to Spawn Pixel Stickers:

Pixel Heart

Retro Coin

Mini Ghost

📐 Spawn Vector Elements:

➔

Flow Arrow

⤳

Zigzag Flow

🌌

Need more animated stickers?

Check out our sister project, AstroFocus GIFs — a massive library of high-quality retro pixel-art animations, game sprites, and transparent loops!

🔧 Quick Installation Guide

Choose whether to install directly from the Chrome Web Store or run unpacked for local development:

Chrome Web Store

Visit the official Chrome Web Store listing and click Add to Chrome for one-click setup.

Or Load Unpacked

Clone the GitHub repo, open chrome://extensions, enable Developer Mode, and select the project root folder.

Connect & Sketch

Open excalidraw.com, click Excaliup-save to connect a local folder vault, and start drawing with flows & GIFs!

🧬 Native React & File System Hooks

Unlike standard canvas extensions that merely paste overlay widgets, Excali Up works natively with **Excalidraw's core engine and local disk APIs**:

Local File System Access: Uses the native File System Access API with IndexedDB handle caching to write standard .excalidraw JSON files directly to disk.
Debounced Auto-Sync: Watches canvas state mutations and serializes full scenes with a 1.2s inactivity debounce window.
Image Cache Interception: Hooks app.imageCache.set to swap static GIF/SVG assets with dynamic animated render loops.
React Fiber Traversal: Resolves component handles from .excalidraw__canvas.interactive to control scenes without full page refreshes.

Zero Dependencies Local-First Architecture

excaliup-core.js & inject.js

// Local Vault Debounced Auto-Save
function triggerAutoSave() {
  clearTimeout(autoSaveTimer);
  updateStatusButton('saving');
  autoSaveTimer = setTimeout(async () => {
    const scene = serializeScene(app.getSceneElements());
    await activeFileHandle.createWritable().then(w => {
      w.write(JSON.stringify(scene, null, 2));
      w.close();
    });
    updateStatusButton('synced');
  }, 1200);
}

❓ Frequently Asked Questions

How does the Local Vault & Auto-Save feature work?

Excali Up uses the browser's native File System Access API to connect directly to any local folder on your computer. When you draw or edit, your canvas is automatically debounced and saved into standard .excalidraw JSON files on your disk. You can organize folders, star favorite drawings, and switch between drawings instantly.

Are my drawings and files private?

Yes, 100%. Excali Up has no backend servers, telemetry, or third-party analytics. Directory handles are stored locally in your browser's IndexedDB, and drawing files are read and written strictly on your local disk.

Does this work on custom or self-hosted Excalidraw instances?

By default, the manifest matches https://excalidraw.com/*. To run on self-hosted instances of Excalidraw, you can edit the matches array in manifest.json to include your internal domain.

Will exported SVG/PNG files contain animations?

Standard Excalidraw exports generate static SVG and PNG files representing the current canvas frame. The animations loop dynamically inside your live Excalidraw canvas session.

Auto-Save & AnimateWhiteboards