Loading video...

Video Failed to Load

Go Home

Introducing Canvas UI, the first ever html-in-canvas component library. Your DOM is the render target now. Real-time shaders over real, interactive UI. 24 components. React, Vue, Svelte, vanilla TS. Free. Open source. 🧵

davidhdev's profile picture

David Haz

9,831 subscribers

913,602 views • 21 hours ago •via X (Twitter)

ArtsScience & TechnologyEducation
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Here’s a first look at the Shaders Design Editor ✨ From blank canvas to interactive hero section in 2 minutes⏱️. Shipping soon for Vue, React & Svelte.
2:43

Here’s a first look at the Shaders Design Editor ✨ From blank canvas to interactive hero section in 2 minutes⏱️. Shipping soon for Vue, React & Svelte.

shaders

63,314 views • 9 months ago

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:
0:34

These are real WebGL shaders on top of interactive DOM elements without the HTML-in-Canvas API (works in Safari too). There’re rough edges still but worth sharing:

Shu

56,459 views • 3 months ago

🚀 Announcing Ark UI Ark™ The robust headless UI component library, built with State machines 🥳💪✨ 🔸Over 30+ components (ColorPicker, DatePicker, and more...) 🔸Works in React, Solid, and Vue 🔸Bring your own styling solution
1:25

🚀 Announcing Ark UI Ark™ The robust headless UI component library, built with State machines 🥳💪✨ 🔸Over 30+ components (ColorPicker, DatePicker, and more...) 🔸Works in React, Solid, and Vue 🔸Bring your own styling solution

Sage ⚡️

159,213 views • 2 years ago

Introducing Public Beta for Shaders ✨ The wait is over 🎉 Try it now for Vue , React , Svelte & SolidJS
0:40

Introducing Public Beta for Shaders ✨ The wait is over 🎉 Try it now for Vue , React , Svelte & SolidJS

shaders

88,699 views • 5 months ago

Introducing ! 🤩🎉 Open Source alternative v0! Generate usable Vue component, not just UI. Support `shadcn/vue` for now, but will address more library in soon! Fork it, Host it, Star it ⭐️ --- Made with Nuxt Drizzle ORM shadcn UI
0:47

Introducing ! 🤩🎉 Open Source alternative v0! Generate usable Vue component, not just UI. Support `shadcn/vue` for now, but will address more library in soon! Fork it, Host it, Star it ⭐️ --- Made with Nuxt Drizzle ORM shadcn UI

Zernonia

295,928 views • 2 years ago

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨
2:08

HTML canvas has always been a black box to the browser, but not anymore. The HTML-in-Canvas API lets you integrate real DOM elements directly into the canvas, making them fully searchable, accessible, natively translatable, and inspectable. Fuse shaders and semantics to build new UI, eliminating the need for separate DOM overlays → The web is about to get a whole lot more whimsical and we can't wait to see it 🎨

Chrome for Developers

41,367 views • 1 month ago

build an agent that speaks your UI. your charts. your forms. your seat maps. multi-turn, streaming, interactive. introducing tambo 1.0, the open-source generative UI toolkit for react.
1:11

build an agent that speaks your UI. your charts. your forms. your seat maps. multi-turn, streaming, interactive. introducing tambo 1.0, the open-source generative UI toolkit for react.

Michael Magán

261,592 views • 5 months ago

What if you could watch a UI generate in real-time as you work with AI? Now you can, with Real Time UI in MagicPath. This is extremely hard to do, especially for interactive React components with states. That’s why you don’t see this anywhere else. This is a first.
0:33

What if you could watch a UI generate in real-time as you work with AI? Now you can, with Real Time UI in MagicPath. This is extremely hard to do, especially for interactive React components with states. That’s why you don’t see this anywhere else. This is a first.

Pietro Schirano

51,983 views • 11 months ago

600 SVGs available on Svgl 🥳🚀 ✓ Fully optimized ✓ React, Vue, Angular, Astro, Svelte & Web Components ✓ Add SVGs with the shadcn/ui CLI ✓ Free API ✓ Raycast extension, npm packages, and CLIs built by contributors and 100% free, open source ✨
0:25

600 SVGs available on Svgl 🥳🚀 ✓ Fully optimized ✓ React, Vue, Angular, Astro, Svelte & Web Components ✓ Add SVGs with the shadcn/ui CLI ✓ Free API ✓ Raycast extension, npm packages, and CLIs built by contributors and 100% free, open source ✨

Pablo

95,527 views • 4 months ago

Introducing 21st Agent Elements Diffed edits. Plan approvals. Clarifying questions. Sub-agents. Tool cards. The pieces every "agent UI" lib skips. 25 shadcn /ui components built for the new generation of agents that use your computer. Open-source. Link in thread 🧵
0:28

Introducing 21st Agent Elements Diffed edits. Plan approvals. Clarifying questions. Sub-agents. Tool cards. The pieces every "agent UI" lib skips. 25 shadcn /ui components built for the new generation of agents that use your computer. Open-source. Link in thread 🧵

serafim

44,036 views • 3 months ago

