all opinions are my own and don't reflect my employers in any way (even though it should). I write with a humorous flair and if you get butt hurt that's your problem ٩(＾◡＾)۶
You should know by now that I'm a NextJS evangelist, so it should come as no surprise that I'm knocking door to door spreading the Vercel gospel yet again -- BUT, hold on to your seats my dear devs... because today, I bring a fresh-out-of-the-oven tool for y'all to delight yourselves with. Enter our lord and savior, v0.
v0 is Vercel's newest addition to their product catalog, it is a Generative UI tool that uses simple text prompting and images to generate pages for you. Forget boilerplate code and templates, v0 aims to take you from a blank screen to a complete page faster than ever before!
But how does it work? After you submit your prompt, the platform gives you three choices of AI-generated user interfaces. You can pick one, copy the entire source code generated, or refine it further until you get what you want!
Sounds like any other AI tool out there, right? Yes and no. Yes, it's AI. But no, it's better than anything else out there. These are just some of its initial key features:
-
Follow up prompting: v0 allows you to endlessly refine the UI to your own taste using prompts, zero code involved! You can select individual parts of the UI to fine tune your creation.
-
Switch between canvas and code: seamlessly make code and UI adjustments on the fly, your changes are reflected instantly on the generated UI. Think of Webflow meets VS Code!
-
Public/private mode and community templates: Browse through what others have published to the community, giving you an even better starting point reference. Alternatively, you can keep your work in stealth and no one will know what you're cooking!
-
Leverage ShadCN/UI and Tailwind: You get pre-built, open-source, fully responsive UI components with ShadCN and industry-standard Tailwind. Because nobody wants to pay for MaterialUI 👀
A note on accessibility -- While v0 does generate ARIA attributes to incorporate accessibility standards, it still leaves room for improvement in terms of inclusive design. I can assure you though, it's more than what your company is doing for accessibility anyway 👀
My thoughts on v0 ໒(⊙ᴗ⊙)७✎▤
While the tool is currently focused on frontend code generation and can't perform data fetching yet, I firmly believe eventually this feature will be around with the official alpha release. While it does generate generic code, eventually, I know for a fact it will integrate with your existing codebase and Figma design system, allowing it to contextualize the output and create that seamless experience that we developers love -- a good copy and paste that just works!
Now, I want to wrap this article with a prediction. Two years down the road, vanilla React will be gone and forgotten. NextJS will take over as the most popular framework and Vercel will release a CLI version of v0 with some neat VS Code plugins. Frontend engineering will be more about prompting these tools for the best output, rather than coding useless media-queries.
We'll have to wait to find out, and in the meantime, I shall continue spreading the word door to door...
Do you have five minutes to hear the word of our lord and saviour today?
Play with v0 and see the magic for yourself: https://v0.dev/
Thanks for reading my silly article ๑(◕‿◕)๑~~~
All resources on this page were sourced from the v0 launch keynote.
Top comments (4)
LOL. I just tried it and it failed miserably. 2 years, you say? More like 10.
Still, I don't want you to think this is a comment on the article. Nope. Just the V0 tool. Apologies for any misunderstanding, if any occurred.
thanks for the comment @webjose! Interesting to hear your perspective, the tool is not perfect for sure so I can resonate with you on that :)
v0 is our favorite go-to for when googling for "Tailwind hero headline" takes longer than 30 seconds to find something reasonable.
that sounds like a great way to use v0!