Skip to content

Fix HTML DOCTYPE escaping issue in rendered output#25

Merged
mahata merged 2 commits intomainfrom
copilot/fix-24
Jul 9, 2025
Merged

Fix HTML DOCTYPE escaping issue in rendered output#25
mahata merged 2 commits intomainfrom
copilot/fix-24

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Jul 9, 2025

The browser was receiving invalid HTML markup where the DOCTYPE declaration was being HTML-escaped and placed inside the document content instead of at the very beginning as required for valid HTML5 structure.

Problem

Before: The DOCTYPE was rendered as escaped text inside the HTML content:

&lt;!DOCTYPE html&gt;<html lang="en"><head>...

After: The DOCTYPE is now properly placed unescaped at the document start:

<!DOCTYPE html><html lang="en"><head>...

Root Cause

The issue was in hono/routes/index.tsx where the DOCTYPE was being rendered as a JSX text node inside a fragment:

// ❌ This causes the DOCTYPE to be HTML-escaped
return c.html(
  <>
    {"<!DOCTYPE html>"}
    {await ChatPage()}
  </>,
);

JSX fragments treat string literals as text nodes that get HTML-escaped for security, which caused the DOCTYPE to be rendered as &lt;!DOCTYPE html&gt; instead of the required unescaped <!DOCTYPE html>.

Solution

Changed to use template literal concatenation to ensure the DOCTYPE appears unescaped:

// ✅ This ensures proper unescaped DOCTYPE at document start
return c.html(`<!DOCTYPE html>${await ChatPage()}`);

Validation

  • ✅ Added specific test to verify DOCTYPE is unescaped and at document start
  • ✅ All existing tests continue to pass (13/13)
  • ✅ Manual browser testing confirms proper rendering
  • ✅ HTML structure now follows valid HTML5 standards

Application Screenshot

The application continues to work exactly as before, but now with proper HTML5 document structure that browsers can parse correctly.

Fixes #24.


💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

Co-authored-by: mahata <23497+mahata@users.noreply.github.com>
Copilot AI changed the title [WIP] HTML markup issue: DOCTYPE and <head> contents are incorrect in rendered output Fix HTML DOCTYPE escaping issue in rendered output Jul 9, 2025
Copilot AI requested a review from mahata July 9, 2025 13:14
Copilot finished work on behalf of mahata July 9, 2025 13:14
@mahata mahata marked this pull request as ready for review July 9, 2025 13:20
@mahata mahata merged commit 6ae9856 into main Jul 9, 2025
2 checks passed
@mahata mahata deleted the copilot/fix-24 branch July 9, 2025 13:21
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

HTML markup issue: DOCTYPE and <head> contents are incorrect in rendered output

2 participants