🎵 strudel-box

Code your beats. Visualize your sound. Share your vibe.

strudel-box is a VS Code extension that brings the power of Strudel live coding directly into your editor. Create algorithmic music patterns, experiment with sounds, and perform live — all without leaving VS Code.

🤖 Works in VS Code — Built for Kiro

strudel-box is fully compatible with VS Code and works out of the box. However, it was developed for and with Kiro, AWS's agentic IDE. When used with Kiro, you unlock powerful AI-assisted features:

✨ Features

🎹 Live Coding REPL

• Integrated Strudel REPL — Write and evaluate Strudel patterns directly in VS Code
• Real-time Audio — Hear your patterns instantly with low-latency playback
• CodeMirror 6 Editor — Modern code editor with JavaScript syntax highlighting
• Pattern Evaluation — Execute patterns with Ctrl+Enter (Windows/Linux) or Cmd+Enter (macOS)
• Instant Stop — Silence audio immediately with Ctrl+. or Cmd+.

📁 Strudel Explorer (Sidebar Player)

• File Browser — Browse all .strudel files in your workspace
• Hierarchical View — Navigate folders with expandable tree structure
• One-Click Playback — Play any pattern directly from the file list
• Playlist Controls — Previous, Next, and Shuffle functionality
• Now Playing Display — See which track is currently playing
• Quick Actions — Open files in editor or share to Strudel.cc

🎨 Visual Themes

Three stunning visual themes with animated particle backgrounds:

Each theme includes:

• Custom color schemes
• Animated particle backgrounds
• Matching VS Code editor themes

🎛️ Custom Editor for .strudel Files

• Native File Support — Double-click any .strudel file to open in Strudel Box
• Auto-Save — Changes are saved directly to the file
• Syntax Highlighting — Dedicated language support for .strudel files
• File Icons — Custom icons in the file explorer

🔊 Pre-loaded Sample Libraries

Strudel Box comes with extensive sample libraries ready to use:

📋 Log Panel

• Real-time Feedback — See sample loading status and errors
• Collapsible Panel — Expand/collapse to save space
• Clear Function — Reset logs when needed
• Color-coded Messages — Info, warnings, errors, and success states

🚀 Getting Started

Installation

1. Install the extension from the VS Code Marketplace
2. Open a workspace with .strudel files (or create new ones)
3. Click the Strudel Player icon in the Activity Bar

Your First Pattern

1. Open Strudel Box (Ctrl+Shift+P → "Strudel Box: Open Player")
2. Type a simple pattern:

   s("bd sd hh*4")
   

3. Press Ctrl+Enter (or Cmd+Enter on Mac) to play
4. Press Ctrl+. (or Cmd+.) to stop

Creating Pattern Files

Create files with the .strudel extension:

// my-pattern.strudel
note("c3 e3 g3 c4")
  .sound("sawtooth")
  .lpf(800)
  .room(0.3)

⌨️ Keyboard Shortcuts

📝 Commands

Access via Command Palette (Ctrl+Shift+P / Cmd+Shift+P):

🎵 Strudel Pattern Reference

Sound Sources

// Built-in synthesizers
sound("sawtooth")   // Sawtooth wave
sound("square")     // Square wave
sound("triangle")   // Triangle wave
sound("sine")       // Sine wave

// Sample-based sounds
sound("bd sd hh")   // Drums
sound("piano")      // Piano
sound("casio")      // Casio keyboard

Notes & Melodies

// Note patterns
note("c3 e3 g3 c4")
n("0 2 4 7")

// Mini-notation
"c3 e3 g3".note()

Audio Effects

// Filters
.lpf(800)      // Low-pass filter frequency
.hpf(200)      // High-pass filter frequency
.lpq(5)        // Filter resonance

// Space
.room(0.5)     // Reverb amount
.delay(0.25)   // Delay time

// Dynamics
.gain(0.8)     // Volume (0-1)
.velocity(0.7) // Note velocity

Pattern Modifiers

// Timing
.fast(2)       // Double speed
.slow(2)       // Half speed
.rev()         // Reverse pattern

// Structure
.stack()       // Layer patterns
.cat()         // Sequence patterns
.seq()         // Sequential playback

// Rhythm
.euclid(3, 8)  // Euclidean rhythm

Scales & Chords

.scale("C:minor")
.chord("Am7")
.voicing()

Drum Machines

// Use specific drum machines
sound("bd sd hh cp")
  .bank("RolandTR909")

// Available banks include:
// RolandTR808, RolandTR909, RolandTR707, and many more

📂 Example Patterns

Simple Drum Beat

s("bd sd [~ bd] sd, hh*8")
  .room(0.2)

Melodic Synth

note("c3 e3 g3 c4")
  .sound("sawtooth")
  .lpf(sine.range(200, 2000).slow(4))
  .lpq(5)
  .room(0.3)

Chord Progression

chord("<C^7 Am7 Dm7 G7>")
  .voicing()
  .sound("piano")
  .room(0.5)

Euclidean Rhythm

note("c2 e2 g2 b2")
  .euclid(5, 8)
  .sound("sawtooth")
  .lpf(600)

Layered Composition

stack(
  note("c3 e3 g3").sound("piano"),
  s("bd*4, hh*8"),
  note("c2").sound("sawtooth").lpf(200)
)

🎨 VS Code Themes

Strudel Box includes three matching VS Code color themes:

1. Strudel Box - Cyberpunk — Dark theme with cyan/magenta accents
2. Strudel Box - Halloween — Dark theme with orange/purple accents
3. Strudel Box - 8-Bit — Dark theme with retro green accents

To activate: Ctrl+K Ctrl+T → Select a Strudel Box theme

⚠️ Known Limitations

The following Strudel features are not available in Strudel Box:

For these advanced features, use the official Strudel REPL.

🔧 Technical Details

Architecture

• Extension Host — Node.js/CommonJS for VS Code integration
• Webview — Browser/ESM for audio engine and UI
• Audio Engine — @strudel/web loaded from CDN
• Editor — CodeMirror 6 with JavaScript syntax

Requirements

• VS Code 1.74.0 or higher
• Internet connection (for loading Strudel from CDN)
• Audio output device

File Association

Files with .strudel extension are automatically:

• Recognized as Strudel language
• Opened with the Strudel Box custom editor
• Displayed with custom file icons

🐛 Troubleshooting

No Sound

1. Check that your system audio is not muted
2. Ensure you've clicked Play or pressed Ctrl+Enter (audio requires user gesture)
3. Check the Log panel for errors
4. Try a simple pattern: s("bd")

Samples Not Loading

1. Check your internet connection
2. Look at the Log panel for loading status
3. Some sample banks may not be available — try built-in synths instead

Pattern Errors

1. Check the Log panel for error messages
2. Verify your pattern syntax
3. Try the pattern on strudel.cc to compare

📚 Resources

• Kiro IDE — AI-powered IDE for spec-driven development
• strudel-box-template — Kiro template for music creation
• Strudel Documentation
• Strudel Pattern Reference
• TidalCycles (inspiration)
• Dirt-Samples Repository

📄 License

MIT License — See LICENSE for details.

🙏 Acknowledgments

• Strudel by Felix Roos and contributors
• TidalCycles by Alex McLean
• CodeMirror by Marijn Haverbeke

Happy live coding! 🎶