Loading video...

Video Failed to Load

There was a problem loading this video. This could be due to a temporary network issue or the video might be unavailable.

📣 Announcing: KickStart! A next-generation form builder from the FormKit team. Going live...now 👀 Generate a form, edit it with manual controls or AI prompts, then copy and paste Vue components or schema into your project. 🔗👇

Justin Schroeder

11,544 subscribers

41,015 views • 2 years ago •via X (Twitter)

Education News & Politics Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Justin Schroeder2 years ago

Get your form on now: Try it for free with your any GitHub account ❤️

Justin Schroeder2 years ago

Credit to @davidalexr987 for the AI architecture concepts, and @danielcroe and @leemartin who gave us the idea to have a snippets directory for people to kickstart their FormKit projects. This is a stab at our version of that vision 🙏

Nicolas Hedger2 years ago

@FormKit @vuejs mind. blown. 🤯

Justin Schroeder2 years ago

@FormKit @vuejs 🙏 thanks! Cant wait for you to try it

Chandler Sommerville2 years ago

@FormKit @vuejs This looks awesome!

Justin Schroeder2 years ago

@FormKit @vuejs Thanks! Hope it serves you well :)

Andrew Schmelyun2 years ago

@FormKit @vuejs Woah, this is incredible! Congrats on the launch, I can't wait to use it

Justin Schroeder2 years ago

@FormKit @vuejs Thank you! 🙏 let us know how it goes!

Abdelrahman Awad2 years ago

@FormKit @vuejs Nice work! Looks fantastic!

Israel Ortuño2 years ago

@FormKit @vuejs This is sick! 🔥

Related Videos

Announcing AI Roadmap Generator ✨ Enter any topic and let AI generate a visual roadmap for you. You can then edit that roadmap, save it, start learning from it or share it with others. Check it out 👇

Announcing AI Roadmap Generator ✨ Enter any topic and let AI generate a visual roadmap for you. You can then edit that roadmap, save it, start learning from it or share it with others. Check it out 👇

Kamran Ahmed

94,080 views • 2 years ago

In MagicPath 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 MagicPath 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,164 views • 1 year ago

Hell froze over: announcing FormKit for React. Secretly framework-agnostic since inception, today we’re open sourcing the most popular Vue form library…for React. Why is this a big deal? 1. Forms are still hard. We (the creators of FormKit) thought form libraries were no longer necessary, given the trajectory of coding agents. It turns out we were wrong, and we learned this the hard way. Need repeating conditional fields nested 3 layers deep inside a dynamic component, with accessibility, validation, internationalization, and backend error placement? Turns out coding agents aren’t great at that. It’s table stakes for FormKit. 2. Single component. This matters more than you would think, but FormKit doesn’t ship lots of different components each with its own props. Instead, it has a single one: and unified props. This was done to provide a better DX to human engineers. It makes it easy to spot when a given component was part of the form’s data structure vs a presentational component. It turns out this matters even more to coding agents than humans. No matter where your coding agent is, whenever it sees “FormKit” it immediately knows “oh, that’s part of the form’s data”. 3. No plumbing. FormKit doesn’t require any manual data collection, event listening, or state tracking. It does all this for you on a heavily tested, framework agnostic, self-assembling graph. The only code your agent needs to write is declarative templates and submission handlers that respond to the state. 4. Dense colocation. FormKit’s syntax happens to be ideal for coding agents; nearly everything you need to know about a given input is *on* the input: Colocation dramatically improves the efficacy of coding agents. 5. DOM. FormKit, unlike most form frameworks in React, renders the actual DOM. This also increases colocation and best practices, meaning your coding agent is far more likely to produce consistent and high-quality output that looks and acts the way its supposed to. 6. Schema. FormKit’s own inputs are not written using Vue or React — instead, FormKit has its own render schema — think of it like an AST for the DOM — and you can modify it on the fly. It’s not very human-friendly to write, but it turns out most models are already pretty well trained on FormKit’s schema. Want your inputs to look a bit different on one form than another? No problem, your coding agent can easily make those changes *without* modifying the JSX structure at all. Oh, and any inputs you create for Vue work with React and vice versa. 7. Plugins. FormKit leans into the unstructured tree graph hard. The graph doesn’t just collect data, it also passes down configuration and plugins. Want one form to work a bit differently than another one? No problem — just add a plugin to the top of that form or group and its children will all receive that feature. You can even mass assign props and configuration this way. Of course, FormKit has been solving these exact issues for a long time, but it wasn’t until we started using it on our own projects with coding agents that we realized what a huge advantage it is. With so many people using coding agents with React, it made sense to unveil FormKit for what it has always been — a completely framework-agnostic form framework that happens to unlock your coding agents. ➡️

