Format HTML

Prettify HTML code, while collapsing multiple newlines, trimming and normalizing whitespace. Choose your preferred indentation and character limit for lines.

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: [
    { type: "code", label: "HTML" },
    { type: "number", label: "Character line limit", value: 0 },
    { type: "toggle", label: "Collapse new lines", value: true },
    {
      type: "dropdown",
      label: "Indent",
      options: [
        { label: "2 spaces", value: 2 },
        { label: "4 spaces", value: 4 },
        { label: "Tabs", value: "tab" },
      ],
    },
    {
      type: "import",
      value: "https://cdn.jsdelivr.net/npm/simply-beautiful@latest",
    },
  ],
  make: ([html, max_char, collapse, indent]) => {
    const indent_size = indent > 0 ? indent : 2

    let value = SimplyBeautiful().html(html, {
      indent_size,
      max_char,
    })

    if (collapse) {
      value = value.replace(/\s+\n+/g, "\n")
    }

    if (indent === "tab") {
      value = value.replace(new RegExp(` {${indent_size}}`, "g"), "\t")
    }

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