Loading video...

Video Failed to Load

Go Home

Why HTML turned out to be the foundation for agentic video making from Bin Liu: “We’ve been trying to build a video agent. However, we learned the hard way that agents have no visual intelligence. So that’s when we turned to code. HTML is the LLM’s native language. LLMs...

petergyang's profile picture

Peter Yang

230,695 subscribers

16,653 views • 23 days ago •via X (Twitter)

LIVE

Anya Rossi• Live Now

Private livecam show

0 Comments

No comments available

Comments from the original post will appear here

Related Videos

Markdown was doomed from the start. It's just a format with low information density. HTML is better for humans, and agents can now consume and produce it without issues. But nobody wants to type HTML, so here is an alternative: This is an open-source tool for generating dashboards from data without writing a single HTML tag. You define your dashboard in YAML or TSK, and the tool will serve the HTML file for you. It comes with skills for Claude Code and Codex, so they know how to build these dashboards. And you can connect this to Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and many other databases. Repo link below.
4:08

Markdown was doomed from the start. It's just a format with low information density. HTML is better for humans, and agents can now consume and produce it without issues. But nobody wants to type HTML, so here is an alternative: This is an open-source tool for generating dashboards from data without writing a single HTML tag. You define your dashboard in YAML or TSK, and the tool will serve the HTML file for you. It comes with skills for Claude Code and Codex, so they know how to build these dashboards. And you can connect this to Postgres, MySQL, Snowflake, BigQuery, Redshift, Databricks, and many other databases. Repo link below.

Santiago

86,394 views • 2 months ago

LLM Wikis + HTML Artifacts are insanely powerful. You should seriously consider this in your workflows. LLM Wikis captures all the important information that lets you and your agents do meaningful work. HTML artifacts present that information in interesting ways that allow you to take important actions along with your agents. My HTML artifacts sit on top of my LLM wikis. They are dynamic and are easily extended as needs arise. I have hooked my Artifacts to talk to my agents, and similarly, the agents can talk to artifacts. This has allowed me to build powerful artifacts that reduce my inbox to zero, keep me updated on any topic of interest, fast prototyping, do deep research, design/trigger new experiments, generate figures to improve understanding, schedule research, search relevant information, discover topics, and so much more. What you see in the clip is not a website. It's a simple interactive HTML artifact. HTML artifacts are useful for designers, engineers, researchers, students, and anyone working with agents. Lastly, HTML doesn't replace Markdown. They are a much better combination working together.
0:20

LLM Wikis + HTML Artifacts are insanely powerful. You should seriously consider this in your workflows. LLM Wikis captures all the important information that lets you and your agents do meaningful work. HTML artifacts present that information in interesting ways that allow you to take important actions along with your agents. My HTML artifacts sit on top of my LLM wikis. They are dynamic and are easily extended as needs arise. I have hooked my Artifacts to talk to my agents, and similarly, the agents can talk to artifacts. This has allowed me to build powerful artifacts that reduce my inbox to zero, keep me updated on any topic of interest, fast prototyping, do deep research, design/trigger new experiments, generate figures to improve understanding, schedule research, search relevant information, discover topics, and so much more. What you see in the clip is not a website. It's a simple interactive HTML artifact. HTML artifacts are useful for designers, engineers, researchers, students, and anyone working with agents. Lastly, HTML doesn't replace Markdown. They are a much better combination working together.

elvis

246,912 views • 2 months ago

Take any Python code and build a dynamic GUI on top of it by dragging and dropping components. Python is already the most popular language in the world. This makes it even better! The attached video is only 45 seconds. It will show you how it works. Here is the important part: You can now build an interface for your Python code without learning HTML, JavaScript, or CSS. Go to this link to try this: Remember to work smarter, not harder! Thanks to the team behind Taipy for partnering with me on this post.
0:45

Take any Python code and build a dynamic GUI on top of it by dragging and dropping components. Python is already the most popular language in the world. This makes it even better! The attached video is only 45 seconds. It will show you how it works. Here is the important part: You can now build an interface for your Python code without learning HTML, JavaScript, or CSS. Go to this link to try this: Remember to work smarter, not harder! Thanks to the team behind Taipy for partnering with me on this post.

