Welcome to the Workshop!

This artifact demonstrates 10 different JavaScript libraries that you can use with Gemini.

👈 Select a library from the sidebar to begin.

Three.js

threejs.org ↗

A lightweight, cross-browser, and general-purpose 3D library. It abstracts the complexities of raw WebGL. Click and drag to rotate the object.

✨ Try this prompt "Create a 3D scene using Three.js with a rotating transparent cube and a wireframe sphere inside it. Add controls to rotate the camera."
Loading 3D Engine...

p5.js

p5js.org ↗

A JavaScript library for creative coding, with a focus on making coding accessible and inclusive. Draw on the canvas below!

✨ Try this prompt "Create a generative art sketch using p5.js that draws concentric circles with random colors that slowly pulsate."

Matter.js

brm.io/matter-js ↗

A 2D rigid body physics engine for the web. Click to spawn more boxes.

✨ Try this prompt "Create a physics simulation using Matter.js where balls fall into a bucket. Add obstacles they have to bounce off to get in."

Chart.js

chartjs.org ↗

Simple yet flexible JavaScript charting for designers & developers. Updates live.

✨ Try this prompt "Create a dashboard using Chart.js that visualizes a mock dataset of 'Monthly Sales' as a bar chart, with a button to randomize data."

Leaflet.js

leafletjs.com ↗

An open-source JavaScript library for mobile-friendly interactive maps. Works without an API key.

✨ Try this prompt "Create a map using Leaflet.js centered on Tokyo. Add markers for Shibuya Crossing and Tokyo Tower with popup descriptions."

Tone.js

tonejs.github.io ↗

A Web Audio framework for creating interactive music in the browser.

✨ Try this prompt "Create a step sequencer using Tone.js that plays a drum beat. Let me toggle steps for Kick, Snare, and HiHat."

Try the Synth

Click below to play a polyphonic chord.

Mermaid.js

mermaid.js.org ↗

Renders Markdown-inspired text definitions into diagrams and visualizations.

✨ Try this prompt "Create a flowchart using Mermaid.js that shows a 'User Login Flow' decision tree."
Loading diagram...

MathJax

mathjax.org ↗

A display engine for mathematics that works in all browsers. Uses LaTeX syntax.

✨ Try this prompt "Create a cheat sheet for 'Calculus Integrals' using MathJax to render the formulas nicely."

Quadratic Formula

$​$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$​$ →

$$x = {-b \pm \sqrt{b^2-4ac} \over 2a}$$

Maxwell's Equations

$​$ \nabla \cdot \mathbf{E} = \frac {\rho} {\varepsilon_0} $​$ → $$ \nabla \cdot \mathbf{E} = \frac {\rho} {\varepsilon_0} $$
$​$ \nabla \cdot \mathbf{B} = 0 $​$ → $$ \nabla \cdot \mathbf{B} = 0 $$

SheetJS

sheetjs.com ↗

The standard library for reading and writing Excel and CSV files in JavaScript.

✨ Try this prompt "Create a tool using SheetJS that allows me to upload a CSV file and converts it into a formatted JSON list on screen."

Generated Data Preview:

NameRoleXP
AliceWarrior1500
BobMage2300
CharlieRogue1800

Marked.js

marked.js.org ↗

A low-level markdown compiler for parsing markdown without caching or blocking.

✨ Try this prompt "Create a Markdown editor using Marked.js that splits the screen: raw text on the left, live HTML preview on the right."

lil-gui

lil-gui.georgealways.com ↗

A floating GUI for the web. Perfect for tweaking variables on the fly.

✨ Try this prompt "Create a 3D cube in Three.js and use lil-gui to let me control its color, scale, and rotation speed."
Interactive Element