Update: The development for Vaadin Studio has ended and the extension is no longer available.
Vaadin Studio is our experimental extension for VS Code. With this project, we are aiming to bring faster development times for applications made using Vaadin Fusion.
Faster development times
In Vaadin Studio you can see the output of your UI template in a preview tab, and any changes to your template are applied automatically to your preview. This is not a live reload: you don’t need to save your file and wait for a new redeployment - Vaadin Studio works with the code in your editor, not the saved file, so changes to the preview are applied within milliseconds.
We call this feature Live View and it’s the core of what Vaadin Studio is.
You have control over your code
Your code, your rules - a core philosophy of Vaadin Studio is to give full control of the code to the developer, instead of forcing a specific structure or outsourcing the control of the code from the developer. This means that the Live View and the source code are visible all the time.
We have plans to add convenience features to Studio for auto-generation of code, such as columns for a Grid based on the model object, or auto-generation of forms, but the developer is always in control - changing the auto-generated code doesn’t break the Live View in any way.
VS Code as the editor for Vaadin applications
VS Code is the preferred way to work with Typescript, and it has a vibrant community and support from different vendors. We chose to support VS Code for Fusion thanks to its natural fit with the community.
Update: The extension is no longer available.
Vaadin Studio can be downloaded from the VS Code marketplace from this link: https://marketplace.visualstudio.com/items?itemName=vaadin.studio , or directly from VS Code when searching for “Vaadin”.
Free to use
Vaadin Studio is free to download and use, and it will remain so. After some interaction it asks the user to login to vaadin.com to be able to continue using it.
In the future, there are plans for adding commercial features to it, but the core will always be free.
Prerequisites
Vaadin Studio works only for Vaadin Fusion projects with LitElement templates.
The project needs to use Vaadin 19 or above. Previous Vaadin versions are not supported.
For the environment, the developer needs to have in his machine:
- Node.js installed globally (version 12 or above)
- Java JDK installed globally (version 1.8 or above)
- Apache Maven installed globally (version 3.6 or above)
Getting started
The best place to get started with Vaadin is to visit Vaadin Start and download a sample project.
To start using the extension, load up your Vaadin 19+ project, and open a TypeScript view. A button will appear on the right side of the tabs. Click on it, and wait for the build to complete.
You can follow our quick start tutorial to get started with the Vaadin Fusion framework.
Feedback is welcome!
Vaadin Studio is an experimental product, and we are open to feedback to help shape its future. You can talk to us directly on Discord at http://vaad.in/studio, or if you have any feature requests or bug reports, you can use the https://github.com/vaadin/studio repository.