Santiago

155,179 views • 2 years ago

Want to turn a website into a launch video for your brand? This tutorial shows you how We used ollama as example, but the workflow works for any company. Every frame is HTML, CSS, and GSAP, written like a webpage and rendered with HyperFrames Follow the workflow below ↓
0:38

Want to turn a website into a launch video for your brand? This tutorial shows you how We used ollama as example, but the workflow works for any company. Every frame is HTML, CSS, and GSAP, written like a webpage and rendered with HyperFrames Follow the workflow below ↓

HeyGen

35,896 views • 1 month ago

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.
0:43

This is how i build everything now. Before the agents touch a line of code "before you do any building make 10 mock ups in html of how we can make it look" I then pick a path and ask for more mockups until I feel happy with the feel. The only way to work with these things.

0xSero

25,695 views • 4 months ago

receiving a lot of good words about lavish-axi (ty!) in v0.1.27 i just made it installable and invocable as a skill "/lavish" or with a prompt "/lavish let's discuss what options we have" this is the quickest way to upgrade your workflow from reading long wall of text and markdown to interactive html artifacts which are a lot more pleasant and efficient to work with why not just ask the agent to write an html? you'll know when you need to give some feedback to the agent about things in the html and realize there's no good way to make those edits and iterations. lavish gives you the ability to work with the agent via the html itself if you have been using lavish already, make sure to upgrade to latest version! quite a few good bug fixes shipped recently that would help the agent generate correct styling and poll more reliably
0:33

receiving a lot of good words about lavish-axi (ty!) in v0.1.27 i just made it installable and invocable as a skill "/lavish" or with a prompt "/lavish let's discuss what options we have" this is the quickest way to upgrade your workflow from reading long wall of text and markdown to interactive html artifacts which are a lot more pleasant and efficient to work with why not just ask the agent to write an html? you'll know when you need to give some feedback to the agent about things in the html and realize there's no good way to make those edits and iterations. lavish gives you the ability to work with the agent via the html itself if you have been using lavish already, make sure to upgrade to latest version! quite a few good bug fixes shipped recently that would help the agent generate correct styling and poll more reliably

Kun Chen

14,584 views • 1 month ago

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.
0:55

My favorite way of interacting with Claude Code is to have it generate static HTML files as outputs (reports, explorations, code structure, mockups etc.) I wanted to iterate on the file by commenting in browser and having Claude update the output live. So, I built this Claude Skill👇 How it works: - Install Claude Code skill (ask it to clone repo) - Build an HTML page for anything (e.g. research coding agents and generate HTML report) - Ask it to make the page interactive That's it. CC will launch a localhost server and allow you to then leave comments on the page itself and once it updates, will give you a tour of changes. It's like Google Docs kind of comments/iteration but for HTML pages.

Paras Chopra

214,709 views • 1 month ago

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.
1:19

Introducing /visual-plan - a skill to generate rich, visual plans for Claude Code and Codex. Plan mode in Claude Code is incredible. But I always find my eyes glazing over when it gives me this huge markdown essay in my terminal. I found I can make much better visual plans with reusable components. So I made a skill called `/visual-plan`. It generates plans as MDX with visual, interactive components. Diagrams, interactive API specs, schema design changes, annotated code, and even pan and zoomable wireframes. So for any UI work, you can look at a wireframe first, comment on it, iterate, and then have the agent work. I’ve found this to be a much more intuitive interface for reasoning about what the agent is doing. It’s somewhat inspired by that popular post about how HTML is better than Markdown. But HTML can be slow and verbose to write. And it doesn’t look good checked into a repo. This has really made me feel like humans and engineering are entering a new abstraction phase, where we reason about things at the plan level. As long as the plan is good, agents are getting more and more reliable at executing on it. Almost to the degree that we trust the C compiler to compile to assembly reliably. Plans are the new intermediate representation. I also made a skill for the reverse of this, called `/visual-recap`. After the agent works, it gives you a recap of everything it did. Same idea: wireframes, interactive API specs and diffs, schemas, annotated code, etc. So now when you’re reviewing what the agent did for you, or looking at a pull request of somebody else’s code, you can see a visual recap instead of just reading a wall of text. It’s all free and open source. You can find it on my GitHub. Will link to it in the reply because we all know how dumb these algorithms are with links.

