Some of the things that consume too much time as a web developer are manually typing HTML and CSS and looking up documentation. For example, when creating a list, it takes much longer to type <ul><li></li>….</ul> than it is to just click a button and start typing the content like you do in MS Word or Google Docs. Another example is when I don’t remember the syntax for a Tailwind CSS class and I have to look it up in the online documentation. After searching for a low-code editor that allows me to have both a WYSIWYG editor alongside a code editor alongside a list of controls, I have only found one that meets that criteria. Pinegrow offers both a desktop and a web-based low-code editor that supports plain HTML/CSS/JS, Tailwind CSS, Bootstrap, and much more. For now, just using it for plain HTML/CSS and Tailwind CSS saves me a lot of time. Following is a screenshot of how I have the UI.
Due to the large amount of information and my preferences for not having to scroll a lot, I expand the window full size on a 32″ 4K monitor. The screenshot above shows the following panes:
- top left = WYSIWYG editor
- bottom left = code editor
- middle = element properties
- right = DOM tree
You can edit code and see the changes in the visual editor. You can also insert elements into the visual editor and edit text visually. When you click on an element in the visual editor or the DOM tree, you can edit its properties using the various controls in the middle pane. For example, if I want to add bottom margin to an element, I don’t have to remember the possible Tailwind CSS preset values. Instead, I can just click a dropdown and choose a value. As I hover over the various dropdown values, I can visually see the margin change size. This is much easier than trying different values in a code editor and then reloading your browser to see the change. If I want to enter a custom value, I just type it in the field and choose a unit (px, em, etc).
When you want to insert an element, e.g. a list, just drag the corresponding button in the “+ Insert” dropdown over to the location in the visual editor where you want to place the new element.
Editing an element’s properties is super easy thanks to the complete controls with pre-populated Tailwind CSS values.
For example, if I want to vertically or horizontally align an element in a flexbox or CSS grid container, I can just visually see which button depicts the alignment I want and then click on it. Pinegrow will automatically update the code and the visual preview.
This is so much easier than typing “items-stretch”, “items-center”, “items-start”, etc.
If you’re having a hard time selecting an element in the visual preview, just click on it in the DOM tree. You can then edit the element’s properties in the middle pane.
If you are using the online version of Pinegrow and you want to export your code, just copy it from the code editor into your other editor (I use VS Code). Or, you can use the desktop version of Pinegrow and edit your local files directly.