Open-source and free apps for coders - 7000+ free SVG icons - Open-source collection of CSS cursors - Turns your Chrome into stable commands for the AI agents - Free design inspiration from top sites - Open-source animated UI Components for React
0:47

Open-source and free apps for coders - 7000+ free SVG icons - Open-source collection of CSS cursors - Turns your Chrome into stable commands for the AI agents - Free design inspiration from top sites - Open-source animated UI Components for React

Csaba Kissi

22,925 views • 7 days ago

Introducing Agents UI, an open-source shadcn component library for building polished React frontends for your voice agents. Audio visualizers. Media controls. Session management tools. Chat transcripts. All wired to LiveKit Agents. Install via the shadcn CLI and own the code.
0:43

Introducing Agents UI, an open-source shadcn component library for building polished React frontends for your voice agents. Audio visualizers. Media controls. Session management tools. Chat transcripts. All wired to LiveKit Agents. Install via the shadcn CLI and own the code.

LiveKit

182,887 views • 4 months ago

💬assistant-ui is an open-source TypeScript/React library for AI chat. It brings a ChatGPT-like UI directly into your app. Get started via `npx assistant-ui init`. Congrats on the launch, Simon Farshid!
0:58

💬assistant-ui is an open-source TypeScript/React library for AI chat. It brings a ChatGPT-like UI directly into your app. Get started via `npx assistant-ui init`. Congrats on the launch, Simon Farshid!

Y Combinator

132,190 views • 1 year 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!
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 views • 1 year ago

Introducing the Generative UI Research Canvas ✨ Every agent needs a powerful UI Combine LangChain, Tavily, Tako and CopilotKit🪁 and you get a LangChain-based research agent with a Generative UI-driven frontend. When agents can explore the underlying data, research becomes more trustworthy and useful. How does this work? - LangChain manages the agent workflow and tool orchestration. - Tako converts retrieved data into structured, visual components - Tavily provides agentic search - CopilotKit renders those components in the UI and keeps the user in the loop while the agent is working So instead of a boring and static report, the output is an interactive research canvas that evolves as the agent runs. 2026 is the year where users want to see the output, not read it... Generative UI makes this possible for agentic applications. Tutorial: Open-Source Repo: Docs:
0:36

Introducing the Generative UI Research Canvas ✨ Every agent needs a powerful UI Combine LangChain, Tavily, Tako and CopilotKit🪁 and you get a LangChain-based research agent with a Generative UI-driven frontend. When agents can explore the underlying data, research becomes more trustworthy and useful. How does this work? - LangChain manages the agent workflow and tool orchestration. - Tako converts retrieved data into structured, visual components - Tavily provides agentic search - CopilotKit renders those components in the UI and keeps the user in the loop while the agent is working So instead of a boring and static report, the output is an interactive research canvas that evolves as the agent runs. 2026 is the year where users want to see the output, not read it... Generative UI makes this possible for agentic applications. Tutorial: Open-Source Repo: Docs:

Atai Barkai

11,997 views • 5 months ago

Introducing Instant Apps — your Tasklet agent can now build live, interactive apps for you on-demand. Describe what you need & get the perfect custom UI in seconds — connected to your real, live data. 🧵
3:32

Introducing Instant Apps — your Tasklet agent can now build live, interactive apps for you on-demand. Describe what you need & get the perfect custom UI in seconds — connected to your real, live data. 🧵

Tasklet

12,599,624 views • 4 months ago

Introducing Loading UI ⏳ if your loading state is just <Loader2 /> it's for you → 35+ components → shadcn compatible → simplest api, fully customizable free and open-source install, customize, plug-in check at loading-ui(.)com 🔥
0:24

Introducing Loading UI ⏳ if your loading state is just <Loader2 /> it's for you → 35+ components → shadcn compatible → simplest api, fully customizable free and open-source install, customize, plug-in check at loading-ui(.)com 🔥

Bart ⚡

105,535 views • 2 months ago

Should agentic UI be controlled by the server or the host? 🤔 In mcp-ui, servers can now define the UI layout and effects, and hosts can render it with their own look and feel! Supports React and Web Components with Shopify's remote-dom. Hit us up with use cases (+Liad Yosef)
0:31

Should agentic UI be controlled by the server or the host? 🤔 In mcp-ui, servers can now define the UI layout and effects, and hosts can render it with their own look and feel! Supports React and Web Components with Shopify's remote-dom. Hit us up with use cases (+Liad Yosef)

Ido Salomon

25,037 views • 1 year ago

Introducing Kanvas a visual workspace to think, plan, and build ideas on a single canvas Built using the html canvas api >Collaborate in real time >Create freely or stay structured >Design with AI help >Privacy Kanvas is simple, visual, and powerful , with AI built right into the canvas link in comment
2:46

Introducing Kanvas a visual workspace to think, plan, and build ideas on a single canvas Built using the html canvas api >Collaborate in real time >Create freely or stay structured >Design with AI help >Privacy Kanvas is simple, visual, and powerful , with AI built right into the canvas link in comment

deep

17,616 views • 5 months 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.
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 views • 1 year ago