Steve (Builder.io)

123,405 views • 28 days ago

Cursor for Animation? Yes. Yesterday I learned that you can use cursor to create After Effects Animations. Today, I learned that it might be better to use a simple html file instead of After Effects. (there are pros and cons) Here is a simple video showing how to get started: TimeStamps 00:00 Intro 00:54 Cursor only (html js) 10:30 Cursor + After Effects Tomorrow we're actually going to try and make some INSANE STUFF.
23:07

Cursor for Animation? Yes. Yesterday I learned that you can use cursor to create After Effects Animations. Today, I learned that it might be better to use a simple html file instead of After Effects. (there are pros and cons) Here is a simple video showing how to get started: TimeStamps 00:00 Intro 00:54 Cursor only (html js) 10:30 Cursor + After Effects Tomorrow we're actually going to try and make some INSANE STUFF.

Riley Brown

50,198 views • 1 year ago

'I’ve always loved working with visual artists and following on from the competition that we ran with Stability AI around the release of i/o, we are setting up 5050 to encourage the creation of more of these collaborations. So if you have any type of visual work that you would like to try out alongside my music in a video, this is a place where you can explore it. Also, it didn’t seem fair that the music creators get all the revenue on platforms such as YouTube, so we’ve called it 5050 as we look to have a fairer share between the visual and music creators.' - pg Visit for more information & to watch the Olive Tree video by Oranguerillatan
0:30

'I’ve always loved working with visual artists and following on from the competition that we ran with Stability AI around the release of i/o, we are setting up 5050 to encourage the creation of more of these collaborations. So if you have any type of visual work that you would like to try out alongside my music in a video, this is a place where you can explore it. Also, it didn’t seem fair that the music creators get all the revenue on platforms such as YouTube, so we’ve called it 5050 as we look to have a fairer share between the visual and music creators.' - pg Visit for more information & to watch the Olive Tree video by Oranguerillatan

Peter Gabriel

44,583 views • 1 year ago

The web was never meant to be flattened into text. Yet most web RAG systems start by parsing HTML --- a complex and lossy process. 🔥 Introducing PixelRAG: the first RAG system that retrieves and reads 30M+ web pages as pixels. Instead of extracting text, PixelRAG retrieves screenshots and lets a VLM read them directly. PixelRAG not only preserves visual information, but also outperforms text-based RAG on text-only QA benchmarks by +18.1%. Why? (1) HTML-to-text conversion often discards layout, structure, tables, and other useful signals. (2) We continued pretraining a VLM on web page screenshots and turned it into a surprisingly strong visual retriever. (3) Recent VLMs are remarkably good at understanding web pages, often with better accuracy and token efficiency than text-only pipelines. Takeaway: HTML parsing may be one of the biggest self-inflicted bottlenecks in web RAG. Demo below 👇 Code: Paper: Playground:
0:55

The web was never meant to be flattened into text. Yet most web RAG systems start by parsing HTML --- a complex and lossy process. 🔥 Introducing PixelRAG: the first RAG system that retrieves and reads 30M+ web pages as pixels. Instead of extracting text, PixelRAG retrieves screenshots and lets a VLM read them directly. PixelRAG not only preserves visual information, but also outperforms text-based RAG on text-only QA benchmarks by +18.1%. Why? (1) HTML-to-text conversion often discards layout, structure, tables, and other useful signals. (2) We continued pretraining a VLM on web page screenshots and turned it into a surprisingly strong visual retriever. (3) Recent VLMs are remarkably good at understanding web pages, often with better accuracy and token efficiency than text-only pipelines. Takeaway: HTML parsing may be one of the biggest self-inflicted bottlenecks in web RAG. Demo below 👇 Code: Paper: Playground:

Yichuan Wang

89,045 views • 1 month ago

