HTML, CSS & JavaScript Formatter

Beautify and format messy HTML, CSS, JavaScript, and JSON source code with custom indentations, minification, and line stats.

Indent:

Source Code Input183 chars · 1 lines

Formatted Output

<div className="card" id="main">
  <header>
    <h1>Title</h1>
    <p>Welcome to Skill-Forge!</p>
  </header>
  <main>
    <section>
      <h2>Section 1</h2>
      <p>Lorem ipsum dolor sit amet.</p>
    </section>
  </main>
</div>

Formatted: 241 charsLines: 12

cheatsheetKeep learning

JavaScript cheat sheet — part 1

Solidify variables, scope, closures, and coercion before you minify another script.

Open guide

More developer tools

View all →

Interactive Git graph & CLI sandbox

Master Git branching, rebases, merges, cherry-picks, detached HEAD, and stashes with a live reactive DAG graph and interactive terminal.

Typing test for developers

Practice everyday typing, code symbols, terminal commands, and long-form developer text. Tracks WPM, accuracy, streak, and consistency score.

Live markdown preview

Split-pane markdown editor with real-time preview. Perfect for writing README files, documentation, and blog posts with export to HTML.

Visual gradient generator

Build linear, radial, and conic CSS gradients visually. Add stops, adjust angles, and copy ready-to-use CSS or Tailwind classes.

Mermaid diagram editor & previewer

Interactive Mermaid diagram editor with live SVG rendering, theme selection, presets, zoom/pan canvas, and export to SVG, PNG, and .mmd.

Generate & Read QR Codes

Create custom QR codes for URLs, Wi-Fi, Contacts, and Text with color & logo options, or upload/scan QR codes to decode content instantly.