Hell froze over: announcing FormKit for React. Secretly framework-agnostic since inception, today we’re open sourcing the most popular Vue form library…for React. Why is this a big deal? 1. Forms are still hard. We (the creators of FormKit) thought form libraries were no longer necessary, given the trajectory of coding agents. It turns out we were wrong, and we learned this the hard way. Need repeating conditional fields nested 3 layers deep inside a dynamic component, with accessibility, validation, internationalization, and backend error placement? Turns out coding agents aren’t great at that. It’s table stakes for FormKit. 2. Single component. This matters more than you would think, but FormKit doesn’t ship lots of different components each with its own props. Instead, it has a single one: and unified props. This was done to provide a better DX to human engineers. It makes it easy to spot when a given component was part of the form’s data structure vs a presentational component. It turns out this matters even more to coding agents than humans. No matter where your coding agent is, whenever it sees “FormKit” it immediately knows “oh, that’s part of the form’s data”. 3. No plumbing. FormKit doesn’t require any manual data collection, event listening, or state tracking. It does all this for you on a heavily tested, framework agnostic, self-assembling graph. The only code your agent needs to write is declarative templates and submission handlers that respond to the state. 4. Dense colocation. FormKit’s syntax happens to be ideal for coding agents; nearly everything you need to know about a given input is on the input: Colocation dramatically improves the efficacy of coding agents. 5. DOM. FormKit, unlike most form frameworks in React, renders the actual DOM. This also increases colocation and best practices, meaning your coding agent is far more likely to produce consistent and high-quality output that looks and acts the way its supposed to. 6. Schema. FormKit’s own inputs are not written using Vue or React — instead, FormKit has its own render schema — think of it like an AST for the DOM — and you can modify it on the fly. It’s not very human-friendly to write, but it turns out most models are already pretty well trained on FormKit’s schema. Want your inputs to look a bit different on one form than another? No problem, your coding agent can easily make those changes without modifying the JSX structure at all. Oh, and any inputs you create for Vue work with React and vice versa. 7. Plugins. FormKit leans into the unstructured tree graph hard. The graph doesn’t just collect data, it also passes down configuration and plugins. Want one form to work a bit differently than another one? No problem — just add a plugin to the top of that form or group and its children will all receive that feature. You can even mass assign props and configuration this way. Of course, FormKit has been solving these exact issues for a long time, but it wasn’t until we started using it on our own projects with coding agents that we realized what a huge advantage it is. With so many people using coding agents with React, it made sense to unveil FormKit for what it has always been — a completely framework-agnostic form framework that happens to unlock your coding agents. ➡️

Justin Schroeder

11,677 views • 5 months ago

Two highly requested features just landed in Stitch! You can now generate custom images like logos right on the canvas and copy screens across projects. ✨ Native Image Generation: Create custom logos or hero graphics, and ask the agent to drop them directly into your UI. ✨ Copy & Paste Across Projects: Grab that perfect screen you made last week and paste it into a new project. Perfect for combining styles and merging content. Your vibe design partner just leveled up. Let’s build! 👇

Two highly requested features just landed in Stitch! You can now generate custom images like logos right on the canvas and copy screens across projects. ✨ Native Image Generation: Create custom logos or hero graphics, and ask the agent to drop them directly into your UI. ✨ Copy & Paste Across Projects: Grab that perfect screen you made last week and paste it into a new project. Perfect for combining styles and merging content. Your vibe design partner just leveled up. Let’s build! 👇

