Creative Coding
Curated tools, repos, tutorials, communities, and inspiration for designers who code. Everything you need to start creating.
Where to Start
The Coding Train
Fun video tutorials on p5.js and creative algorithms
Start learningp5.js Tutorials
Official beginner-friendly guides to creative coding
Start learningThe Book of Shaders
Interactive intro to shader programming
Start learningGenerative Artistry
Step-by-step classic generative art recreations
Start learningCursor
AI-first code editor built on VS Code. The best tool for designers who want to build — prompts your way to production code.
v0 by Vercel
Generate UI components from text prompts. Uses shadcn/ui and Tailwind CSS. Perfect for rapid prototyping and exploring design ideas.
Lovable
Build full-stack web apps from natural language descriptions. Great for designers who want to ship complete products without deep engineering.
shadcn/ui
Beautifully designed components built with Radix UI and Tailwind CSS. Copy-paste, not install. The foundation of modern React UI.
Tailwind CSS
Utility-first CSS framework. The backbone of vibe coding — write styles as fast as you think. v4 brings CSS-first configuration.
Framer Motion
Production-ready animation library for React. Smooth, physics-based animations that make your interfaces feel alive.
Vercel
Deploy your projects with zero config. Push to git, get a live URL. The fastest path from code to production.
Linear
Beautiful project management for modern teams. A masterclass in UI design, speed, and keyboard-first interactions.
Raycast
Productivity tool that replaces Spotlight. Stunning UI, thoughtful UX, and a great example of design-driven product building.
Arc Browser
A browser designed for how we use the internet today. Bold design choices, beautiful UI, and a rethinking of browser UX.
Figma Dev Mode MCP
Connect Figma designs directly to AI IDEs via MCP. The bridge between design files and production code.
GitHub Copilot
AI pair programmer that suggests code in real-time. Essential for designers learning to code — it fills in the gaps.
Radix UI
Unstyled, accessible UI primitives for React. The foundation that shadcn/ui builds on. Perfect headless components.
Next.js
The React framework for production. File-based routing, server components, and the best DX for building modern web apps.
Stripe
The gold standard of developer-facing product design. Beautiful docs, thoughtful UI patterns, and attention to detail.
Notion
All-in-one workspace with elegant design. A reference for how to handle complex functionality with simple, clean UI.
The Coding Design Podcast
Discussions on the intersection of design and engineering. Great for designers who want to understand the builder's perspective.
Refactoring UI
Design tips and techniques for developers by the creators of Tailwind CSS. The essential book for anyone who codes and designs.
MDN Canvas API Guide
Comprehensive documentation on the HTML Canvas API. The definitive reference for 2D drawing, image manipulation, and pixel-level graphics in the browser.
Generative Artistry
Step-by-step tutorials recreating classic generative art pieces. Each lesson breaks down algorithms behind iconic works into understandable code.
The Creative Coding Newsletter
Weekly curated roundup of creative coding projects, tools, and tutorials. Stay up to date with the latest in generative art and web experiments.
Codrops CSS & JS Articles
In-depth articles and tutorials on creative web effects. From page transitions to scroll animations — always pushing the boundary of web design.
A Visual Introduction to Machine Learning
Beautiful interactive article explaining core ML concepts through visual storytelling. A masterclass in creative technical communication.
Distill.pub
Interactive, visual research journal for machine learning. Exemplary use of web technologies for scientific communication and data visualization.
The Coding Train
Daniel Shiffman's legendary YouTube channel. Fun, accessible tutorials on p5.js, Processing, creative coding algorithms, and nature of code simulations.
Three.js Journey
The most comprehensive Three.js course. From basics to advanced shaders, physics, and post-processing — build stunning 3D web experiences.
The Book of Shaders
A gentle, interactive guide to fragment shaders. Learn GLSL through visual examples — the best starting point for shader programming.
p5.js Getting Started
Official p5.js tutorials for beginners. Learn creative coding fundamentals — shapes, color, interaction, animation — with zero prior experience.
SVG Animation Guide
Learn to animate SVGs with CSS and JavaScript. Covers path morphing, line drawing, and complex motion — essential for creative web designers.
Intro to WebGL with Raw Shaders
A hands-on guide to understanding WebGL from scratch. Build your own renderer and understand the GPU pipeline without framework abstractions.
GSAP Animation Platform Docs
Official GreenSock documentation and learning resources. Master timeline-based animations, scroll triggers, and complex sequencing.
r/CreativeCoding
Active subreddit community sharing generative art, creative coding experiments, and tutorials. Great for feedback and inspiration.
Genuary
Annual creative coding challenge in January. Daily prompts push artists to experiment with new techniques. Archives are a goldmine of inspiration.
Processing Foundation
The organization behind Processing and p5.js. Resources, grants, community events, and the mission to make coding accessible to artists.
OpenFrameworks Forum
Community forum for the openFrameworks C++ toolkit. Advanced creative coding discussions, project showcases, and technical help.
Creative Code Club
Online meetup community for creative coders. Regular events, workshops, and show-and-tells connecting artists and developers worldwide.
p5.js
JavaScript library for creative coding. Draws on Processing's philosophy of making programming accessible to artists, designers, and beginners.
Three.js
The most popular JavaScript 3D library. Create stunning WebGL scenes, VR experiences, and interactive 3D visualizations for the web.
PixiJS
Fast 2D rendering engine using WebGL. Ideal for games, interactive art, and high-performance visualizations with a friendly API.
Paper.js
Vector graphics scripting framework that runs on HTML5 Canvas. Intuitive API for complex vector art, path operations, and animation.
GSAP (GreenSock)
Industry-standard animation platform. Timeline control, scroll-driven animations, and physics — used by top agencies and product teams.
anime.js
Lightweight JavaScript animation library with a clean API. Great for CSS properties, SVG, DOM attributes, and custom JS objects.
Zdog
Flat, round, designer-friendly pseudo-3D engine. Perfect for creating playful 3D illustrations with a canvas or SVG renderer.
mo.js
Motion graphics toolbelt for the web. Create complex shape animations, burst effects, and motion timelines with a declarative API.
Lenis
Smooth scroll library used by top agencies. Lightweight, performant, and designed for creative websites with buttery-smooth scrolling.
CodePen
Social development environment for front-end designers and developers. Build, test, and share creative coding experiments in the browser.
Observable
Collaborative notebook platform for data visualization and exploratory programming. JavaScript-first with D3 integration.
ShaderToy
Online community and real-time editor for shader programming. Browse thousands of fragment shaders and build your own visual experiments.
Cables.gl
Visual programming platform for creating interactive WebGL content. Node-based editor that makes GPU programming accessible to designers.
Glitch
Free platform for building and remixing web apps. Collaborative coding environment — great for quick creative experiments and prototypes.
Awwwards
Awards for the best web design. Browse the most creative and innovative websites — a constant source of visual and interaction inspiration.
Hype4 Academy
Inspiring UI design showcases and tutorials. Curated collection of cutting-edge web design trends and creative implementations.
supply.openai.com
OpenAI's interactive supply site. A masterclass in grid-based design, microinteractions, and polished web experiences.
variant.com
Variant's community page showcases creative grid layouts and interactive web design. Great reference for infinite scrolling and card-based UIs.