Loading video...

Video Failed to Load

Go Home

🚨 Electrical engineers are going to hate this. Someone just turned React into a circuit board factory. Write code. Get a real PCB manufactured and delivered to your door. It's called tscircuit. React for Electronics. No Altium. No $10,000/year licenses. No 6-month learning curve. You write React components. But...

heynavtoor's profile picture

Nav Toor

147,877 subscribers

380,015 views • 3 months ago •via X (Twitter)

EducationScience & Technology
LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

designing my new personal site with Pencil.dev connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design
0:31

designing my new personal site with Pencil.dev connected it to Claude Code and turned on "Swarm Mode" and watched agents design my site in real-time, with their cursors actually moving and operating the screen, not just cosmetically! instead of the agents producing a raw HTML file, they generate something called .pen which is just a json file describing all layouts, components, and design. this means that it's easier than ever to have teams collaborate on design exactly as they do on source code (designers and engineers can now speak the same language!) once you are happy with a screen, you can open a new chat and reference .pen frame and start to generate the code (in React/ Next/ Tailwind etc), and run it on your dev server, producing a live website that visually matches your design

Sandra

93,463 views • 3 months 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 Instant Agents. Your AI team for Shopify that actually does the work: “Build me a PDP for this product.” “Turn this Figma design into a live page.” “Test 3 variants and pick a winner.” “Create better product images.” Done. Instant Agents are there for you 24/7. We’ve trained AI to understand our product. This way you get the true power of AI in combination with the visual control of our no-code builder. Real layouts, real components. Published to Shopify in 1 click.
1:07

Introducing Instant Agents. Your AI team for Shopify that actually does the work: “Build me a PDP for this product.” “Turn this Figma design into a live page.” “Test 3 variants and pick a winner.” “Create better product images.” Done. Instant Agents are there for you 24/7. We’ve trained AI to understand our product. This way you get the true power of AI in combination with the visual control of our no-code builder. Real layouts, real components. Published to Shopify in 1 click.

Instant

11,271 views • 2 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

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 views • 1 year ago

🚨 BREAKING: Someone just built a tool that generates and visualizes complex 3d particle systems just by typing a prompt. You tell it what you want, it builds the physics, and you export the react or three.js code instantly. 100% Free.
1:01

🚨 BREAKING: Someone just built a tool that generates and visualizes complex 3d particle systems just by typing a prompt. You tell it what you want, it builds the physics, and you export the react or three.js code instantly. 100% Free.

Simplifying AI

190,300 views • 3 months ago

Introducing Cleo, a new AI developer tool for React. Select an element, write a prompt, and watch your changes happen in real time.
0:39

Introducing Cleo, a new AI developer tool for React. Select an element, write a prompt, and watch your changes happen in real time.

Houssein Djirdeh

33,818 views • 6 months ago

🚨Architects are going to hate this. Someone just open sourced a full 3D building editor that runs entirely in your browser. No AutoCAD. No Revit. No $5,000/year licenses. It's called Pascal Editor. Built with React Three Fiber and WebGPU -- meaning it renders directly on your GPU at near-native speed. Here's what's inside this thing: → A full building/level/wall/zone hierarchy you can edit in real time → An ECS-style architecture where every object updates through GPU-powered systems → Zustand state management with full undo/redo built in → Next.js frontend so it deploys as a web app, not a desktop install → Dirty node tracking -- only re-renders what changed, not the whole scene Here's the wildest part: You can stack, explode, or solo individual building levels. Select a zone, drag a wall, reshape a slab -- all in 3D, all in the browser. Architecture firms pay $50K+ per seat for BIM software that does this workflow. This is free. 100% Open Source.
1:38

