Video yükleniyor...

Video Yüklenemedi

Ana Sayfaya Dön

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 görüntüleme • 1 yıl önce •via X (Twitter)

EğitimBilim & Teknoloji
LIVE

Anya Rossi• Live Now

Private livecam show

11 Yorum

Aryan Vichare profil fotoğrafı
Aryan Vichare1 yıl önce

Super cool!

Nexus 👾 profil fotoğrafı
Nexus 👾1 yıl önce

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 profil fotoğrafı
Ted Rozycki1 yıl önce

Vue.js please

Prasenjit profil fotoğrafı
Prasenjit1 yıl önce

That's awesome actually, super awesome.

benni heiss profil fotoğrafı
benni heiss1 yıl önce

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

kitze 🚀 profil fotoğrafı
kitze 🚀1 yıl önce

bros made v1

Favour Okoh profil fotoğrafı
Favour Okoh1 yıl önce

Love this. Well done team.

Bruno Winck profil fotoğrafı
Bruno Winck1 yıl önce

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 profil fotoğrafı
WxZhu1 yıl önce

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 profil fotoğrafı
Addy Osmani1 yıl önce

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

Anuj Sharma profil fotoğrafı
Anuj Sharma1 yıl önce

Angular?

Benzer Videolar

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,038 görüntüleme • 2 yıl önce

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 görüntüleme • 1 yıl önce

❌ 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,415 görüntüleme • 6 ay önce

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 görüntüleme • 1 yıl önce

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

326,074 görüntüleme • 6 ay önce

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,294,081 görüntüleme • 1 ay önce

👋 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 görüntüleme • 1 yıl önce

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 görüntüleme • 8 ay önce

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 görüntüleme • 1 yıl önce

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,539 görüntüleme • 6 ay önce

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 görüntüleme • 9 ay önce

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 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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,376 görüntüleme • 1 yıl önce

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 görüntüleme • 1 yıl önce

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,977 görüntüleme • 1 yıl önce

Conceptual alphabet 🔤🧠 I asked Gemini 3 to think of 26 concepts and code an abstract illustration of each one. It returned this in one shot. Prompt + link in 🧵
1:17

Conceptual alphabet 🔤🧠 I asked Gemini 3 to think of 26 concepts and code an abstract illustration of each one. It returned this in one shot. Prompt + link in 🧵

Alexander Chen

38,553 görüntüleme • 8 ay önce

Did you miss the showcase earlier this week? Here's a quick recap of what we had to show you 👀
0:53

Did you miss the showcase earlier this week? Here's a quick recap of what we had to show you 👀

Assassin's Creed

62,671 görüntüleme • 3 ay önce

New visual editor features just dropped 🛠️ Now you can: • Tweak border radius & opacity • Undo changes with a single click • Jump straight to component code • Edit multiple components at once Next week we're coming in with a game-changer… Stay tuned...
0:40

New visual editor features just dropped 🛠️ Now you can: • Tweak border radius & opacity • Undo changes with a single click • Jump straight to component code • Edit multiple components at once Next week we're coming in with a game-changer… Stay tuned...

Base44

10,816 görüntüleme • 9 ay önce

$TSLA Here's exactly what's happening to Tesla stock in pre-market Monday morning today. This video is everything you need to know.
5:27

$TSLA Here's exactly what's happening to Tesla stock in pre-market Monday morning today. This video is everything you need to know.

StockWhale

93,149 görüntüleme • 1 yıl önce