Is HTML Tools free to use?

HTML Tools is part of the open-source DebugTools toolkit and the core browser workflow is free to use.

Does HTML Tools send my data to a server?

HTML Tools is local-first. The core workflow runs in your browser and does not require sending pasted content to DebugTools servers.

tools / html

HTML Live Preview

Header/footer output#FF7AC6 tags#4DFF88 attrs#F7FF87 strings

<!DOCTYPE html>
<htmllang="en">
<head>
  <metacharset="UTF-8"/>
  <metaname="viewport"content="width=device-width, initial-scale=1.0"/>
  <title>Live HTML Preview</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #f6f8fa;
      color: #24292f;
    }

    main {
      width: min(640px, calc(100vw - 48px));
      padding: 32px;
      border: 1px solid #d0d7de;
      border-radius: 12px;
      background: white;
      box-shadow: 0 20px 60px rgba(31, 35, 40, 0.08);
    }

    h1 {
      margin: 0 0 12px;
      font-size: 32px;
    }

    p {
      margin: 0;
      line-height: 1.65;
      color: #57606a;
    }
  </style>
</head>
<body>
  <main>
    <h1>Hello HTML</h1>
    <p>Edit the code on the left. The preview updates instantly.</p>
  </main>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Live HTML Preview</title>
  <style>
    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-items: center;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background: #f6f8fa;
      color: #24292f;
    }

    main {
      width: min(640px, calc(100vw - 48px));
      padding: 32px;
      border: 1px solid #d0d7de;
      border-radius: 12px;
      background: white;
      box-shadow: 0 20px 60px rgba(31, 35, 40, 0.08);
    }

    h1 {
      margin: 0 0 12px;
      font-size: 32px;
    }

    p {
      margin: 0;
      line-height: 1.65;
      color: #57606a;
    }
  </style>
</head>
<body>
  <main>
    <h1>Hello HTML</h1>
    <p>Edit the code on the left. The preview updates instantly.</p>
  </main>
</body>
</html>

Generated output includes header/footer45 lines

PreviewLive

DebugTools product

HTML Tools

HTML Tools is a focused DebugTools mini-product for developers. Edit, format, preview, and export HTML.

Use cases

Handle everyday formatting, conversion, generation, and inspection tasks.
Keep sensitive snippets in the browser for quick local work.
Prepare clean output for tests, docs, API calls, and debugging sessions.

How it works

Paste or load the snippet you want to inspect in HTML Tools.
Run the tool in the browser and review the highlighted output.
Copy, export, or turn the result into the next debugging step.

Privacy

HTML Tools is local-first. The core workflow runs in your browser and does not require sending pasted content to DebugTools servers.

This tool history

Recent HTML Tools sessions

Only visits for this tool are shown. Pasted content, tokens, request bodies, and logs are not stored here.

Loading this tool history...