🚨Architects are going to hate this. Someone just open sourced a full 3D building editor that runs entirely in your browser. No AutoCAD. No Revit. No $5,000/year licenses. It's called Pascal Editor. Built with React Three Fiber and WebGPU -- meaning it renders directly on your GPU at near-native speed. Here's what's inside this thing: → A full building/level/wall/zone hierarchy you can edit in real time → An ECS-style architecture where every object updates through GPU-powered systems → Zustand state management with full undo/redo built in → Next.js frontend so it deploys as a web app, not a desktop install → Dirty node tracking -- only re-renders what changed, not the whole scene Here's the wildest part: You can stack, explode, or solo individual building levels. Select a zone, drag a wall, reshape a slab -- all in 3D, all in the browser. Architecture firms pay $50K+ per seat for BIM software that does this workflow. This is free. 100% Open Source.

Guri Singh

2,967,409 views • 3 months ago

🚨BREAKING: Someone just built a tool that generates full 3D particle systems from a single text prompt. You describe what you want. It builds the simulation and you export production-ready React or Three.js code instantly. 100% Free.
0:20

🚨BREAKING: Someone just built a tool that generates full 3D particle systems from a single text prompt. You describe what you want. It builds the simulation and you export production-ready React or Three.js code instantly. 100% Free.

Rimsha Bhardwaj

156,120 views • 3 months ago

Introducing proof of concept React Imgui! The name is a joke, but it is accurate enough. In the last few days I have been working on a prototype of React driving Dear ImGui using Static Hermes. The result is a fully native app written almost entirely in JavaScript, using unmodified React, typed JS, plus a very small amount of glue C++ code and unmodified Dear ImGui and Sokol. The actual renderer translating React into Dear ImGui is written entirely in typed JS using zero-cost FFI. Of course this wouldn't be possible without React's great design and flexibility. I find it really fascinating that I was able to take literally unmodified React, write a little extra JS, and get a functional fully native app so quickly. Of course everything is unoptimized, and prototype code quality, and who knows how buggy, but it seems to work well enough. Please, watch the video to see it in action. If there is interest, I will write a more detailed article.
3:02

Introducing proof of concept React Imgui! The name is a joke, but it is accurate enough. In the last few days I have been working on a prototype of React driving Dear ImGui using Static Hermes. The result is a fully native app written almost entirely in JavaScript, using unmodified React, typed JS, plus a very small amount of glue C++ code and unmodified Dear ImGui and Sokol. The actual renderer translating React into Dear ImGui is written entirely in typed JS using zero-cost FFI. Of course this wouldn't be possible without React's great design and flexibility. I find it really fascinating that I was able to take literally unmodified React, write a little extra JS, and get a functional fully native app so quickly. Of course everything is unoptimized, and prototype code quality, and who knows how buggy, but it seems to work well enough. Please, watch the video to see it in action. If there is interest, I will write a more detailed article.

Tzvetan Mikov

211,018 views • 8 months ago

THIS GUY VIBE CODED A TRUE 3D PROPERTY TOUR TOOL WITH CLAUDE CODE not the fake 360 photo stitching that matterport does, actual 3D right now if you're a real estate agent and want a property tour you need: > a matterport camera ($3000+) > a photographer who knows how to use it > matterport's monthly subscription > and you still get a glorified panorama, not real 3D this guy built a tool that takes your existing captures (camera files, drone shots, 360 photos, EVEN phone captures) and turns them into a real interactive 3D tour in one workflow no specialized hardware, no photographer, no switching between 5 different tools real estate agents, property managers, airbnb hosts, architects, interior designers all of them are paying hundreds per property for something this tool does from captures they already have the painful part was never understanding the end result. everyone knows what a 3D tour looks like. the pain is going from a pile of messy capture files to something usable without it turning into a technical project this solves that with one workflow you dump your files in and get a 3D tour out insane what you can do with vibe coding
1:01

