Convert HTML to Pug

Pug (previously named Jade) is a clean, whitespace sensitive syntax for writing HTML. Convert your HTML into Pug code in the browser.

Face with waiting expression Nothing to see yet!

Loading takeymakey...
TakeyMakey code
Want this tool to do something else? Edit the code below and make it do whatever you want.
({
  take: [
    { key: "html", type: "code", label: "HTML" },
    { key: "double", type: "toggle", label: "Double quotes", value: true },
    {
      key: "noattrcomma",
      type: "toggle",
      label: "Omit attribute comma",
      value: true,
    },
    { key: "noemptypipe", type: "toggle", label: "Omit lines with only pipe" },
    { key: "bodyless", type: "toggle", label: "Omit enveloping tags" },
    { key: "numeric", type: "toggle", label: "Numeric character entities" },
    {
      key: "indent",
      type: "dropdown",
      label: "Indent",
      options: ["Two spaces", "Four spaces", "Tabs"],
    },
    { key: "wrapLength", type: "number", label: "Wrap length", value: 80 },
    {
      type: "import",
      value: [
        "https://cdn.jsdelivr.net/npm/he@1.2.0/he.min.js",
        "https://cdn.jsdelivr.net/npm/html2jade@0.8.6/lib/html2jade.js",
      ],
    },
  ],
  make: ({ html, indent, ...options }) => {
    if (!html) return

    options.nspaces = indent === "Four spaces" ? 4 : 2
    options.tabs = indent === "Tabs"

    return new Promise((res, rej) => {
      Html2Jade.convertHtml(html, options, (err, value) =>
        err ? rej(err) : res([{ type: "code", value }])
      )
    })
  },
  options: { mode: "iframe" },
})