Stitch by Google

56,899 views • 4 months ago

🎉 The wait is over! RuBotMaster is officially live! Now you can build many different types of powerful, data-rich bots in under a minute using over 100 filters. 📲 User-friendly? Absolutely! We've made it effortless and linked Telegram with Google Sheets. Just generate a template or copy a cheat sheet, paste your link back into the bot, and voilà — your bot is created. 📑 Then, sit back and watch the notifications roll in. ✏️📈 Need to tweak or optimize? You can edit your sheet at any time! 📗

🎉 The wait is over! RuBotMaster is officially live! Now you can build many different types of powerful, data-rich bots in under a minute using over 100 filters. 📲 User-friendly? Absolutely! We've made it effortless and linked Telegram with Google Sheets. Just generate a template or copy a cheat sheet, paste your link back into the bot, and voilà — your bot is created. 📑 Then, sit back and watch the notifications roll in. ✏️📈 Need to tweak or optimize? You can edit your sheet at any time! 📗

Ru

13,945 views • 1 year ago

Break out of the box. Infinity Arena is live. Register, form or join a team, and win together from a $10M prize pool! More opportunities come when you team up. Go for glory with MEXCWin! 👇

Break out of the box. Infinity Arena is live. Register, form or join a team, and win together from a $10M prize pool! More opportunities come when you team up. Go for glory with MEXCWin! 👇

MEXC

4,981,952 views • 15 days ago

Gamma is now on Claude! You can generate a presentation with Gamma directly in your Claude chat. Connect Gamma and instantly turn any conversation into something you'd share with your team or present to the world. You can also: - Connect to Gmail, Slack, or HubSpot ("turn this email into a deck") - Fully edit your presentation in Gamma for any tweaks Take that research task, strategy proposal, or project summary and turn it into a polished presentation. Think with Claude. Visualize with Gamma.

Gamma is now on Claude! You can generate a presentation with Gamma directly in your Claude chat. Connect Gamma and instantly turn any conversation into something you'd share with your team or present to the world. You can also: - Connect to Gmail, Slack, or HubSpot ("turn this email into a deck") - Fully edit your presentation in Gamma for any tweaks Take that research task, strategy proposal, or project summary and turn it into a polished presentation. Think with Claude. Visualize with Gamma.

Gamma

80,420 views • 6 months ago

AI music and visuals generated on the fly in your Tesla with Bonebeats. Fully customizable tracks. Edit the vibes with your own prompts or put it in auto-pilot and vibe out. Compatible with MIDI controllers. Live now.

AI music and visuals generated on the fly in your Tesla with Bonebeats. Fully customizable tracks. Edit the vibes with your own prompts or put it in auto-pilot and vibe out. Compatible with MIDI controllers. Live now.

bone

50,046 views • 1 year ago

You can now generate, edit, and convert a reference image into 3D inside one tool. Tripo's Image Generation runs Nano Banana and GPT to build the reference, then turns it into a model. Text or photo in, 3D out. One pipeline, zero handoffs.

You can now generate, edit, and convert a reference image into 3D inside one tool. Tripo's Image Generation runs Nano Banana and GPT to build the reference, then turns it into a model. Text or photo in, 3D out. One pipeline, zero handoffs.

Alvaro Cintas

56,246 views • 3 months ago

In under 2 seconds, copy any TradingView indicator or backtesting strategy and instantly translate it into a Repla algorithm with 99% accuracy. Let AI improve or edit it for you. Or do the opposite create your own indicator on Repla and translate it into Pine Script within seconds!

In under 2 seconds, copy any TradingView indicator or backtesting strategy and instantly translate it into a Repla algorithm with 99% accuracy. Let AI improve or edit it for you. Or do the opposite create your own indicator on Repla and translate it into Pine Script within seconds!

AXB Zero

40,627 views • 6 months ago

Ideogram Batch Generation is here! Enhance your creative workflow by simplifying image creation at scale – no more manual adjustments or constant supervision needed. Simply upload a spreadsheet with prompts and settings to generate images in bulk. Now available for Ideogram Pro users.

