正在加载视频...

视频加载失败

返回首页

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 👀

addyosmani's profile picture

Addy Osmani

403,967 subscribers

116,346 次观看 • 1 年前 •via X (Twitter)

教育科学技术
LIVE

Anya Rossi• Live Now

Private livecam show

11 条评论

Aryan Vichare 的头像
Aryan Vichare1 年前

Super cool!

Nexus 👾 的头像
Nexus 👾1 年前

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 Rozycki 的头像
Ted Rozycki1 年前

Vue.js please

Prasenjit 的头像
Prasenjit1 年前

That's awesome actually, super awesome.

benni heiss 的头像
benni heiss1 年前

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

kitze 🚀 的头像
kitze 🚀1 年前

bros made v1

Favour Okoh 的头像
Favour Okoh1 年前

Love this. Well done team.

Bruno Winck 的头像
Bruno Winck1 年前

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.

WxZhu 的头像
WxZhu1 年前

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 Osmani 的头像
Addy Osmani1 年前

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

Anuj Sharma 的头像
Anuj Sharma1 年前

Angular?

相关视频

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?
1:25

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 次观看 • 1 年前

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.
1:01

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 次观看 • 1 年前

❌ 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 ↓
0:35

❌ 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 次观看 • 5 个月前

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!
0:30

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 次观看 • 1 年前

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
0:54

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 次观看 • 5 个月前

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

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

George Moller

59,703 次观看 • 1 年前

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?
0:28

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 次观看 • 17 天前

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

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

Alex Sidorenko

51,480 次观看 • 1 年前

👋 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!
1:00

👋 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 次观看 • 1 年前

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:
1:58

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 次观看 • 6 个月前

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 👇
0:51

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 次观看 • 1 年前

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

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

Bybit

206,535 次观看 • 5 个月前

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.
1:15

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 次观看 • 3 个月前

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.
0:35

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 次观看 • 8 个月前

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
0:50

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 次观看 • 1 年前

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.
6:08

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 次观看 • 1 年前

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.
0:24

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 次观看 • 1 年前

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.
1:00

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 次观看 • 1 年前

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

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 次观看 • 3 个月前

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!
0:22

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 次观看 • 1 年前