THIS GUY VIBE CODED A TRUE 3D PROPERTY TOUR TOOL WITH CLAUDE CODE not the fake 360 photo stitching that matterport does, actual 3D right now if you're a real estate agent and want a property tour you need: > a matterport camera ($3000+) > a photographer who knows how to use it > matterport's monthly subscription > and you still get a glorified panorama, not real 3D this guy built a tool that takes your existing captures (camera files, drone shots, 360 photos, EVEN phone captures) and turns them into a real interactive 3D tour in one workflow no specialized hardware, no photographer, no switching between 5 different tools real estate agents, property managers, airbnb hosts, architects, interior designers all of them are paying hundreds per property for something this tool does from captures they already have the painful part was never understanding the end result. everyone knows what a 3D tour looks like. the pain is going from a pile of messy capture files to something usable without it turning into a technical project this solves that with one workflow you dump your files in and get a 3D tour out insane what you can do with vibe coding

Om Patel

156,393 views • 1 month ago

It's 2024! You can start a career in tech without learning to code. Enroll into the School of Product to earn a diploma in no-code tech skills like: Product Design, Product Marketing, and Product Management. Start today and earn your certification in just 12 months!
0:59

It's 2024! You can start a career in tech without learning to code. Enroll into the School of Product to earn a diploma in no-code tech skills like: Product Design, Product Marketing, and Product Management. Start today and earn your certification in just 12 months!

AltSchool Africa

5,957,993 views • 2 years ago

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.
12:14

Cat Wu, head of product for Claude Code at Anthropic: "you can build almost anything with Claude from a single prompt now" one prompt gets you a working screen, not YOUR product Claude Code has never seen your design system, so it guesses the look fresh every time. how to hand Claude Code that system is in the article. better than the $300 design course in your tabs, and this one's free.

Mnimiy

112,687 views • 14 days ago

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,037 views • 1 year ago

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams
0:48

A designer who can ship code is one of the most valuable hires in tech today. Here's my new episode with Felix Lee (CEO of ADPList) where he showed me how to use Claude Code and Figma MCP to go from: ✅ Figma → Code: Design to website in 15 min ✅ Code → Figma: App back to editable design Felix also demoed a few apps he's designed and built in Claude Code, including a 3D globe website and a landing page analyzer. Some takeaways from Felix: 1. Stop pasting screenshots into Claude Code. Instead, use Figma MCP to pull in all your assets, icons, and images automatically. 2. You can use the same MCP to convert code back into editable Figma layers to explore more variations. 3. An underrated way to build: Use FigJam to plan a flowchart of your app first, then paste the link into Claude Code with the MCP. 📌 Watch now: Thanks to our sponsors: Replit ⠕: Plan, design, and build with AI agents Linear: The AI agent platform for modern teams

Peter Yang

77,115 views • 3 months ago

YOU DON’T NEED A LAB TO BUILD HARDWARE ANYMORE Tinkercad lets you design circuits, simulate Arduino code & 3D model all in your browser no installs. no setup. no excuses perfect for beginners → powerful enough for real prototyping
2:23

YOU DON’T NEED A LAB TO BUILD HARDWARE ANYMORE Tinkercad lets you design circuits, simulate Arduino code & 3D model all in your browser no installs. no setup. no excuses perfect for beginners → powerful enough for real prototyping

Vaishnavi

32,220 views • 2 months ago

⚡Diode Computers, Inc. (YC S24) is building an end-to-end circuit board design and ordering platform, to help you go from requirements to a working board in days instead of months. Congrats on the launch, Davide Asnaghi and Lenny Khazan!
0:28

⚡Diode Computers, Inc. (YC S24) is building an end-to-end circuit board design and ordering platform, to help you go from requirements to a working board in days instead of months. Congrats on the launch, Davide Asnaghi and Lenny Khazan!

Y Combinator

45,473 views • 1 year ago

