The Pugify HTML to Pug Converter takes valid HTML and converts it into Pug. Just paste your HTML in the field on the left, and the converter will return valid Pug on the right.
Pug is an elegant, feature-rich, and high-performance template engine for writing markup. Simply put, it makes HTML easier and faster to write, read, and understand. And it makes life easier for developers of all shapes, sizes and experience levels.
If you're new to Pug or just getting started with HTML you should start at the official website or this Medium article.
When converting Pug to HTML there are some choices to be made, and I made them. See below for a few examples.
Pug supports class literals and id literals. Meaning classes and ids don't always have to be inside a class="..." or id="..." statement inside parentheses. They can be put inline like this:
which compiles to this HTML:
<div class="foo" id="bar">...<div>
In fact, when there is a valid id or class literal and the element is a div, then the tag name can be dropped entirely. Like this:
This helps to make Pug more concise and easier to visually parse.
Unfortunately, class and id literals do not support special characters. For example, take this class from tailwindCSS: w-1/2. It contains a slash which would throw an error if attempted in a class literal.
What I decided to do with the Pugifier is to present every class or id as literal if possible, otherwise put it inside of the parenthesis in an attribute statement. That means some HTML that looks like this:
<div id='demo' class="w-1/2 hidden">...</div>
comes out like this:
The HTML to Pug converter supports custom HTML elements and mixed-case element tags. This makes the Pugify converter a great fit for developers working with Pug templates inside Vue or similar SFC-driven JS frameworks (as I like to do.) This means custom HTML tags will pass the converter and retain their case.
CustomTag some text
Conventional HTMLElement tags will be returned in their lowercase form for consistency.
div some text
It should. But there are no guarantees. It's in beta, and there are likely some bugs, which I'll fix as they are discovered.
Partly for the love of crafting something useful, partly because this is the tool I wanted to use but couldn't find (without ads, & trackers), and partly because it was a great chance to brush up on some of the particulars of Pug, the Dom, and related minutia that I hadn't thought about in a minute. (Like the DocumentType Node -- did you know Pug had 9 different shortcuts for Doctypes?)
Most of all, I wanted a quick and easy stand-alone web-based pug-to-html converter. And I wanted it to be 1) secure, 2) free of ads, 3) free of trackers, 4) fast, 5) and tell me who built it and why.
Yes, there are. Many of them are quite good. Some even allow you to install into your dev environment and run from the command line. I fully endorse that approach, and perhaps I'll make this available for node in the future.
This one was written from scratch in Typescript with, Pug, and TailwindCSS.
I intentionally avoided looking at how similar tools are built. That may have made things move more quickly, but since this was a side-project with no deadline pressures I wanted to start with a clean-slate and see if I could solve all of the inherent challenges on my own.
My first impulse way back when this was just a thought experiment was to imagine if an html document could be parsed and understood and translated in its string state (not parsed as HTML by a browser). It didn't take long to determine that it could be done (this is what browsers do), but probably wasn't the best approach. While one should be able to search and replace html tags quite easily by recognizing them as string patterns, it would be very difficult tracking the hierarchy of elements... and, of course, hierarchy is absolutely fundamental to HTML and Pug.
The approach I settled on was to massage the string content from the input field in a couple of minor ways to deal with things like DocumentType elements, then insert it as HTML inside an HTMLElement (kept outside the DOM for security), then parse it and translate it into Pug node by node.
When it comes to security you shouldn't take my word for it, or anyone's. But there are a few things I've done to make the experience 'more honest' and more secure from my point of view.
First, all of the compilation happens in the front-end, on your browser, in your machine. Meaning: your markup data never touches our servers.
Secondly, your browser can help you confirm that we aren't storing any cookies, or using any trackers. Not even Google Analytics.
My name is Kevin Peckham. My company is Lightning Jar. We're a digital studio headquartered in Philadelphia. We have been designing and building websites and applications for business since 2002.
Yes. Here's the (MIT) license:
Copyright 2022 SiiTE Interactive LLC DBA Lightning Jar
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
By all means, please let me know. Thank you!
Send a message.
Pug is an open-source labor of love. Consider contributing or becoming a sponsor of the good folks who make it work: here.
You're still here? It's over. Go pugify some HTML.