Last month we’ve introduced vite.new – the fastest way to start Vite project, and the JavaScript community loved it!
Introducing: vite.new templates!
One catch with vite.new was that it would only initialize a basic JavaScript project. If you wanted to use a specific framework, you’d have to npm install all the necessary dependencies and create some boilerplate files. In contrast, when you’re running a Vite initialisation script manually, it provides a set of official templates to help developers initialize a project specifically for Vue, React, or other similar setups.
So once we’ve announced the Vite support, its creator Evan You had a brilliant idea to incorporate the templates feature into vite.new workflow as well. What he suggested was we could just append the name of the template to the URL – and we’re happy to report, this is now possible!
Here’s the full list of the available templates - (just add “vite.new/” before it into your URL bar!)
vanilla
vanilla-ts
vue
vue-ts
react
react-ts
preact
preact-ts
lit-element
lit-element-ts
svelte
svelte-ts
Isn’t this cool? We are so absolutely happy this kind of workflow is now available to JavaScript developers! You can now both start quickly and have access to the underlying tooling and its configuration. It really blurs the line between what is a playground and what’s an actual app that you can start and just keep developing, right there in the browser.
Thanks to the Vite maintainers for creating this amazing tool!
Besides these official starters, the Vite community has also created an extensive list of more specific templates – you can find it in the Awesome Vite.js repository.
If you want to use one of them as the starting point to your Vite StackBlitz project, you can utilize our universal GitHub importer – just append [username]/[repo] to stackblitz.com/github/!
E.g. github.com/antfu/vitesse becomes stackblitz.com/github/antfu/vitesse
We can’t wait to see how this advancement shifts the way developers experiment, work, and play with code!
🤫 Psst! In truth, we’re already aware of how these specific features are being used by some of the JavaScript open-source makers to help with their work, but we’ll leave that for one of the following posts :)
