Custom snippets
The gallery shows the components Snapds discovers in your packages. Custom
snippets let you save your own code the same way — a configured pair of
buttons wrapped in a Label, a form layout, any pattern you reach for again and
again — and then drag or inject it back later, imports included.
Capturing a snippet
- Select the code in a React file (
.tsx/.jsx). - Trigger the capture:
- press
⌃⌥⌘S(macOS) orCtrl+Shift+Alt+S(Windows / Linux) with text selected, or - right-click the selection → Save Selection as Snippet.
- press
- In the modal, give it a name, an optional description, and a category — pick an existing one or type a new one. Leaving it blank files the snippet under Uncategorized.
- Review the imports. Snapds parses the file and pre-fills every import your selection actually references; untick any you don’t want, edit them, or add your own.
- Choose where it lives (see Storage) and save.
Snapds captures from and injects into React files in this release
(javascriptreact / typescriptreact). The capture shortcut and menu item only
appear when text is selected in one.
Using a snippet
Saved snippets appear under a second Custom Snippets tab in the gallery — it becomes available as soon as you have one — grouped by category.
- Drag a snippet into a React file, or
- open Insert (
⌃⌥⌘I) and pick it from the Custom Snippets section.
Either way the snippet’s code is inserted at the cursor and its imports are added
to the top of the file — merged into existing import lines where possible, exactly
like a component. Captured code is inserted verbatim (safely escaped), so template
literals, ${expressions}, and braces survive intact.
Managing snippets
Each snippet row in the gallery has inline edit (reopens the modal) and delete actions. For bulk work, the Snippets tab in Snapds Settings lists every snippet and lets you:
- toggle a snippet between private and shared,
- rename a category (renaming to an existing name merges the two), and
- clear a category (moving its snippets to Uncategorized).
Storage
A snippet lives in one of two places:
| Scope | Where | Committed? |
|---|---|---|
| Private | Your VS Code workspace state | No — per-repo, per-machine |
| Shared | snapds.config.json (customSnippets) | Yes — committed and shared like the rest of your config |
New snippets default to private. Flip Share with team — in the save modal or the Settings tab — to promote one to shared.
Sharing writes the snippet’s source into snapds.config.json, which is committed
to version control. It is always an explicit choice, never the default — keep
anything sensitive private.
Snippets in generated skills
Custom snippets can flow into your agent skills too. In the AI tab, pick which snippets to include (a Select all control, or check individual snippets) and Snapds appends a Custom Snippets section to the generated catalog so coding agents know your team’s patterns. See the Skills page for the confidentiality note.