Awesome Creative Coding Libraries in JavaScript for Designers

🎨 Interactive Visuals & Generative Art

• p5.js — The creative coder's sketchpad; draw, animate, and respond to input with a simple, artist-first API inspired by Processing.
• Two.js — A renderer-agnostic 2D drawing API that works across SVG, Canvas, and WebGL, perfect for crisp, scalable generative graphics.
• Paper.js — A vector graphics scripting framework on top of HTML5 Canvas, ideal for path-based generative drawings and morphing shapes.
• PixiJS — Blazing-fast 2D WebGL renderer with rich sprite, filter, and shader support for fluid, high-performance visual experiences.

🧊 3D & WebGL

• Three.js — The go-to 3D library for the web; build scenes with lights, cameras, materials, and shaders without writing raw WebGL.
• React Three Fiber — Three.js as React components; declarative, composable 3D scene-building that integrates naturally with modern web interfaces.
• Spline — A design tool for 3D that exports interactive scenes directly to the web; designers can build and embed 3D without touching raw code.
• OGL — A minimal WebGL library for designers who want direct shader control without the overhead, perfect for custom visual effects and experiments.

📊 Data Visualization & Charts

• D3.js — The gold standard for expressive, custom data visualization; bind data to DOM elements and build charts no template library can match.
• Vega-Lite — Describe charts as JSON specifications rather than code; fast to prototype complex multi-layered visualizations with minimal effort.
• Observable Plot — From the creators of D3, a concise and expressive charting library that makes exploratory data visualization feel as fast as sketching.

🔊 Audio, Music & Sound

• Tone.js — A full-featured framework for interactive music in the browser; build synthesizers, sequences, effects chains, and generative sound compositions.
• Howler.js — The simplest way to load, play, and spatialize audio across browsers; great for interactive sound design and audio-reactive experiences.
• Strudel — Live-code rhythmic patterns and generative music directly in the browser; a playful take on algorithmic music-making for curious non-musicians.

✨ Animation & Motion

• GSAP — The industry standard for high-performance web animation; animate anything (DOM, SVG, canvas, WebGL) with precise timeline control and silky easing.
• Motion — Production-grade animation for React with a beautiful declarative API; gestures, layout animations, and scroll-linked effects with minimal code.

🌊 Physics, Simulation & ML

• ml5.js — Machine learning for artists and designers; use pose detection, image classification, and style transfer in the browser with just a few lines of code.
• Matter.js — A 2D physics engine for the browser; simulate gravity, collisions, and constraints to create interactive interfaces that feel tangible.
• Hydra — Live-code a video synthesizer in the browser; chain GLSL-style operators to generate mesmerizing, reactive visuals in real time like a visual instrument.
• lil-gui — Instantly add sliders, color pickers, and dropdowns to any sketch; the quickest way to make generative parameters tweakable in real time.