Skip to Content
Author's profile photo safiyudeen Vattaparambil

UI5 and Webstorm IDE. Get Set Go….

Hi Folks. Eclipse IDE may be a stable and powerful tool to develop UI5 applications. But there are many other powerful tools like Jetbrains Webstorm, aptana, komodo etc. Webstorm is a powerful IDE which understands web technologies and it provides easy to use user interface. It has a powerful prediction feature which accelerates web developments. Also comes in handy when working with nodeJS.

I had always been a big fan of webstorm IDE for web development. So I was looking for a way to make webstorm compatible with UI5. I found a blog “Configuring JetBrains WebStorm for UI5 development” by Robin van het hof. He has provided a sequence of steps to integrate UI5 with webstorm. It was very helpful for code completions. Now there is a plugin available for UI5 which can be used to create new ui5 project, ui5 templates and ui5 api search. This means, now you can directly install the plugin and kick start your UI5 development hassle free. Thanks to the author “Sebak” for providing this plugin.

So I thought of sharing this here. I will be providing steps to install this plugin in Webstorm. Also I will be using UI5SplitApp-Boilerplate by 6of5 which is readily available for download in github as initial skeleton. UI5 Boilerplate is a skeleton for building Apps based on OpenUI5. This will also save time in building the skeleton of UI5 mobile applications.

Pre Requisites:

1) Jetbrains Webstorm 9 IDE

2) UI5 Boilerplate


1) Open webstorm IDE. File->Settings

2)  Navigate to Plugins->Browse Repositories


3) Search for OpenUI5 and install the plugin.


4) Restart Webstorm for the changes to take effect.


Now that you have successfully added UI5 plugin to webstorm, We can import the boilerplate to Webstorm and kick start with UI5 mobile development.


1) Files->Open->Navigate to the boilerplate extracted folder->Open.

Download Links:


After installing the plugin, you can find these features included in webstorm.





Hope this post was useful.



Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thanks safiyudeen for sharing 🙂 Do you mind me asking what exactly this plugin brings? code completion? I had it installed but didn't notice there's code completion.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      Great to see community effort regarding 3rd party editors and plugins for UI5 development!


      1. UI5-specific code completion doesn't work for me as well, for both JavaScript files as well as XMLViews.
      2. I did notice there are some UI5 file options in the New... dialog to add UI5 views, but it just creates a new file without any boilerplate code, or a matching controller file -- you could just select New Javascript File which gives you the exact same result

      safiyudeen Vattaparambil, could you elaborate a bit more on what this plugin is supposed to to or how we should use it? Or is this plugin still a work in progress?

      Author's profile photo safiyudeen Vattaparambil
      safiyudeen Vattaparambil
      Blog Post Author

      Hi Tylr Wu and Robin

      I have added few more screenshots. Like adding new ui5 projects, ui5 file templates and api search. I forgot to mention this doesnt help in code completion. Hope i had answered your questions.



      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      Ok, so unfortunately at this stage you still need to manually add the UI5 libraries as described in my blog..

      Nevertheless, I really appreciate the plugin author's effort, and hopefully he can make it into a truly useful plugin of which the greater UI5 community can only benefit from!

      Author's profile photo safiyudeen Vattaparambil
      safiyudeen Vattaparambil
      Blog Post Author

      Hi Robin,

      Yes. We need to add it manually. Hopefully the author may come up with adding libraries in later releases.



      Author's profile photo Anton Ruff
      Anton Ruff

      Hi there,

      check this: Configuring JetBrains WebStorm for UI5 development

      At least according to the screenshots code completion works.



      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      Hi Anton,

      In my experiece, this particular plugin does nothing more than create boilerplate files for you, and you could achieve the same with the out-of-the-box available File Templates.

      If you follow the configuration in my blog you mentioned, yuo will indeed have intelligent SAPUI5 code completion in both Javascript files as well as XMLView files

      Author's profile photo Maksim Rashchynski
      Maksim Rashchynski