Convert Pug to HTML

Pug (previously named Jade) is a clean, whitespace sensitive syntax for writing HTML. Convert pug code in the browser with support for passing JSON locals.

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: "code", type: "code", label: "Pug" },
    { key: "pretty", type: "toggle", label: "Pretty" },
    {
      key: "doctype",
      type: "dropdown",
      label: "Doctype",
      options: ["HTML5", "None"],
    },
    { key: "locals", type: "json", label: "Locals" },
    { type: "import", value: "https://pugjs.org/js/pug.js" },
  ],
  make: (data) => {
    const opts = {
      pretty: data.pretty,
      doctype: data.doctype === "HTML5" ? "html" : "",
      ...data.locals,
    }

    const value = require("pug").render(data.code, opts).trim()

    return [{ type: "code", value }]
  },
})