Загрузка видео...

Не удалось загрузить видео

На главную

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 просмотров • 18 дней назад

"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 год назад