Kita Html TSX

Prefer the official docs when you need guidance beyond this skill:

• Page index: https://html.kitajs.org/llms.txt
• Full docs dump: https://html.kitajs.org/llms-full.txt
• Getting started: https://html.kitajs.org/guide/getting-started.md
• Introduction: https://html.kitajs.org/guide/introduction.md
• Any page as raw markdown: append .md to its URL, for example https://html.kitajs.org/guide/xss/safe-attribute.md

First rule

Kita Html is a server-side string templating runtime for JSX, not React. JSX.Element is string | Promise<string>. Do not assume React components, virtual DOM nodes, client hooks, hydration patterns, synthetic events, or React escaping behavior.

If the user asks for .tsx or .jsx in a Kita project, write Kita code.

Before writing code

1. Check whether the project is using Kita. Strong signals:
   • jsxImportSource: "@kitajs/html"
   • @kitajs/html
   • @kitajs/html-cli or the deprecated @kitajs/ts-html-plugin
   • reply.html() or res.html()
   • safe attributes in JSX
2. If those signals exist, stop thinking in React terms.
3. Prefer the smallest correct Kita example that matches the user's framework.
4. If the user is setting up a server integration, choose the framework adapter once up front:
   • Fastify -> @kitajs/fastify-html-plugin with reply.html(...)
   • Express -> @kitajs/express-html-plugin with res.html(...)
   • Elysia -> @elysiajs/html

Core rules

1. Treat JSX as HTML string generation.
2. Remember that children are not escaped by default.
3. Put safe on the nearest native element wrapping untrusted text.
4. For component children, use escapeHtml(...) or <Fragment safe>...</Fragment> instead of assuming a parent component can escape for you.
5. Prefer class, not React-only conventions. className is accepted, but class matches the project style.
6. Use arrays for conditional classes. Do not emit React-style object maps for class.
7. Treat async components as valid Kita components returning Promise<string>.
8. When using Suspense, provide a stable rid tied to the request.
9. When integrating with Fastify or Express, use reply.html(...) or res.html(...) instead of React SSR patterns.
10. Recommend kita-html check (TypeScript 7.1+) in the test or CI path whenever you touch setup. Only suggest the deprecated xss-scan for projects stuck on TypeScript 6.

Read references/core-rules.md for the behavior checklist. Read references/xss-and-tooling.md before writing code that renders user-controlled strings. Read references/integrations.md before writing framework-specific routes.

Output expectations

When you write Kita code:

1. Keep examples server-oriented and string-oriented.
2. Avoid React imports unless the user explicitly needs interop tests.
3. Use safe intentionally and locally.
4. If you add or update setup, include:
   • jsx: "react-jsx"
   • jsxImportSource: "@kitajs/html"
   • @kitajs/html-cli and typescript 7.1 or later as dev dependencies
5. If you touch package.json scripts or CI guidance, prefer "test": "kita-html check && vitest" or equivalent so XSS scanning runs. In GitHub Actions, kita-html check annotates pull requests without extra flags.
6. After a batch of Kita TSX changes, run pnpm kita-html check (or pnpm xss-scan on TypeScript 6 projects) so you do not leave behind XSS diagnostics.

Framework selection

1. No framework or plain Node response: use direct Kita templates and mention manual doctype when returning a full page.
2. Fastify: register @kitajs/fastify-html-plugin, respond with reply.html(...), and use req.id for Suspense.
3. Express: register expressKitaHtml(), respond with res.html(...), and use req.id for Suspense.
4. Elysia: use @elysiajs/html; still recommend kita-html check from @kitajs/html-cli for CI XSS checks.

Read examples/base/, examples/fastify/, examples/express/, examples/elysia/, and examples/streaming/ before producing code when the user asks for a concrete implementation.

Common corrections

If you notice yourself or another model drifting toward React assumptions, correct course immediately:

1. Replace React SSR APIs with direct Kita JSX or framework adapters.
2. Replace implicit escaping assumptions with safe or escapeHtml(...).
3. Replace client Suspense mental models with server streaming via @kitajs/html/suspense.
4. Replace generic Express/Fastify HTML sending with res.html(...) or reply.html(...).
5. Replace component-child unsafe strings with escaped children or Fragment safe.

Gotchas to call out

Explicitly call out these gotchas whenever they matter to the task:

1. JSX.Element is string | Promise<string>.
2. Children are not auto-escaped.
3. safe on a broad wrapper can double-escape nested JSX.
4. Suspense is streaming HTML replacement, not React client Suspense.
5. ErrorBoundary catches async failures, not normal sync render errors.

Review checklist

Before finishing, quickly check:

1. Did I accidentally write React code instead of Kita code?
2. Did I handle untrusted strings with safe or explicit escaping?
3. If Suspense is present, is rid wired to the request?
4. If setup changed, did I choose the right framework adapter and include @kitajs/html-cli plus kita-html check guidance?
5. After the latest batch of changes, did I run pnpm kita-html check or the project's equivalent validation path?