Local File System Vault with Auto-Save, Animated GIFs and SVGs, Motion Flows, and the Complete Iconify Library for Excalidraw
Excali Up brings a native Local Vault auto-save file manager, animated GIF and SVG playback, per-element line and arrow motion flows, and a complete Iconify-powered icon library directly into Excalidraw.
Save and organize all your drawings locally on your computer using the native browser File System Access API:
- Direct Local Storage: Pick any local folder on your disk as your drawing vault. Drawings are saved as standard
.excalidrawJSON files. - Smart Background Auto-Sync: Debounced background saving (1.2s threshold) persists scene edits automatically without manual saves.
- In-Canvas Status Indicator: The
Excaliup-savebutton in the canvas top bar displays live sync state (Synced,Saving...,Reconnect Vault,Sync Error). - Slide-over File Manager Drawer:
- Folder Hierarchy & Breadcrumbs: Create subfolders, navigate breadcrumbs, and organize drawings across directories.
- Favorites & Starred Drawings: Star favorite drawings to access them instantly from a unified Starred view.
- Search & Management: Search drawings instantly across folders, rename files, and delete items with confirmation.
- Drag-and-Drop Relocation: Move drawings between folders or drag onto breadcrumb ancestor links.
- Instant Scene Switching: Click any drawing in the drawer to seamlessly load and switch active canvases.
Search and browse Iconify's open-source icon sets directly inside Excalidraw via a dedicated, glassmorphic toggle sidebar panel:
- All available packs: Browse more than 200 collections, including Material, Lucide, Tabler, Phosphor, Font Awesome, logos, emoji, and thematic sets.
- Library filters: Narrow packs by collection category and tags such as animated, stroke, precise shapes, and padding.
- Animated SVG category: Browse Iconify's animated collections separately and insert their native SVG animations onto the canvas.
- Favorite icons: Star frequently used icons and reopen them from the persistent Favorites view.
- Quick access: Press
Boutside text fields to open or close the Iconify Library. - Pagination system: Renders 96 items per page to prevent browser rendering bottlenecks and keep canvas performance high.
- Clean SVG click-to-copy: Copying an icon fetches its clean vector SVG directly, automatically converting hardcoded fills to current colors for theme compatibility, and pastes it onto the active canvas.
- Drag-and-drop support: Drag any icon directly from the sidebar grid and drop it exactly at your cursor position on the Excalidraw canvas.
- Canvas-ready sizing: Inserted icons use a readable 96px maximum dimension at 100% zoom while preserving their original aspect ratio.
- Global search: Search across more than 300,000 icons, or search within one selected pack.
- Dynamic theme matching: The sidebar automatically transitions between light and dark modes to synchronize with Excalidraw's theme state.
Select any arrow or line element on the canvas to reveal the Excali Up floating toolbar. Assign, toggle, or tune flow parameters on the fly without leaving your canvas:
- Opt-in per element: Animations only apply to elements you explicitly choose.
- Independent tuning: Different lines can have different styles, directions, and speeds simultaneously.
- Collapsible tuning panel: Click the gear icon to reveal slider and pill controls.
- Particles: Smooth dot flows traveling along paths.
- Marching Ants: Stylized dashed borders in motion.
- Gradient Pulse: Premium glowing gradient sweeps that flow like liquid neon energy.
- Ripple Wave: Concentric expanding ripple rings radiating down the paths.
- Packet Train: Oriented chevron-shaped data packets flowing in sequence.
- Snake Trail: Tapered trails that slither and fade along paths.
- Comet: Bright flowing heads with smooth, fading tails.
- Electricity: Jagged energy bolts that race along the path.
- Wave: A traveling sine wave that follows straight and curved elements.
- Dual Flow: Two offset particle lanes moving in opposite directions.
- Direction: Forward, Reverse, or Bounce (ping-pong animation).
- Speed: slow, medium, or fast motion factors.
- Element Size: Scale range from 1 to 5.
- Spacing: Gap distance between flow elements from 20px to 120px.
- Glow Intensity: Bloom levels (None, Subtle, Med, Strong).
- Drag and drop any GIF file to watch it render loops on the board.
- Insert an animated Iconify SVG and keep its native SMIL or CSS animation playing on the Excalidraw canvas.
- Enable GIF and animated SVG playback independently from the extension popup dashboard, with GIF speed multipliers of 0.5x, 1x, 1.5x, or 2x.
- Visit the Excali Up Chrome Web Store page.
- Click Add to Chrome.
- Navigate to excalidraw.com and start sketching!
- Download the source code: Clone this repository (
git clone https://github.com/klysman08/ExcaliGif.git) or download the release ZIP. - Open Extensions Page: In Google Chrome, navigate to
chrome://extensions/. - Enable Developer Mode: Toggle the Developer mode switch in the top-right corner.
- Load Unpacked: Click Load unpacked and select the repository root directory.
- Start Sketching: Go to excalidraw.com, connect your local vault folder, import GIFs, browse Iconify icons, or draw flowing animated arrows!
Excali Up injects a script into the page context (MAIN world) to access the underlying canvas and react context:
- React Fiber Hooking: It traverses the DOM starting from
.excalidraw__canvas.interactiveto find its React Fiber node (__reactFiber$...), climbing up to locate the active Excalidraw stateNode which manages the canvas state. - Image Cache Interception: It hooks the Excalidraw
imageCache.setmethod to identify GIF and animated SVG image entries. - Animated Media Runtime: GIF bytes are decoded frame-by-frame with
omggif.js. Animated SVGs run natively in isolated DOM overlays synchronized with their Excalidraw image elements, avoiding continuous scene redraws while preserving SMIL and CSS timelines. - Active Canvas Swap: The static
HTMLImageElementin Excalidraw's cache is replaced with a single dynamicHTMLCanvasElementmanaged by the extension. - Floating Toolbar & Canvas Overlay: The extension overlays a secondary canvas aligned with the interactive canvas. Selecting an element triggers the DOM injection of the floating toolbar panel. Real-time offsets are recalculated per frame on the overlay.
- Local Vault System: Stores directory handles in IndexedDB, automatically serializes canvas scenes to valid
.excalidrawschema files, and provides an in-memory & file system navigator. - State Persistence: Element settings and Iconify favorites are persisted in
localStorage. They are automatically loaded when refreshing the page. Deleted elements are cleaned up from the animation store. - Iconify Icon Library: A locally packaged Iconify web component renders previews, while Iconify's collection, search, and SVG APIs provide pack metadata, filtered results, and clean vectors for copy and drag operations.
To experience a simulator of this extension and play around with retro sound effects and pixel styles, visit the Excali Up website.
Follow development on GitHub or buy me a coffee.
Need a steady source of animated pixel art or sprites to add to your Excalidraw board? Check out our sister project AstroFocus GIFs — a curated search engine and library of high-quality pixel-art animations, sprites, and transparent loops!
This project is licensed under the MIT License.