Ideogram Batch Generation is here! Enhance your creative workflow by simplifying image creation at scale – no more manual adjustments or constant supervision needed. Simply upload a spreadsheet with prompts and settings to generate images in bulk. Now available for Ideogram Pro users.

Ideogram

48,338 views • 1 year ago

Get Gemini up to speed on what matters most to you with memory import. Bring an understanding of your key preferences, relationships, and personal context directly into Gemini. Once you import these memories, Gemini will understand the same key facts you’ve shared with other AI apps, like your dietary restrictions, your sibling’s names, or where you grew up and securely save those details for your next chat. To get started: 1) Head to your Settings in Gemini and select “Import memory to Gemini.” 2) Ask your current AI: Copy our suggested prompt and paste it into your other AI app to generate a summary of your preferences and style. 3) Copy the response: Copy the personalized summary it creates for you. 4) Paste into Gemini: Go back to “Import memory to Gemini,” paste the text, and start a new chat.

Get Gemini up to speed on what matters most to you with memory import. Bring an understanding of your key preferences, relationships, and personal context directly into Gemini. Once you import these memories, Gemini will understand the same key facts you’ve shared with other AI apps, like your dietary restrictions, your sibling’s names, or where you grew up and securely save those details for your next chat. To get started: 1) Head to your Settings in Gemini and select “Import memory to Gemini.” 2) Ask your current AI: Copy our suggested prompt and paste it into your other AI app to generate a summary of your preferences and style. 3) Copy the response: Copy the personalized summary it creates for you. 4) Paste into Gemini: Go back to “Import memory to Gemini,” paste the text, and start a new chat.

Google Gemini

49,038 views • 5 months ago

Use AI in every app on Mac, enriched by context from the app you're in. Generate replies in Gmail, summarise your Slack, or let GPT fill out the contents of a web form! Try it now for the best (and cheapest) way to use GPT-4!

Use AI in every app on Mac, enriched by context from the app you're in. Generate replies in Gmail, summarise your Slack, or let GPT fill out the contents of a web form! Try it now for the best (and cheapest) way to use GPT-4!

Michael Jelly 🏴‍☠️

2,550,769 views • 2 years ago

AI interfaces haven't evolved since GPT-3. You ask a question, get an answer, then copy-paste it into Slack, Gmail, or your docs. There's a fundamental gap between intelligence and action. Introducing Dimension. Your proactive AI co-worker that actually gets work done for you.

AI interfaces haven't evolved since GPT-3. You ask a question, get an answer, then copy-paste it into Slack, Gmail, or your docs. There's a fundamental gap between intelligence and action. Introducing Dimension. Your proactive AI co-worker that actually gets work done for you.

Tejas

3,599,311 views • 9 months ago

I got early access to Project Genie from Google DeepMind ✨ It's unlike any realtime world model I've tried - you generate a scene from text or a photo, and then design the character who gets to explore it. I tested dozens of prompts. Here are the standout features 👇

I got early access to Project Genie from Google DeepMind ✨ It's unlike any realtime world model I've tried - you generate a scene from text or a photo, and then design the character who gets to explore it. I tested dozens of prompts. Here are the standout features 👇

Justine Moore

229,860 views • 7 months ago

Tencent's Hunyuan 3D Studio is LIVE! 🎨 AI-powered 3D creation for professionals, slashing workflows from days to minutes.⚡️ Key Features: 🔹Text-to-3D: Generate controllable geometry (multi-view, multi-style, A pose, bbox-control) from text/images. 🔹Auto Part Split: Break models into 50+ editable components (hats, clothes, etc.) 🔹1-Min UV Unwrap: AI-driven, professional-grade UVs, no more manual fixes. 🔹PBR Textures: Precisely edit global or local textures with text or image prompts & professional material sphere generation. 🔹Auto Rigging: Quickly rig various characters, with specialized motion templates for human models. Hunyuan3D Studio is built to empower game developers, animators, and designers to create faster and smarter. 📄Tech Report: 👉🏻Try it now:

