HTML Formatter API: The Complete Guide

Need to clean up messy HTML code? This guide covers everything you need to know about HTML formatting via API, including beautification options, indentation settings, and implementation examples in multiple languages.

Why Format HTML?

Well-formatted HTML is easier to read, debug, and maintain. Proper indentation reveals the document structure at a glance, making it simple to identify nested elements and spot errors. An API-based formatter ensures consistent styling across your team.

Minified or poorly formatted HTML like <div><ul><li>Item 1</li><li>Item 2</li></ul></div> becomes much more readable when properly formatted.

Formatting Benefits

Properly formatted HTML provides several advantages:

• Readability: Clear structure makes code easier to understand
• Debugging: Spot missing closing tags and nesting errors quickly
• Collaboration: Consistent formatting improves code reviews
• Maintenance: Easier to modify and extend well-formatted code

Using the HTML Formatter API

TinyFn provides a simple endpoint to format HTML code:

POST https://api.tinyfn.io/v1/format/html
Headers: X-API-Key: your-api-key
Content-Type: application/json

{
  "html": "<div><p>Hello</p></div>",
  "indent": 2
}

{
  "formatted": "<div>\n  <p>Hello</p>\n</div>",
  "indent": 2,
  "wrap_line_length": 120
}

Parameters

Code Examples

JavaScript / Node.js

const response = await fetch('https://api.tinyfn.io/v1/format/html', {
  method: 'POST',
  headers: {
    'X-API-Key': 'your-api-key',
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    html: '<div><span>Hello</span></div>',
    indent: 4
  })
});
const { formatted } = await response.json();
console.log(formatted);

Python

import requests

response = requests.post(
    'https://api.tinyfn.io/v1/format/html',
    json={'html': '<div><span>Hello</span></div>', 'indent': 2},
    headers={'X-API-Key': 'your-api-key'}
)
data = response.json()
print(data['formatted'])

cURL

curl -X POST "https://api.tinyfn.io/v1/format/html" \
  -H "X-API-Key: your-api-key" \
  -H "Content-Type: application/json" \
  -d '{"html": "<div><p>Hello</p></div>", "indent": 2}'

Formatting Options

• Indentation: Configure spaces or tabs for indentation
• Line Wrapping: Set maximum line length before wrapping attributes
• Preserve Newlines: Keep or remove existing blank lines
• Inline Elements: Configure which elements stay inline
• Attribute Sorting: Sort attributes alphabetically or by importance

Best Practices

1. Use in CI/CD: Integrate HTML formatting into your build pipeline
2. Standardize settings: Use consistent formatting options across your team
3. Format before commit: Use pre-commit hooks to format HTML files
4. Validate first: Ensure HTML is valid before formatting

Use via MCP

Your AI agent can call this tool directly via Model Context Protocol — no HTTP code needed. Add TinyFn to Claude Desktop, Cursor, or any MCP client:

{
  "mcpServers": {
    "tinyfn-format": {
      "url": "https://api.tinyfn.io/mcp/format/",
      "headers": {
        "X-API-Key": "your-api-key"
      }
    }
  }
}

See all formatting tools available via MCP in our Formatting MCP Tools for AI Agents guide.