The snippet JSON problem nobody talks about
VS Code snippets are one of those features I kept meaning to use more. The concept is great — define a shorthand, tab-expand it, done. But every time I actually sat down to add a new one, I'd open keybindings.json, realize I meant snippets/javascript.json, navigate there, squint at the JSON structure, try to remember where the body array goes versus the prefix key, mess up the escape sequences, and then half an hour later wonder why I bothered.
The files themselves aren't complicated. But there's enough friction — enough "wait, was it tabTrigger or prefix?" — that I kept putting it off. And when I did add snippets, I barely maintained them because editing them was annoying enough the first time.
What LiveTem does
I built LiveTem to remove that friction entirely. It adds a sidebar panel to VS Code with a form-based UI for creating and editing snippets. You fill in a name, a prefix, an optional description, and pick a language scope. The snippet body gets its own embedded Monaco editor — the same editor that powers VS Code itself — so you get syntax highlighting and a real editing experience, not a textarea.
When you hit save, LiveTem writes the correct JSON to the right snippet file for you. No manual file navigation, no escaping newlines by hand, no guessing at the schema. It also tracks unsaved changes and flags them visually so you don't accidentally close a tab mid-edit.
The result is that adding a snippet now takes about 30 seconds instead of 5 minutes of low-grade frustration.
How I built it
The extension is two separate environments talking to each other: a TypeScript extension host running in Node.js, and a React + Vite webview rendered in a sandboxed iframe inside VS Code.
Getting those two sides to communicate cleanly took some work. The extension host reads and writes snippet files on disk and passes data to the webview via postMessage. The webview handles all the UI — built in React — and fires messages back when the user saves or switches snippets. It's a familiar pattern once you've done it, but the VS Code webview docs have a few gotchas that aren't obvious until you hit them, especially around message serialization and security boundaries.
The real headache was the Content Security Policy. VS Code's webview sandbox is strict by default, and Monaco Editor has some runtime requirements that tripped CSP violations I didn't expect. I spent longer than I'd like to admit reading error messages like Refused to execute inline script and tracing them back to specific Monaco internals. The fix involved carefully tuning the CSP header the extension sets when initializing the webview — allowing exactly what Monaco needs, nothing more. Not glamorous work, but the kind of thing that makes the extension actually function reliably instead of breaking silently in someone else's setup.
The webview itself is built with Vite, which made the development loop fast. The extension host is standard TypeScript compiled with tsc. Two separate build steps, one extension.
Try it out
If any of this sounds useful, you can install LiveTem directly from the VS Code Marketplace:
The source is also on GitHub if you want to poke around, report a bug, or suggest something:
I'd genuinely like to hear what you think — especially if there's a workflow around snippets that this doesn't cover yet. Leave a comment here or open an issue on the repo. Still early days on this one.
Top comments (0)