Saved!
Gentle, non-intrusive visual feedback when you save a file. A calm acknowledgment instead of silence.
No hacks: unlike workbench-styling approaches that need the Custom CSS loader, admin rights, and re-patching after every update, Saved! uses only the official VS Code extension API. Install it and it just works — and keeps working.
Effects
Choose with the saved.effect setting:
| Effect |
What you see |
reassure (default) |
A soft green circle shrinks into your cursor — the save converges into your work. |
breath |
A gentle green wash over the visible code fades in and out, like the editor taking a breath. |
reassure-breath |
Both at once. |
statusbar |
Just a brief ✦ saved pulse in the status bar. |
none |
Nothing (extension stays idle). |
saved.durationMs (default 480) controls how long the effect lasts.
When the saved file isn't visible in any editor (e.g. Save All, or saving settings), the editor effects fall back to the status bar pulse.
How it works
The editor effects are rendered through TextEditorDecorationType — the same sanctioned API that draws squiggles and search highlights:
- The reassure circle is an animated SVG (SMIL), generated in code as a data URI and attached as the background image of a decoration pseudo-element anchored at your cursor (a technique pioneered by vscode-power-mode).
- The breath wash is a sequence of whole-line background decorations with eased opacity.
No DOM access, no injected stylesheets, no modified installation files.
Origin
Extracted from Programmers Are People Too, a Basel Hack 2025 project about positive reinforcement for developers.
Development
npm install
npm run compile # or: npm run watch
Press F5 in VS Code to launch an Extension Development Host, or package with npx vsce package and install the .vsix.
License
MIT
