Gimli, a front-end extension for Visual studio code in development

gimli VS

Recientemente a developer introduced a new extension for Microsoft's open source code editor, Visual Studio Code (editor now available at snap pack).

The Gimli name extension is a visual programming tool for front-end developers that allows them to design, manipulate the code of an existing template, import custom snippets and more.

Gimli main features

Creating complex dynamic layouts often requires the use of Grid and Flexbox. Learning all the possible properties and their interaction can be difficult.

Gimli solves this problem by providing visual tools that greatly simplify this process.

In "mode présentation", Gimli activates the presentation tools according to the selected item.

For example, if an item's display property is set to Grid, a set of Grid-based tools will be enabled.

If an item has a parent item with a display property set to Flex, a set of tools focused on flex items will be enabled, and so on.

With Gimili you can easily navigate through your files with the function Gimli's “search source”.

The extension allows you to instantly find the source code for CSS rules and HTML elements.

When you select an HTML element from your template, a simple click on the "source" button will instantly open the source code for that element or a CSS rule.

Gimli also allows you to apply styles with the function Gimli "Apply styles", you can see which styles have been added, removed or modified. You can then apply all or part of these different styles.

Like any browser's developer tools, Gimli is designed to work with whatever framework or library you've chosen to work with.

According to its designers, so far, Gimli has been tested with React, WordPress, Bootstrap, VueJS, Angular, and Stencil.

In addition, according to its creator, These four features mentioned above are just a preview of the power of extension.

These features represent the ones that actually work for the Gimli extension at the moment.

Gimli still been in beta state

Developer unveiled this tool which is still currently in beta and should be available by the end of the third quarter or early fourth quarter of 2019 and its first stable release is scheduled for early 2020.

There are currently few explanations about Gimli from its designer. One thing he promised to rectify as Gimli's design progresses.

“Unlike other development platforms, Gimli is for front-end developers. Gimli is not a "no code" solution.

Instead, it tries to combine the visual tools often found in 'no-code' solutions with its Visual Studio Code development environment, 'he explained.

For its funtionability, Gimli has a small script that you must include during your development, its configuration would be very simple and could be done with the help of compilation tools such as webpack or manually.

With the time and resources required, we will continue to enhance existing features and implement new features such as typography and text tools, the ability to import custom code snippets, perspective and transformation tools, HTML export and formatting, a view DOM tree and tools for colors and marks.

Having said that, There is no beta version of the extension available for testing, which the community is requesting.

They believe this will help the creator of Gimli get some more contributions from the community and more feedback on any bugs or improvements that they can correct or contribute to the product.

On the other hand, other people have commented that the project is open source.

“One suggestion I can make is to make the project open source or at least free for personal use.

This will bring in many users who will want to have the same tools in their workplace. Then you can have business licenses that you charge the companies, ”says one of them.


The content of the article adheres to our principles of editorial ethics. To report an error click here!.

Be the first to comment

Leave a Comment

Your email address will not be published.



  1. Responsible for the data: AB Internet Networks 2008 SL
  2. Purpose of the data: Control SPAM, comment management.
  3. Legitimation: Your consent
  4. Communication of the data: The data will not be communicated to third parties except by legal obligation.
  5. Data storage: Database hosted by Occentus Networks (EU)
  6. Rights: At any time you can limit, recover and delete your information.