Tencent's Hunyuan 3D Studio is LIVE! 🎨 AI-powered 3D creation for professionals, slashing workflows from days to minutes.⚡️ Key Features: 🔹Text-to-3D: Generate controllable geometry (multi-view, multi-style, A pose, bbox-control) from text/images. 🔹Auto Part Split: Break models into 50+ editable components (hats, clothes, etc.) 🔹1-Min UV Unwrap: AI-driven, professional-grade UVs, no more manual fixes. 🔹PBR Textures: Precisely edit global or local textures with text or image prompts & professional material sphere generation. 🔹Auto Rigging: Quickly rig various characters, with specialized motion templates for human models. Hunyuan3D Studio is built to empower game developers, animators, and designers to create faster and smarter. 📄Tech Report: 👉🏻Try it now:

Tencent Hy

46,998 views • 11 months ago

Check out the form-filling agent that automates PDF forms using AI by Jerry Liu 📄🤖 Use any fillable PDF with an agent that fills it out based on your prompts and context files. Our new experiment creates a multi-turn chat experience for form completion. 🔍 Upload fillable PDFs and automatically detect form fields using PyMuPDF 📝 Add custom prompts and context files (parsed via LlamaParse) to guide the AI 🤖 Multi-turn conversations let you refine and correct form entries after initial completion 💾 Download your completed forms when done The agent uses simple tools to list, set, get, and validate form fields. You can chat with it to make corrections and adjustments until your form is perfect. Check out the code on GitHub: Or the deployed app here:

Check out the form-filling agent that automates PDF forms using AI by Jerry Liu 📄🤖 Use any fillable PDF with an agent that fills it out based on your prompts and context files. Our new experiment creates a multi-turn chat experience for form completion. 🔍 Upload fillable PDFs and automatically detect form fields using PyMuPDF 📝 Add custom prompts and context files (parsed via LlamaParse) to guide the AI 🤖 Multi-turn conversations let you refine and correct form entries after initial completion 💾 Download your completed forms when done The agent uses simple tools to list, set, get, and validate form fields. You can chat with it to make corrections and adjustments until your form is perfect. Check out the code on GitHub: Or the deployed app here:

LlamaIndex 🦙

55,131 views • 8 months ago

Faceless YouTube channels with long-form videos are making $30k/month. I made a guide to show you how to create long-form videos on autopilot. Partnered with Arcads to test their new unlimited-length avatar feature - paste your entire script, pick an AI avatar, and generate a full talking head video with no time limit. Paste your entire script. No character limit. Hit generate. Used to stitch together 60-second clips and hope the character looked the same between cuts. Now I generate full course videos, long-form VSLs, and YouTube content in one go. Same face. Natural lipsync. Start to finish. Comment "AVATAR" and I'll DM you the full setup guide (must be following)

Zephyr

11,155 views • 6 months ago

Lace v1.27.1 is live! Making your Glacier Drop claim just got a whole lot smoother. Now you can: 🔑 Select stake keys directly from the address dropdown ✍️ Sign messages using your chosen stake key 📋 Copy and paste with ease into the Glacier Drop form No more guesswork. No more friction. Just a clean, reliable way to verify your claim, right from Lace. Ready when you are.

Lace v1.27.1 is live! Making your Glacier Drop claim just got a whole lot smoother. Now you can: 🔑 Select stake keys directly from the address dropdown ✍️ Sign messages using your chosen stake key 📋 Copy and paste with ease into the Glacier Drop form No more guesswork. No more friction. Just a clean, reliable way to verify your claim, right from Lace. Ready when you are.

lace.io

31,947 views • 1 year ago

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live site: Repo: I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.

I open-sourced ThreeUI, my library of three.js components and landing pages. 160+ are free, and the tool is free too. It includes procedural 3D hero sections, icons, and motion designs. Copy the prompt or source, give it to your agent, then change the theme, lighting, motion or layout. Live site: Repo: I'm adding a lot more soon. Pro comes with 50+ extra components, MCP, and skills. Early adopters get 50% off right now.

Meng To

1,303,837 views • 20 days ago