v5.5.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

REDESIGNED IN v5.5

📁 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 button, a theme-aware file manager with subfolders, breadcrumbs, All / Starred / Recent views, vault-wide search, keyboard navigation, drag-and-drop file movement, and protection against accidental overwrites.

300K+ ICONS

🎨 Complete Iconify Library

Browse 200+ icon collections (Lucide, Tabler, Material, Phosphor, Font Awesome) directly via a sidebar panel. Star favorite icons, filter by collections or category (including native Animated SVGs), search instantly across 300,000+ icons, and click or drag icons onto the canvas in your stroke color at S, M, or L size. Open/close with the B shortcut.

8 MOTION STYLES

🌊 Line & Arrow Flows

Animate flows along paths and arrows on-demand. Choose from 8 motion styles: Particles, Marching Ants, Gradient Pulse, Ripple Wave, Packet Train, Comet, Wave, and Dual Flow. Give each effect its own color, and fine-tune speed, direction, element size (1-5), spacing (20px-120px), and glow levels (None to Strong). A new batched renderer makes the heaviest effects up to 10x faster.

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.5.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.5: Open the redesigned Local Vault from the canvas, and give each animated arrow its own color!

👾 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 the Vault button next to the menu to connect a local folder, 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