Introducing Clips - 100% free, open source, agent-native alternative to Loom Unlike Loom, agent's can fully understand Clips just from a URL. Every Clip comes with APIs and metadata for agents to explore their contents. Agents can "see and hear" anything in a Clip - not just transcripts, but everything visually in the video at any timestamp. Easily share bug reports, feedback, analyses, or anything else in a way that you can easily pass to agents to use to improve products, reports, or more. Also unlike Loom, you own the software, so no one can jack up prices on you suddenly like Loom did to us. Clips is made to be customized. The built-in agent can customize its own code, so you can personalize the app to your needs and workflows. This, in my opinion, is the future of software. Open-source, forkable, customizable with agents, to make your own personal version of anything. You can also import Looms just from a URL and upload videos as well. I got so sick of telling people "don't send me feedback as looms, I can't pass those to agents, I need text and images" that I had to just solve this once and for all. There's a free hosted version you can use too, or fork and self host yourself. Will link to both in the replies.
0:35

Introducing Clips - 100% free, open source, agent-native alternative to Loom Unlike Loom, agent's can fully understand Clips just from a URL. Every Clip comes with APIs and metadata for agents to explore their contents. Agents can "see and hear" anything in a Clip - not just transcripts, but everything visually in the video at any timestamp. Easily share bug reports, feedback, analyses, or anything else in a way that you can easily pass to agents to use to improve products, reports, or more. Also unlike Loom, you own the software, so no one can jack up prices on you suddenly like Loom did to us. Clips is made to be customized. The built-in agent can customize its own code, so you can personalize the app to your needs and workflows. This, in my opinion, is the future of software. Open-source, forkable, customizable with agents, to make your own personal version of anything. You can also import Looms just from a URL and upload videos as well. I got so sick of telling people "don't send me feedback as looms, I can't pass those to agents, I need text and images" that I had to just solve this once and for all. There's a free hosted version you can use too, or fork and self host yourself. Will link to both in the replies.

Steve (Builder.io)

228,906 views • 22 days ago

