TLDR: If vector editors had bidiretional HTML + CSS (an already universal document format), then designers and web developers could edit designs in the same file format and using the tools that best work for them. If the vector editing tool (Penpot or another tool) doesn’t support a layout option then a designer could write CSS (CSS has far more layout options than Penpot for instance).
Bidrectional as in, the app can show HTML & CSS as just 1-2 files and you can see edits on the HTML & CSS in the visual real time. I get the feeling I’m describing something that already exists but I didn’t find it with my countless google searches. FYI: vector editors meaning editors for vector graphics (shapes and lines rather than photos) and not necessarily SVGs; meaning apps like Penpot, Figma, etc.
I have done lots of searching about this while deciding on vector editors for personal use. Sure there are website builder tools like Framer and Webflow, but they’re clearly branded as website builders, and they have different UIs. While I haven’t actually used them beyond glancing at them, They have you choose components corresponding to HTML elements, rather than shapes / objects like Penpot does. Besides being more popular, Penpot seems to have a much smaller learning curve and lots of collaboration features. There are many open source vector editors but none I found that are meant to be an alternative to Penpot and with bidrectional HTML + CSS.
Often the designs created in Penpot are converted into websites, I don’t know how useful this would be why not have designers and developers use whichever tools best suit them and work in the same file formats? A wonderful thing about HTML + CSS are declarative layouts and designs in plain text so you can use any text editor or an IDE for feature like a side by side text and visual preview. A designer could just use the vector editor, and if they need advanced properties or layout options which aren’t supported by said editor, then they could open a CSS text window up and write the layout properties there. Penpot doesn’t have equivalents of every single CSS property and doesn’t let you write them.
Another benefit is having the designs as files stored on-device as plain text. That allows for saving file history with VCS tools like Git, which has a whole bunch of different tools for comparing versions, tags + branching, and platforms like Github support pull requests. A designer could then utilize GUI git tools plus GitHub to collaborate and make pull requests.
I find it bonkers that some SWEs out there have spent countless man hours into essentially reinveting the whell, writing web UIs for tools like Figma & Penpot that don’t have bidirectional HTML + CSS previews. The designs are in proprietary file formats (or whatever is stored in the cloud), and developing the web UIs involves implementing the objects of those designs with a bunch of, you guessed it: HTML & CSS.
For personal vector editing I get the feeling that I should just write HTML & CSS in Vim (Neovim), which lets me navigate to and edit far away words in a document with only a few keywords (much much faster than moving a mouse around like in Word or Google Docs), which would be more productive for me than using any of these vector editing tools.
