Live code examples
231 small examples for 47 libraries that projects built with AI agents use. Each one runs in your browser: change the code and see the result at once, or describe a change and let AI rewrite it. Every example was written from the official docs and checked to run in Chromium; the screenshots come from the same code.
UI components and icons 49 Utilities 24 Forms, validation and schemas 20 Animation and motion 20 3D and graphics 19 Web frameworks 15 State and data fetching 15 Markdown, editors and content 15 Files, images and media 15 Styling and CSS 10 Auth and security libraries 10 Charts and data visualisation 9 HTTP clients and networking 5 Game development 5
Results
UI components and icons
Lucide React, Radix UI, Sonner, cmdk, React Day Picker, react-resizable-panels, input-otp, React Icons, dnd kit, Base UI
Using Lucide icons as React componentsClick a menu row to move the highlight and the arrow icon.
The asChild pattern with Radix SlotThe three controls share one Button component; the line below lists the HTML tags they actually rendered.
Showing a toast with SonnerPress "Give me a toast" several times to stack up numbered toasts. All 49 ui components and icons examples →10 libraries: Lucide React, Radix UI, Sonner, cmdk, React Day Picker, react-resizable-panels…Utilities
date-fns, uuid, yaml, js-yaml, Lodash
Sort objects by a date field in date-fnsRename the due field or add tasks to try it with your own data.
Random UUIDs with uuid v4Run it a few times: the plain v4() lines change, the fixed-bytes line stays 109156be-c4fb-41ea-b1b4-efe1671c5836.
Parse YAML in JavaScript with yamlAdd a new key to the YAML text and print it, or change port to a quoted string to see its type change. All 24 utilities examples →5 libraries: date-fns, uuid, yaml, js-yaml, LodashForms, validation and schemas
Zod, React Hook Form, React Hook Form Resolvers, Ajv
Handling errors with ZodError in ZodChange the invalid object so only one field is wrong and watch the issue list shrink.
useForm, register and handleSubmit in React Hook FormType into the fields and press Submit: the right panel shows the object your onSubmit callback received.
Zod validation with zodResolverErrors show on load; type a name and a username of 3+ characters, then press Sign up to see the submitted values. All 20 forms, validation and schemas examples →4 libraries: Zod, React Hook Form, React Hook Form Resolvers, AjvAnimation and motion
tw-animate-css, Framer Motion, Motion, GSAP
Exit animations with data-state in tw-animate-cssPress the button to switch data-state between show and hide.
The animate prop in Framer MotionClick Toggle to switch the box between its two animate targets.
The animate() function in MotionThe box spins once on load; click Rotate again to add another full turn. All 20 animation and motion examples →4 libraries: tw-animate-css, Framer Motion, Motion, GSAP3D and graphics
Three.js, Leaflet, React Three Fiber, React Leaflet
Rotating cube in Three.jsChange the BoxGeometry sizes or the divisors in animate() to make the cube bigger or spin faster.
Markers and popups in LeafletClick any pin to open its popup; drag the map to pan and scroll to zoom.
InstancedMesh in React Three Fiber2,500 cubes drawn in one draw call: one instancedMesh, animated in useFrame by changing each instance's matrix. All 19 3d and graphics examples →4 libraries: Three.js, Leaflet, React Three Fiber, React LeafletWeb frameworks
Components and props in ReactThree profile cards render from the same component; change a prop in App and the card updates.
Basic routing in React RouterClick Home, About and Contact; the grey line at the bottom shows the current pathname.
A reactive counter with createApp and ref in VueClick +1 a few times, then change ref(0) to ref(10) to start from another number. All 15 web frameworks examples →3 libraries: React, React Router, VueState and data fetching
TanStack Query, Zustand, React Redux
Fetching data with useQuery in TanStack QueryPress Refetch on either card and watch fetchStatus change on both while the queryFn call count goes up by one.
Creating a store in ZustandClick "one up" a few times, then add a third action such as removing one bear.
Provider in React ReduxChange the name in initialState and both the header and the state dump update. All 15 state and data fetching examples →3 libraries: TanStack Query, Zustand, React ReduxMarkdown, editors and content
react-markdown, Marked, React Syntax Highlighter
Rendering markdown with react-markdownType in the left box: the right side re-renders the markdown on every keystroke.
Converting Markdown to HTML with MarkedChange the Markdown in the md string and both panels update when the code reruns.
Highlight code in ReactClick a language button to re-highlight a different snippet. All 15 markdown, editors and content examples →3 libraries: react-markdown, Marked, React Syntax HighlighterFiles, images and media
jsPDF, SheetJS, qrcode (JavaScript)
Creating your first PDF with jsPDFChange the text or the coordinates and the commands in the panel update; the button downloads the PDF.
Array of objects to worksheet in SheetJSAdd a new key such as City to the first object and a new column appears in the table.
Drawing a QR code on a canvas with qrcodeType in the box on the right: the QR code is redrawn on every keystroke. All 15 files, images and media examples →3 libraries: jsPDF, SheetJS, qrcode (JavaScript)Styling and CSS
Merging conflicting classes with twMergeEach green line is the live output of twMerge; change a class in CASES to see a different merge.
Styled components with EmotionHover the pink button to see the &:hover rule switch its text to white. All 10 styling and css examples →2 libraries: Tailwind Merge, EmotionAuth and security libraries
Hashing and checking a password with bcryptjsChange the password or the guess and run again; the salt and hash are different on every run.
Sign a JWT with joseChange the expiration to '15m' or add another custom claim and watch the decoded payload update. All 10 auth and security libraries examples →2 libraries: bcryptjs, joseCharts and data visualisation
A simple line chart in RechartsChange a number in the data array and run it again to see the line move.
Doughnut chart in React Chart.js 2Hover a segment to see its tooltip; change cutout to 0 to turn the doughnut into a pie. All 9 charts and data visualisation examples →2 libraries: Recharts, React Chart.js 2
