Code Preview Buddy
Paste your code below. We'll wrap it in full HTML, preview it, and show the breakdown.
Live Output Preview
Full HTML Output
Color-Coded HTML Breakdown
' : '';
fullHTML = `
Preview
${userCodeRaw}
${integrationCode}
`;
const previewFrame = document.getElementById('previewFrame');
const previewDoc = previewFrame.contentDocument || previewFrame.contentWindow.document;
previewDoc.open();
previewDoc.write(fullHTML);
previewDoc.close();
document.getElementById('htmlOutput').style.display = 'none';
document.getElementById('colorCodedOutput').style.display = 'none';
}
function toggleHTML() {
const htmlBox = document.getElementById('htmlOutput');
htmlBox.style.display = htmlBox.style.display === 'none' ? 'block' : 'none';
htmlBox.textContent = fullHTML;
}
function toggleColorCoded() {
const colorBox = document.getElementById('colorCodedOutput');
colorBox.style.display = colorBox.style.display === 'none' ? 'block' : 'none';
const userCodeRaw = document.getElementById('codeInput').value;
const userCodeLines = userCodeRaw.trim().split('\n').map(line => line.trim());
const lines = fullHTML.split('\n');
let output = '';
lines.forEach(line => {
const trimmed = line.trim();
if (userCodeLines.includes(trimmed)) {
output += `${escapeHTML(line)}\n`;
} else if (
trimmed.startsWith('') ||
trimmed.startsWith('') ||
trimmed.startsWith('') ||
trimmed.startsWith('')
) {
output += `${escapeHTML(line)}\n`;
} else {
output += `${escapeHTML(line)}\n`;
}
});
colorBox.innerHTML = output;
}