Vibe Code

An innovative live coding environment that enables users to compose and perform music through code. Designed for coders to make music.

Comment

Inspiration

I was inspired by Tidal Cycles and DJ-Dave, who pioneered live coding music with functional programming patterns. The idea was to bring the power of algorithmic music composition to the web browser, making it accessible to anyone with an internet connection. The collaborative aspect was inspired by the live coding community's emphasis on sharing and learning together.

What it does

A web-based live coding environment that allows users to create algorithmic music patterns using JavaScript. It features:

  • Real-time pattern synthesis using functional programming concepts
  • Live coding interface with instant audio feedback
  • Collaborative editing - multiple users can edit the same code simultaneously with real-time synchronization
  • Extensive pattern library with samples, synthesizers, and effects
  • Web-based accessibility - no installation required, works in any modern browser
  • Community sharing - patterns can be shared via URLs
  • Educational focus - designed for learning algorithmic music composition

How I built it

The project is built as a modular monorepo using modern web technologies:

  • Frontend: React with CodeMirror 6 for the code editor
  • Audio Engine: Web Audio API with custom synthesizers and sample players
  • Collaboration: Yjs (CRDT) + WebSocket server for real-time synchronization
  • Pattern Engine: Custom JavaScript runtime for evaluating musical patterns
  • Architecture: Modular packages for different features (core, webaudio, codemirror, etc.)
  • Build System: Vite for fast development and building
  • Package Management: pnpm workspaces for monorepo management

The collaboration feature was implemented using Yjs (Conflict-free Replicated Data Types) to ensure all users see the same code state, with WebSocket server for real-time communication.

Challenges we ran into

  • Real-time collaboration: Implementing conflict-free editing with cursor sharing was complex, requiring deep integration between Yjs and CodeMirror

Accomplishments that we're proud of

  • Real-time collaborative editing - a first for live coding environments
  • Zero-installation experience - works immediately in any browser -AI Generation - ability to generate code using openrouter
  • Modular architecture that allows easy extension and customization

What we learned

  • Web Audio API timing is more complex than expected, requiring sophisticated scheduling
  • Real-time collaboration adds significant complexity but creates unique creative possibilities
  • Browser limitations require creative workarounds for professional audio applications

What's next for Vibe Code

Not too sure maybe:

  • Mobile support with touch-optimized interfaces
  • Advanced audio features like multi-channel output and external MIDI support
  • Performance improvements for handling larger, more complex patterns
  • Community features like pattern sharing, user profiles, and collaborative playlists
  • Integration with other tools like Ableton Live, Max/MSP, and other music software
  • Accessibility improvements for users with different abilities

Built With

Share this project:

Updates