HTML Entity Encoder & Decoder - Online Escape Tool
Encode special characters to HTML entities or decode them back to normal text. Perfect for web developers to sanitize or reverse HTML escaping. All processing is client-side.
UD5 Toolkit
Escape to safely embed HTML in web pages or prevent XSS attacks. Use Unescape to convert escaped entities back to readable HTML. The live preview shows exactly how the (unescaped) HTML renders in a browser.
<, >, &, ", and ' into their corresponding HTML entities (<, >, &, ", '). This is essential for preventing XSS (Cross-Site Scripting) attacks, safely displaying HTML code as text on web pages, embedding user-generated content, and ensuring valid HTML when special characters appear in attributes or text nodes.
<div> becomes <div>. This is what you need when embedding code snippets in a webpage.<div> becomes <div>. This is useful when you've received escaped HTML and need to see or use the original markup.
& → & (ampersand)< → < (less-than / opening tag)> → > (greater-than / closing tag)" → " (double quote)' → ' (single quote / apostrophe)&) is always escaped first to prevent double-escaping issues.
< becomes &lt; — which renders as < instead of <. To avoid this, always check if your input already contains HTML entities before escaping. Our tool's Unescape mode can help you revert double-escaped content back to its original form. If you're unsure, use the preview panel to verify the rendered output.
sandbox="allow-scripts" iframe attribute. This means scripts within your HTML will execute (so you can preview dynamic content), but they cannot access the parent page's DOM, cookies, or sensitive data. The preview is isolated from the rest of the tool. No network requests from the preview can affect the tool page itself.
< and > become harmless entities that browsers display as text rather than executing as code. For example, an attacker's <script>stealCookies()</script> becomes <script>stealCookies()</script>, which renders as plain text instead of running as JavaScript. Always escape user-generated content before inserting it into HTML.
title="John & Jane's car" should be escaped as title="John & Jane's car" to ensure valid HTML. Our tool handles both double and single quote escaping, making it perfect for securing attribute values.
Encode special characters to HTML entities or decode them back to normal text. Perfect for web developers to sanitize or reverse HTML escaping. All processing is client-side.
Interactively add and adjust multiple box shadows on a sample element. Drag sliders for offset, blur, spread, and color. Copy the clean CSS code instantly.
Visually experiment with Flexbox container and item properties. See the layout update in real time and copy the CSS. Learn by doing, fully interactive.
Learn how to let content extend a few pixels beyond a clip boundary with overflow‑clip‑margin. Interactive playground.
Test the new HTML popover attribute for creating accessible tooltips, menus, and dialogs without JavaScript. Copy code snippets.
Paste code and generate a beautiful, syntax‑highlighted PNG image. Choose theme and window style. Shareable code pics.
Design a tooltip that appears on hover without JavaScript. Choose positioning, arrow, and animation. Copy the clean HTML/CSS.
See how scroll‑padding and scroll‑margin affect the position of elements when using anchor links or scroll‑snap. Visual.
Create CSS mask‑image effects with custom shapes, gradients, and SVGs. Visually see the mask applied to an image. Copy the CSS.
Use isolation: isolate to contain mix‑blend‑mode and filters. See the visual difference with and without. Quick demo.
Design layered box shadows interactively and get the CSS code in real time. Adjust offset, blur, spread, and color. Essential tool for UI designers.
Generate a random HTML/CSS card with different box model properties. Inspect and guess the size. For learners.
Build a .editorconfig file by setting indentation, charset, and end‑of‑line rules for your project. Keep all contributors aligned.
Toggle contain: strict, content, paint, layout and see how it affects rendering. Understand isolation for faster pages.
Adjust margin, border, padding, and content sizes interactively and see the rendered box model. Get the exact CSS. Teach or learn layout.
Paste a screenshot or image, crop it, and add arrows, rectangles, and text. Essential for bug reports and tutorials.
Create inner shadows for a pressed or sunken effect. Visually adjust and copy the CSS. Learn inset.
Paste a cURL command and instantly generate equivalent HTTP request code in Python, JavaScript, PHP, and more. Speed up API integration — fully local.
Upload an image and get a suggested alt text description using a local vision model (WASM). Improve SEO and accessibility fast.
Design neumorphic elements by adjusting box‑shadow parameters. Real‑time preview and CSS output. For modern soft UI interfaces.
Set up a Shared Worker that shares state across multiple browser tabs. Counter and messaging demo. Advanced web.
Press Ctrl+V to paste an image from your clipboard into the page. See dimensions and download. Simple utility.
Generate custom placeholder images for mockups and layouts. Specify dimensions, colors, and text. Export as PNG or use the generated data URI. Entirely browser-based.
Paste your CSS and see warnings for properties that have limited browser support. Links to CanIUse. Modernize safely.
Build a custom CSS reset by toggling which elements to normalize. Copy the resulting stylesheet. Lean and clean.
Design a pure CSS tooltip with custom text, position (top/bottom/left/right), and arrow. Copy the clean code.
Create a passkey and authenticate using the Web Authentication API. Supports platform authenticators (TouchID, FaceID). No server.
Visually configure scroll‑snap containers and items. Adjust alignment, stop behavior, and padding. Copy the clean CSS instantly.
Open a modal and see how focus is trapped and restored. Copy the lightweight focus‑trap code. Accessible pattern.
Change all alignment and justification values and see the flex items move. Indispensable for learning Flexbox.