strudel-box

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

Comment

Inspiration

I watched these three videos on the topic:

Coding Trance Music from Scratch (Again ) - 5:01

coding dance music in strudel !!!!! - 1:35

Musician turned Programmer turned Musician - 8:15

Since I had already completed a brownfield project with Kiro, I wanted to try out a greenfield project this time. I really like my idea for this project.

What it does

image

The strudel-box extension is available on both the VS Marketplace and the Open VSX Registry.
Strudel originally uses JS files, but I've introduced a new '.strudel' file extension to enable custom file icons and a dedicated editor for these files.

Additionally, there's a strudel-box template you can use to create your own music. It demonstrates creative uses of hooks—such as transforming Strudel syntax into a tutorial or generating ASCII art from your compositions.

Two Distinct Compositions from One Foundation To demonstrate the versatility of the strudel-box-template-skeleton, I've created completely different music pieces using the same template foundation:

Composition Play Tutorial ASCII Art
Piano Birds - A Melodic Aviary ▶️ Play 📖 Tutorial 🎨 ASCII
Halloween Piano ▶️ Play 📖 Tutorial 🎨 ASCII
Halloween House - Spooky Dancefloor ▶️ Play 📖 Tutorial 🎨 ASCII

All compositions/applications were built entirely within the strudel-box environment, showcasing how the lean template structure supports vastly different creative directions—from ambient textures to rhythmic dance tracks—while the hooks system provides contextual assistance regardless of musical genre.

How we built it

Since I had no knowledge of Strudel programming and had never implemented a VS Code extension before, I first had to conduct thorough context engineering on the topic.
For this, I used the deep research function of various LLM providers.
The result was this specification.
In a new workspace, I transformed the specification into steering documents with a single click.
I set Claude Opus 4.5 as my fixed model. I used exclusively this model for the entire project.

I had to discard my first version of the extension, but I used it as a learning experience. I created the extension template with yo code and used it as the basis for vibe coding.
See my Kiro settings in the screenshots. The project was mainly vibe coding, but I also incorporated spec-driven development elements. Attached is a screenshot illustrating how MCP servers join forces to solve a problem. All SVG images for the extension were created by Kiro.

Challenges we ran into

I had no issues with Kiro—occasionally I just needed to copy console output into the chat to keep things moving.

The real challenge was my lack of knowledge regarding Strudel and developing Kiro extensions. Context engineering is crucial when working with LLMs. If I don't understand the context myself, I can't prompt effectively or steer Kiro in the right direction. That's why I ended up discarding one version entirely and started fresh with the knowledge I had gained.

I don't really understand Strudel code, but with hooks I can have tutorials generated automatically—nice.

Some Strudel features are not yet implemented in the extension. That's simply due to my limited availability.

Spec-driven development for Strudel files will be improved further. For now, I recommend using only vibe coding sessions for music creation.

Accomplishments that we're proud of

I'm really proud of this Kiro extension and the fact that it's now available to the public.

What we learned

I've learned a lot about Strudel and developing Kiro extensions.
This was my first time using hooks in Kiro, and I really like them.

I've developed a sense of what's possible with Kiro extensions and will definitely continue exploring this—it's just fun.

What's next for strudel-box

Strudel-Box will continue to evolve and become more professional. Additional Strudel features will be integrated into the extension. I will create a tag for the submission and then continue to develop features.

A sample browser will be added, along with a mixer for combining multiple Strudel files. Currently, the extension allows the player and editor to run simultaneously. The strudel-box-template will also continue to evolve. The current visualizations will be elevated to the next level, with native Strudel visualizations being integrated. I'm never short on creative ideas, so I have no concerns about future development—time is always the limiting factor.

What's next after strudel-box

During my context engineering phase, I came across https://tonejs.github.io—and this will likely be my next extension project. But I could also imagine a cool SVG (animation) extension studio.

Built With

Share this project:

Updates