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

7,647 subscribers

40,992 views • 1 year ago •via X (Twitter)

Education News & Politics Science & Technology

Anya Rossi• Live Now

Private livecam show

10 Comments

Justin Schroeder1 year ago

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

Justin Schroeder1 year 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 Hedger1 year ago

@FormKit @vuejs mind. blown. 🤯

Justin Schroeder1 year ago

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

Chandler Sommerville1 year ago

@FormKit @vuejs This looks awesome!

Justin Schroeder1 year ago

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

Andrew Schmelyun1 year ago

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

Justin Schroeder1 year ago

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

Abdelrahman Awad1 year ago

@FormKit @vuejs Nice work! Looks fantastic!

Israel Ortuño1 year 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,033 views • 2 years ago

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 views • 1 year 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,450 views • 2 months 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,549 views • 2 months ago

CopyCoder is finally live!! Build a FULL frontend with just one screenshot 1. Screenshot any app 2. Generate prompts 3. Paste into AI builder 4. Full FE clone app is created Comment "copycoder" and I'll DM u access

CopyCoder is finally live!! Build a FULL frontend with just one screenshot 1. Screenshot any app 2. Generate prompts 3. Paste into AI builder 4. Full FE clone app is created Comment "copycoder" and I'll DM u access

Moritz Kremb

270,396 views • 1 year ago

First, fill out a form. Then fill out a form for the form. Then pay for filling it out. Or just use Kolo.

First, fill out a form. Then fill out a form for the form. Then pay for filling it out. Or just use Kolo.

Kolo💚

20,447 views • 1 month ago

Most AI tools generate generic text. Inkriv learns your voice. It autocompletes or ghostwrites long-form content using your tone and style, structure, with sources, pulled from docs, links, or even voice memos. 🚀 Just launched: Here’s how it works ↓

Most AI tools generate generic text. Inkriv learns your voice. It autocompletes or ghostwrites long-form content using your tone and style, structure, with sources, pulled from docs, links, or even voice memos. 🚀 Just launched: Here’s how it works ↓

Rotimi

13,743 views • 1 year ago

You can now generate Themes/Design Systems directly from your Figma import or any link. Simply paste the link and MagicPath will extract color palette, typography, and effects so you can use them to generate or edit your designs.

You can now generate Themes/Design Systems directly from your Figma import or any link. Simply paste the link and MagicPath will extract color palette, typography, and effects so you can use them to generate or edit your designs.

Pietro Schirano

41,940 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,922 views • 1 year ago

The new novel STAR TREK: STRANGE NEW WORLDS releases one month from today — and it has assumed material form! Just unveiled the very first copy here at #Evercon in Wausau, Wisconsin. Preorder your copy or audiobook now at or your favorite bookstore!

The new novel STAR TREK: STRANGE NEW WORLDS releases one month from today — and it has assumed material form! Just unveiled the very first copy here at #Evercon in Wausau, Wisconsin. Preorder your copy or audiobook now at or your favorite bookstore!

John Jackson Miller

24,433 views • 3 years 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 • 10 months 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,234 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!

Repla

40,069 views • 4 months 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

55,824 views • 10 days 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,293 views • 1 year ago

Form validation is hard. What if there was a Next.js form lib that does both client and server validation from one Zod schema 👀

Form validation is hard. What if there was a Next.js form lib that does both client and server validation from one Zod schema 👀

Alex Sidorenko

145,943 views • 2 years 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

48,686 views • 2 months ago

IT’S TIME FELLAS.👇🏻 Fill the form out and wait for more info to come. DO NOT fill it out if you are not serious about this. Don’t waste my time or yours. Ps: if the link to the form doesn’t open, copy and paste it in your browser.

IT’S TIME FELLAS.👇🏻 Fill the form out and wait for more info to come. DO NOT fill it out if you are not serious about this. Don’t waste my time or yours. Ps: if the link to the form doesn’t open, copy and paste it in your browser.

Ian

22,221 views • 5 months 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,596,044 views • 7 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,763 views • 2 years ago