Gimli

Unlike other visual development platforms, Gimli is targeted towards front-end developers. Gimli is not a “no-code” solution. Instead it tries to combine visual tools often found in “no-code” solutions with your Visual Studio Code development environment.

Feature highlights:

Layout Tools

Creating complex dynamic layouts often requires the use of Grid and Flexbox. Learning all possible properties and how they interact with one another can be challenging. Gimli solves this by providing visual tools that greatly simplifies this process. Gimli enables layout tools based on what element have been selected. For example, If an element got its display property set to grid, a set of grid focused tools will be enabled. If an element has a parent with display property set to flex, a set of flex-item focused tools will be enabled, and so on.

Find source

Navigate your files with ease using Gimli's “find source” feature. Gimli lets you instantly find the source code for CSS rules and HTML elements.

Works with any framework or library

Just like your browser's developer tools, Gimli is intended to work with any framework or library you chose to work with. So far Gimli have been tested with React, WordPress, Bootstrap, VueJS, Angular and Stencil.

Apply styles

No need to copy and paste styles. By using Gimli's "apply styles" feature, you can see which styles have been added, removed or changed. You may then apply all or just some of those styles.

The above is just an early sneak peek of whats coming.

What you've seen above are implemented features that actually work. Given time and resources I hope to be able to continue improving existing features and implement new features such as:

• Typography & text tools • Import custom snippets • Transform & perspective tools • HTML export & formatting • DOM tree view • Color & branding tools