Okay, so I'm pretty sure I've found the best way in the world to create dynamic Open Graph images! And I've turned it into a little product that I'd love to show you 🤩 Check out this quick video tour of Ogkit to see how it works 👇 (I promise it's pretty cool!) TL;DR: Drop any HTML into a tag and Ogkit turns it into a dynamically generated Open Graph image for that page. Works with literally any stack. The only dependency is a tiny JS script. Got any questions about Ogkit? Would love to answer them!
3:53

Okay, so I'm pretty sure I've found the best way in the world to create dynamic Open Graph images! And I've turned it into a little product that I'd love to show you 🤩 Check out this quick video tour of Ogkit to see how it works 👇 (I promise it's pretty cool!) TL;DR: Drop any HTML into a tag and Ogkit turns it into a dynamically generated Open Graph image for that page. Works with literally any stack. The only dependency is a tiny JS script. Got any questions about Ogkit? Would love to answer them!

Peter Suhm

97,656 views • 10 months ago

"I've spent $30K on a launch video, now you can make one with code." Here's my new episode with Bin Liu and Jake Moran, where they shared their 5-step playbook for using HyperFrames to make professional launch videos in Codex and Claude Code: 1. Gather video assets and create a frame.md 2. Create a storyboard.md with the scenes 3. Pull animations from the HyperFrames repo 4. Generate and review static frames 5. Build the video with HyperFrames Studio You can also start simple by using the built-in /website-to-video skill to one shot a launch video from any URL. HyperFrames is 100% free and I love how it democratizes video creation for everyone. 📌 Watch now: Thanks to our sponsors: Wispr Flow: 4x faster than typing with your voice Riverside: All-in-one AI studio for podcasts and video
0:43

"I've spent $30K on a launch video, now you can make one with code." Here's my new episode with Bin Liu and Jake Moran, where they shared their 5-step playbook for using HyperFrames to make professional launch videos in Codex and Claude Code: 1. Gather video assets and create a frame.md 2. Create a storyboard.md with the scenes 3. Pull animations from the HyperFrames repo 4. Generate and review static frames 5. Build the video with HyperFrames Studio You can also start simple by using the built-in /website-to-video skill to one shot a launch video from any URL. HyperFrames is 100% free and I love how it democratizes video creation for everyone. 📌 Watch now: Thanks to our sponsors: Wispr Flow: 4x faster than typing with your voice Riverside: All-in-one AI studio for podcasts and video

Peter Yang

68,646 views • 23 days ago

TypeScript was inspired by a strange ask from the outlook team. Anders Hejlsberg(Anders Hejlsberg) - creator of C#, TypeScript, Turbo Pascal & Delphi - tells us how TypeScript was born: “The world started building larger and larger applications in JavaScript. We saw that externally, but also internally. One of the trigger events was when the outlook team came to see the C# team and asked us whether we would pretty please productize this thing called Script#. And we go, well, what is Script#? It's this cross compiler that allows you to cross compile C# into JavaScript such that you can basically treat JavaScript as an instruction language and run your C# apps in a browser. Why would anyone want to do that? Well, because then you can get a grownup programming language with grownup tooling. You can use Visual Studio, you can have projects. You can do all of these wonderful things that you can't do with JavaScript because JavaScript is just the scripting language with shitty tooling. And we thought, well, perhaps a better approach would be to fix JavaScript. I mean, surely you're not going to be best of breed in the JavaScript ecosystem by telling people to write in a different programming language”
1:33

TypeScript was inspired by a strange ask from the outlook team. Anders Hejlsberg(Anders Hejlsberg) - creator of C#, TypeScript, Turbo Pascal & Delphi - tells us how TypeScript was born: “The world started building larger and larger applications in JavaScript. We saw that externally, but also internally. One of the trigger events was when the outlook team came to see the C# team and asked us whether we would pretty please productize this thing called Script#. And we go, well, what is Script#? It's this cross compiler that allows you to cross compile C# into JavaScript such that you can basically treat JavaScript as an instruction language and run your C# apps in a browser. Why would anyone want to do that? Well, because then you can get a grownup programming language with grownup tooling. You can use Visual Studio, you can have projects. You can do all of these wonderful things that you can't do with JavaScript because JavaScript is just the scripting language with shitty tooling. And we thought, well, perhaps a better approach would be to fix JavaScript. I mean, surely you're not going to be best of breed in the JavaScript ecosystem by telling people to write in a different programming language”

The Pragmatic Engineer

116,193 views • 1 month ago

Grok-3 now has an Artifacts feature. xAI team is adding new features and improving Grok-3 significantly. Currently, it supports HTML, CSS, and JS, but I guess we may soon see support for other languages too. Note: You can also use DeepSearch to pull data from the internet on any topic and later use it for page creation, it works really well. I have tested it too.
0:34

Grok-3 now has an Artifacts feature. xAI team is adding new features and improving Grok-3 significantly. Currently, it supports HTML, CSS, and JS, but I guess we may soon see support for other languages too. Note: You can also use DeepSearch to pull data from the internet on any topic and later use it for page creation, it works really well. I have tested it too.

AshutoshShrivastava

153,968 views • 1 year ago

1. Realistic Physics Game (Hexagon Test) Prompt: Create a HTML, CSS, and javascript where a ball is inside a rotating hexagon. The ball is affected by Earth’s gravity and friction from the hexagon walls. The bouncing must appear realistic. → Tests physics simulation, code planning, and visual realism. ChatGPT 5 won. Grok 4 lost. Note: I waited 7 minutes for Grok 4 to respond but it didn't worked and on the other hand ChatGPT 5 gave me a customizable canvas so I can play around with it. Check ChatGPT 5 output here:
1:49

1. Realistic Physics Game (Hexagon Test) Prompt: Create a HTML, CSS, and javascript where a ball is inside a rotating hexagon. The ball is affected by Earth’s gravity and friction from the hexagon walls. The bouncing must appear realistic. → Tests physics simulation, code planning, and visual realism. ChatGPT 5 won. Grok 4 lost. Note: I waited 7 minutes for Grok 4 to respond but it didn't worked and on the other hand ChatGPT 5 gave me a customizable canvas so I can play around with it. Check ChatGPT 5 output here:

Alex Prompter

562,694 views • 11 months ago