Claude Code Snippet Builder

Add blocks, drag to reorder, edit, or delete. Export to PNG or save/load JSON configurations.

Add Block

Tips:
  • Use Read/Edit/Write/Bash for proper VSCode Claude Code tool call style.
  • Drag blocks to reorder them in the preview.
  • Each block has Edit/Delete buttons for easy management.
  • Press Esc to cancel edit mode.

Preview Controls

Stylized: Clear labels, high contrast, better for screenshots/tutorials.
Realistic: Icons, tighter spacing, closer to actual VSCode Claude Code.

Export / Import

Export PNG: Download the preview as an image.
Export JSON: Save current configuration for later.
Import JSON: Load a previously saved configuration.

Quick Generate

Click to generate a random funny conversation snippet from our collection of 100 pre-made scenarios. Mix of dad jokes, dark humor, programming puns, and developer life situations!

How to use:
  • Hover over any block to see Insert Above/Below controls
  • Click any text to edit inline (look for ✏️ icon)
  • For Bash blocks, hover over IN/OUT to add more lines
  • Drag blocks to reorder them

Support This Project

If you find this tool useful, consider buying me a coffee!

@ryan-werts-1
Venmo QR Code
Scan with Venmo app to donate
Allow this bash command?
dir /s /b "C:\path\to\something\*.vue" 2>nul
1
Yes
2
Yes, allow access for this session
3
No
Tell Claude what to do instead
Esc to cancel