The official Vaadin extension for Visual Studio Code.
Note: This is an alpha release of Vaadin Studio. To report a bug / give us feedback, please visit GitHub or Discord.
What is Vaadin?
Vaadin is an open-source web app platform for Java backends. The platform supports two UI development models.
With Vaadin Flow, developers can build server-side views entirely in Java. Vaadin Fusion allows developers to build reactive, client-side views with type-safe communication to a Java server.
What is Vaadin Studio?
This extension will offer TypeScript optimized productivity features for Vaadin Fusion projects using LitElement templates, including:
- Live View: You can instantly preview changes to your UIs, right from the IDE
- Live Selection: Select any UI component from Live View to see its code highlighted in the editor, or click on any line of code to select its corresponding UI component in Live View
- Contextual Preview: Instantly change preview conditions to test responsiveness, light / dark modes and more (Upcoming)
- Properties Panel: See and edit properties of a component visually, or using code (Upcoming)
- Form and Grid auto generator: Generate meaningful data-bound views based on entities from your model (Upcoming)
Please note that features are subject to change in future versions.
- 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)
Features in the 0.1.0 alpha version
- Our first alpha release focuses on the Live View feature.
- Create and edit Typescript files and see the outcome of your code instantaneously, without redeploying, refreshing your application or even saving the file. You see the output as you type.
- Select elements in the Live View to jump directly to the code that generates it, or select pieces of code to see how it’s rendered in the Live View.
- The best place to get started with Vaadin is to visit start.vaadin.com 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.
Troubleshooting & reporting bugs
To log any issues, please visit https://github.com/vaadin/studio/issues and open a bug report ticket.
- Currently users need to have a global Node.js installation in the machine, together with Java and Apache Maven.
- There is a known bug that happens to Windows users with space in their user names when running the extension, preventing the project from being built. Check this issue for details and workarounds.
The roadmap for Studio and the entire Vaadin platform is publicly available at: https://vaadin.com/roadmap.
Why should I try the alpha version?
- Your input will directly inform the development of this extension, and help us mold it into a tool that you will love — plus, you get to try out all the cool new features ahead of everyone else!
How often will updates be released?
- We are following a continuous release cycle with this extension. This means that new features will be shipped as soon as they are ready and quality tested to our satisfaction (unless explicitly marked as alpha or beta builds, of course).
Do I need an account to use this extension?
Is this a free extension?
- The core features of this extension will be always available for free. Additional commercial features will be introduced in the future.
Does this extension work with both the Vaadin Flow and Fusion frameworks?
- Vaadin Studio is focused on projects using Fusion. While it's technically possible to use Studio for LitElement templates from a pure Flow project, it's not recommended.
- Vaadin Studio doesn’t generate or manage Java companion files for the LitElement templates - those files need to be managed manually if you wish to use Studio with Flow projects.
- For a visual editor for Flow projects, check out Vaadin Designer.
When can I get my hands on a public / stable version of the extension?
- We are currently targeting a Q4 2021 release date. A more accurate estimation will be available shortly.
I want a specific feature. Can I request it?
- Definitely! We’re always open to feature requests. Reach out to our team on Vaadin’s official Discord.
Released under a CVDL-4 license. See https://vaadin.com/license/cvdl-4.0 for more information.