HTML to YAML Converter
About this app
An interactive web app that converts HTML code or a URL into a YAML file
HTML to YAML Converter 🔗 HTML to YAML Converter 📑 Enter HTML code or a URL below, then press "Convert". Convert
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>HTML to YAML Converter</title>
<meta name="description" content="An interactive web app that converts HTML code or a URL into a YAML file">
<meta name="keywords" content="HTML, YAML, converter, web app">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
<script type="text/javascript">
try {
function parseHTML(html) {
const parser = new DOMParser();
const xmlDoc = parser.parseFromString(html, "text/html");
const yaml = {};
const title = xmlDoc.querySelector("title");
if (title) {
yaml["Title"] = title.textContent;
}
const headings = Array.from(xmlDoc.querySelectorAll("h1, h2, h3, h4, h5, h6"));
headings.forEach((heading, index) => {
yaml[`Heading ${index + 1}`] = heading.textContent;
});
const links = Array.from(xmlDoc.querySelectorAll("a"));
links.forEach((link, index) => {
yaml[`Link ${index + 1}`] = link.href;
});
return yaml;
}
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("convert").addEventListener("click", async function() {
const urlOrHtml = document.getElementById("input").value;
let html;
if (urlOrHtml.startsWith("http://") || urlOrHtml.startsWith("https://")) {
const response = await fetch(urlOrHtml);
html = await response.text();
} else {
html = urlOrHtml;
}
const yaml = parseHTML(html);
document.getElementById("output").textContent = JSON.stringify(yaml, null, 2);
});
});
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
font-family: 'Indie Flower', cursive;
background: linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%);
color: white;
padding: 50px;
}
#main-container {
text-align: center;
}
#output {
white-space: pre;
font-size: 14px;
}
button {
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>🔗 HTML to YAML Converter 📑</h1>
<p>Enter HTML code or a URL below, then press "Convert".</p>
<textarea id="input" rows="10" style="width: 100%;"></textarea>
<button id="convert">Convert</button>
<pre id="output"></pre>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!