Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

We released Canvas in Gemini this week, allowing you to code and preview React/JS components quickly. Here's a one-shot Stock market component 👀

Addy Osmani

403,967 subscribers

116,346 views • 1 year ago •via X (Twitter)

Education Science & Technology

Anya Rossi• Live Now

Private livecam show

11 Comments

Aryan Vichare1 year ago

Super cool!

Nexus 👾1 year ago

Nexus combines CMC’s market insights with Zerion and Debank’s wallet tracking—all in one easy-to-use dashboard. Simplify your crypto journey today, completely free 🚀 Try it now!

Ted Rozycki1 year ago

Vue.js please

Prasenjit1 year ago

That's awesome actually, super awesome.

benni heiss1 year ago

Impressive, too bad i use a Google framework (angular) for web development. 🙈😁

kitze 🚀1 year ago

bros made v1

Favour Okoh1 year ago

Love this. Well done team.

Bruno Winck1 year ago

How much was possible just searching on npm? I'm CV concern by the Copying, regenerating vs reusing trend. Starts with a feeling of empowerment but then higher costs of ownership, and supporting something you have no understanding in first place.

WxZhu1 year ago

It works fine the first time, but after several edits, I often end up with a white screen. Is anyone else running into this issue?

Addy Osmani1 year ago

Please feel free to share any prompts that failed (if you're comfortable doing so). Happy to share w/team

Anuj Sharma1 year ago

Angular?

Related Videos

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

React Server Components allow you to call your database directly from a component. And that's great... but how do we make sure this code never ever runs on the client?

Lee Robinson

177,009 views • 1 year ago

we released our react package build an ai chat w/ interactive components in a few lines of code. add it to your app with: npx tambo full-send we support: - streaming for both messages and components - message history and message threads - state manage for generated components - suggested actions based on available components - component library that uses the react package the react package is open-source. server package will be open-sourced later this year.

we released our react package build an ai chat w/ interactive components in a few lines of code. add it to your app with: npx tambo full-send we support: - streaming for both messages and components - message history and message threads - state manage for generated components - suggested actions based on available components - component library that uses the react package the react package is open-source. server package will be open-sourced later this year.

Michael Magán

65,473 views • 1 year ago

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

❌ Don't use barrel imports in React ✅ Import components directly Barrel imports (index.js re-exports) import the entire module even if you need one component. This adds unused code to your bundle ↓

George Moller

161,350 views • 5 months ago

With Canvas in Gemini, you can: ⌨️ Write, iterate & preview React/HTML code 📝 Draft & edit comprehensive documents 🎨 Build interactive prototypes, games & visualization …and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with changes appearing in real-time: Try it today and share your Canvas creations by tagging us here!

With Canvas in Gemini, you can: ⌨️ Write, iterate & preview React/HTML code 📝 Draft & edit comprehensive documents 🎨 Build interactive prototypes, games & visualization …and more. Simply select ‘Canvas’ in your prompt bar and you can write and edit documents or code, with changes appearing in real-time: Try it today and share your Canvas creations by tagging us here!

Google Gemini

414,938 views • 1 year ago

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure

you can steal react components from any website without source code most people screenshot UIs and ask AI to recreate them. but with react fiber, you can extract the exact component 1:1 - same styling, props, design system, component structure

david fant

323,395 views • 5 months ago

⚛️ One component, many forms: the power of polymorphic React components ↓

⚛️ One component, many forms: the power of polymorphic React components ↓

George Moller

59,703 views • 1 year ago

We asked Gemini 3.5 Flash to bring back the classic early-2000s PC drawing experience, and it delivered in one shot. What are you building first with Canvas?

We asked Gemini 3.5 Flash to bring back the classic early-2000s PC drawing experience, and it delivered in one shot. What are you building first with Canvas?

Google Gemini

22,280,567 views • 17 days ago

"How to share state between React client components with a parent server component?" 👇

"How to share state between React client components with a parent server component?" 👇

Alex Sidorenko

51,480 views • 1 year ago

👋 Meet Canvas, a new interactive space in Gemini that simplifies creating, refining, and sharing your work. Canvas is like a shared whiteboard where you and Gemini can work together. You can refine documents, write code, design prototypes and more while Gemini collaborates with you in real-time to make improvements. Try Canvas today here: and share your creations with us in the comments!

👋 Meet Canvas, a new interactive space in Gemini that simplifies creating, refining, and sharing your work. Canvas is like a shared whiteboard where you and Gemini can work together. You can refine documents, write code, design prototypes and more while Gemini collaborates with you in real-time to make improvements. Try Canvas today here: and share your creations with us in the comments!

G3mini

63,795 views • 1 year ago

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:

Introducing Component Grab SuperDesign.Dev Chrome extension allows you to grab any UI component in browser We turn messy DOM into clean tailwind code pixel perfectly Paste into Superdesign AI native canvas to vibe design Or paste into Claude code/Cursor Free forever:

Jason Zhou

78,413 views • 6 months ago

Big news from AI Studio! You can now generate AI apps that are instantly connected to the Gemini SDK! ✨ Here's a one-shot demo of a text adventure game that uses Imagen and Gemini without writing a line of code. No setup and no key required. Demo below and code 👇

Big news from AI Studio! You can now generate AI apps that are instantly connected to the Gemini SDK! ✨ Here's a one-shot demo of a text adventure game that uses Imagen and Gemini without writing a line of code. No setup and no key required. Demo below and code 👇

Ammaar Reshi

113,487 views • 1 year ago

Eventful week in market news ahead! Here's what you need to look out for 👀

Eventful week in market news ahead! Here's what you need to look out for 👀

Bybit

206,535 views • 5 months ago

Introducing HeroUI v3 🔥 A complete rewrite for React. A brand-new library for React Native. 🌐 Web → 75+ components, 21 new 📱 Native → 37+ components, built from scratch 🎨 Styling → Tailwind CSS v4, CSS variables, OKLCH, BEM ⚡ Performance → CSS animations, no JS runtime ♿ Accessibility → React Aria Components 🧩 Architecture → Compound components, headless-ready 🤖 AI → MCP Server, Agent Skills, LLMs.txt 📎 Figma Kit v3 with 1:1 component parity One design system. Beautiful everywhere.

HeroUI

532,340 views • 3 months ago

This week, Google Cloud introduced Gemini Enterprise, which brings your work, data and people together in one AI-powered hub — allowing you to automate entire workflows, not just tasks.

This week, Google Cloud introduced Gemini Enterprise, which brings your work, data and people together in one AI-powered hub — allowing you to automate entire workflows, not just tasks.

Google

114,330 views • 8 months ago

you can now use o1 to code in chatgpt canvas, and it renders html and react apps used it to quickly build a windows 95 sim! iterated on it within chatgpt—adding minesweeper, notepad files that can be saved and edited, even pointer traillssssss

you can now use o1 to code in chatgpt canvas, and it renders html and react apps used it to quickly build a windows 95 sim! iterated on it within chatgpt—adding minesweeper, notepad files that can be saved and edited, even pointer traillssssss

edwin

326,099 views • 1 year ago

Today we’re excited to introduce GenSX, an open source TypeScript framework for building backend workflows and agents with reusable, React-like components. If you know how to write a React component, then you’ll feel right at home building agents in GenSX.

Today we’re excited to introduce GenSX, an open source TypeScript framework for building backend workflows and agents with reusable, React-like components. If you know how to write a React component, then you’ll feel right at home building agents in GenSX.

Evan Boyle

14,446 views • 1 year ago

Code Execution If you ask Grok to generate code, you can quickly see how it runs in a “preview” tab. You can preview HTML snippets, run Python, C++, Javascript, Typescript and bash scripts.

Code Execution If you ask Grok to generate code, you can quickly see how it runs in a “preview” tab. You can preview HTML snippets, run Python, C++, Javascript, Typescript and bash scripts.

Grok

560,250 views • 1 year ago

In @Magicpathai every component is a conversation. Edit and refine, either manually or with AI. Design is the art of keeping good decisions. MagicPath lets you copy and paste interactive components across the canvas to explore and perfect your ideas.

In @Magicpathai every component is a conversation. Edit and refine, either manually or with AI. Design is the art of keeping good decisions. MagicPath lets you copy and paste interactive components across the canvas to explore and perfect your ideas.

Pietro Schirano

53,079 views • 1 year ago

This is one of the fastest and most performant calendar I’ve ever built with Expo 🧙 Source code: React Native Components 🔗

This is one of the fastest and most performant calendar I’ve ever built with Expo 🧙 Source code: React Native Components 🔗

Erencan Arica

30,725 views • 3 months ago

just made a new prototyping tool for react components, live props, on a canvas this was 2hrs from scratch — with new multi-agent ux + to-dos in Cursor, kinda magic!

just made a new prototyping tool for react components, live props, on a canvas this was 2hrs from scratch — with new multi-agent ux + to-dos in Cursor, kinda magic!

Ryo Lu

234,893 views • 1 year ago