🔤 Developer Tools — Free & Instant

Free HTML Encoder & Decoder

Convert special characters to HTML entities and decode HTML entities back to plain text. Supports named, numeric (decimal) and hex entity modes with live preview.

🔒 Encode Entities 🔓 Decode Entities 🏷️ Named & 🔢 Numeric < 🔡 Hex < 👁️ Live Preview 🎨 Highlight 📚 Reference

Entity type: Named & Decimal < Hex <

Scope: Unsafe only All non-ASCII Full (every char)

Preserve newlines

—

Preview will appear here…

      Encoded output with highlighted entities will appear here…
    

What Are HTML Entities?

HTML entities are special codes used to represent characters that have a reserved meaning in HTML, or characters that cannot easily be typed on a keyboard. They begin with an ampersand (&) and end with a semicolon (;). For example, the less-than sign < must be written as < in HTML to prevent it from being interpreted as the start of an HTML tag.

There are three forms of HTML entities: named entities like &, < and ©; decimal numeric entities like < (for <); and hexadecimal numeric entities like <. All three forms are supported by all modern browsers and produce identical output.

`; document.getElementById('inputArea').value = sample; runProcess(); showToast('📋 Sample loaded'); } // ========== ENTITY REFERENCE TABLE ========== function renderEntityGrid() { const grid = document.getElementById('entityGrid'); const searchTerm = document.getElementById('entitySearch').value.toLowerCase(); const entities = Object.entries(htmlEntities).filter(([char, name]) => { return searchTerm === '' || name.includes(searchTerm) || char.includes(searchTerm); }); grid.innerHTML = entities.map(([char, name]) => `

${char} &${name}; &#${char.charCodeAt(0)};

`).join(''); } function filterEntities() { renderEntityGrid(); } function insertEntity(entity) { const input = document.getElementById('inputArea'); input.value += entity; runProcess(); showToast(`Inserted ${entity}`); } function renderEssentialEntities() { const container = document.getElementById('essentialList'); container.innerHTML = essentialEntities.map(ent => `

${ent.char} ${ent.code} &#${ent.char.charCodeAt(0)};

`).join(''); } // ========== INITIALIZE ========== window.addEventListener('DOMContentLoaded', () => { renderEntityGrid(); renderEssentialEntities(); runProcess(); });