Video wird geladen...

Video konnte nicht geladen werden

Beim Laden dieses Videos ist ein Problem aufgetreten. Dies könnte an einem vorübergehenden Netzwerkproblem liegen oder das Video ist möglicherweise nicht verfügbar.

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 Aufrufe • vor 1 Jahr •via X (Twitter)

Bildung Wissenschaft & Technologie

Anya Rossi• Live Now

Private livecam show

11 Kommentare

Profilbild von Aryan Vichare

Aryan Vicharevor 1 Jahr

Super cool!

Profilbild von Nexus 👾

Nexus 👾vor 1 Jahr

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!

Profilbild von Ted Rozycki

Ted Rozyckivor 1 Jahr

Vue.js please

Profilbild von Prasenjit

Prasenjitvor 1 Jahr

That's awesome actually, super awesome.

Profilbild von benni heiss

benni heissvor 1 Jahr

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

Profilbild von kitze 🚀

kitze 🚀vor 1 Jahr

bros made v1

Profilbild von Favour Okoh

Favour Okohvor 1 Jahr

Love this. Well done team.

Profilbild von Bruno Winck

Bruno Winckvor 1 Jahr

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.

Profilbild von WxZhu

WxZhuvor 1 Jahr

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?

Profilbild von Addy Osmani

Addy Osmanivor 1 Jahr

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

Profilbild von Anuj Sharma

Anuj Sharmavor 1 Jahr

Angular?

Ähnliche 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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

❌ 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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 5 Monaten

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

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

George Moller

59,703 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 18 Tagen

"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 Aufrufe • vor 1 Jahr

👋 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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 6 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 5 Monaten

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 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 8 Monaten

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 1 Jahr

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 Aufrufe • vor 3 Monaten

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 Aufrufe • vor 1 Jahr