New short course: Collaborative Writing and Coding with OpenAI Canvas! Explore new ways to write and code with OpenAI Canvas, a user-friendly interface that allows you to brainstorm, draft, and refine text and code in collaboration with ChatGPT. In the short course, created with OpenAI, and taught by , a research lead at OpenAI, you’ll learn to use Canvas to enhance your workflows. Canvas lets you go beyond simple chat interactions. It provides a side-by-side workspace where you and ChatGPT can edit and refine text or code collaboratively. This makes brainstorming, drafting, and iterating as you write feel more natural and effective. As the first major update to ChatGPT’s visual interface since its launch in 2022, Canvas gives a new, innovative approach to collaboration with AI. For instance, after writing the first version of your code, Canvas can review it and give suggestions for improvement. It can also help with debugging by adding logging, identifying problems to fix, and writing comments. In addition, you'll also learn what it takes to train the model for an interface like Canvas. In this video-only short course, you’ll: - Learn how to ask for in-line feedback and control the iteration of your work by directly editing selected areas of your text or code from the model’s output. - Learn how to access quick automation tools in a shortcut menu that allows you to modify your writing tone and length, enhance your code, and restore previous versions of your work. - Learn how to use Canvas as a research assistant tool with an example of asking the model to reason through the screenshot of a plot to write a research report, in which you can ask questions within the created report. - Ask the model to write Python code to replicate the graph seen on a screenshot image. - Go behind the scenes of how you can create a video game, such as Space Battleship, from scratch, edit it, and display it in one self-contained HTML file. - Get a real-world application example of creating a SQL database from the image of its architecture. - Understand the model training and design processes that power Canvas! Please sign up here:
1:49

New short course: Collaborative Writing and Coding with OpenAI Canvas! Explore new ways to write and code with OpenAI Canvas, a user-friendly interface that allows you to brainstorm, draft, and refine text and code in collaboration with ChatGPT. In the short course, created with OpenAI, and taught by , a research lead at OpenAI, you’ll learn to use Canvas to enhance your workflows. Canvas lets you go beyond simple chat interactions. It provides a side-by-side workspace where you and ChatGPT can edit and refine text or code collaboratively. This makes brainstorming, drafting, and iterating as you write feel more natural and effective. As the first major update to ChatGPT’s visual interface since its launch in 2022, Canvas gives a new, innovative approach to collaboration with AI. For instance, after writing the first version of your code, Canvas can review it and give suggestions for improvement. It can also help with debugging by adding logging, identifying problems to fix, and writing comments. In addition, you'll also learn what it takes to train the model for an interface like Canvas. In this video-only short course, you’ll: - Learn how to ask for in-line feedback and control the iteration of your work by directly editing selected areas of your text or code from the model’s output. - Learn how to access quick automation tools in a shortcut menu that allows you to modify your writing tone and length, enhance your code, and restore previous versions of your work. - Learn how to use Canvas as a research assistant tool with an example of asking the model to reason through the screenshot of a plot to write a research report, in which you can ask questions within the created report. - Ask the model to write Python code to replicate the graph seen on a screenshot image. - Go behind the scenes of how you can create a video game, such as Space Battleship, from scratch, edit it, and display it in one self-contained HTML file. - Get a real-world application example of creating a SQL database from the image of its architecture. - Understand the model training and design processes that power Canvas! Please sign up here:

Andrew Ng

128,085 views • 1 year ago

Your canvas just got a powerful new instrument: the Creative Code node. Write, prompt, and generate embeddable sketches—right inside your Fuser workflow. Use Three.js, p5.js, and HTML5 to build interactive visuals, 3D scenes, animations, and more. Describe what you want, and watch it come to life. Then dig into the code if you want to go deeper.
0:40

Your canvas just got a powerful new instrument: the Creative Code node. Write, prompt, and generate embeddable sketches—right inside your Fuser workflow. Use Three.js, p5.js, and HTML5 to build interactive visuals, 3D scenes, animations, and more. Describe what you want, and watch it come to life. Then dig into the code if you want to go deeper.

Fuser

102,398 views • 3 months ago