# Kita Html > Fast and type safe HTML templates using TypeScript ## Guide - [What is Kita Html](/guide/introduction.md): Overview of Kita Html's string-based JSX runtime, XSS protection model, async components, and package structure. - [Getting Started](/guide/getting-started.md): Install Kita Html, configure TypeScript, enable the XSS plugin, and verify the scanner catches unsafe JSX. - [How JSX Becomes HTML](/guide/how-jsx-becomes-html.md): Follow the compile-time JSX rewrite and the runtime steps that turn props and children into HTML strings. - [AI Support](/guide/ai-support.md): Use the Kita Html skill, llms.txt, llms-full.txt, raw Markdown pages, and project instructions to give coding agents accurate Kita Html context. - [Using the Safe Attribute](/guide/xss/safe-attribute.md): Escape untrusted JSX children with safe, Fragment safe, escapeHtml, and the supported suppression conventions. - [Running the XSS Scanner](/guide/xss/scanner-cli.md): Run xss-scan from the command line, target files or projects, interpret exit codes, and integrate it into CI. - [Safety Rules](/guide/xss/safety-rules.md): See which TypeScript types the XSS engine treats as safe, unsafe, composite, or exempt inside JSX children. - [Error Codes](/guide/xss/error-codes.md): Reference TS88601 through TS88604, what triggers each XSS diagnostic, and the recommended fix for each case. - [Why Not Auto-Escape](/guide/xss/why-not-auto-escape.md): Why string-based rendering cannot auto-escape children and why Kita Html relies on compile-time XSS checks instead. - [How XSS Detection Works](/guide/xss/detection.md): How the editor plugin and xss-scan CLI analyze JSX child types to report XSS issues before production. - [Async Components](/guide/async/async-components.md): Use async function components, understand promise propagation, and know when JSX results must be awaited. - [Suspense Streaming](/guide/async/suspense.md): Conceptual guide to Suspense streaming, request isolation, and when progressive async rendering is worth using. - [Using Suspense](/guide/async/using-suspense.md): Wrap async sections with Suspense, stream fallbacks, handle errors, share request IDs, and avoid async fallback delays. - [Error Boundaries](/guide/async/error-boundaries.md): Catch errors from async components with ErrorBoundary, handle fallback failures, and combine boundaries with Suspense. - [Streaming Internals](/guide/async/streaming-internals.md): Understand the HTML, template, script, and chunked transfer protocol behind Suspense streaming. - [JSX Syntax](/guide/jsx/syntax.md): Reference supported JSX features such as fragments, void elements, boolean attributes, styles, classes, and dynamic tags. - [Extending JSX Types](/guide/jsx/extending-types.md): Extend JSX.IntrinsicElements and HtmlTag to support custom elements, custom attributes, or unrestricted tags. - [Design Decisions](/guide/jsx/design-decisions.md): Architectural rationale for omitting context and for defining JSX.Element as string or Promise. - [Benchmarks](/guide/reference/benchmarks.md): Benchmark results, methodology, and the architecture choices that make Kita Html faster than virtual DOM renderers. - [Compatibility](/guide/reference/compatibility.md): Runtime, TypeScript, module, framework, browser, and editor compatibility requirements for Kita Html. - [Migrating from HTML](/guide/reference/migrating-from-html.md): Convert HTML templates to JSX by fixing attributes, void elements, comments, styles, and multiple roots. - [Additional Configuration](/guide/reference/additional-config.md): Format compact output with html-prettify and configure the legacy JSX transform when react-jsx is not used. ## Integrations - [Integrations](/integrations/overview.md): How Kita Html integrates with servers and frontend libraries, including official plugins and opt-in HTML attribute type extensions. - [Fastify](/integrations/frameworks/fastify.md): Render JSX with Fastify using reply.html(), stream Suspense, handle async errors, and control automatic doctype injection. - [Express](/integrations/frameworks/express.md): Render JSX with Express using res.html(), stream Suspense with request ids, handle async errors, and control auto-doctype. - [Elysia](/integrations/frameworks/elysia.md): Use Kita Html with Elysia through @elysiajs/html, including setup, response handling, configuration, and XSS tooling. - [HTMX](/integrations/type-extensions/htmx.md): Enable typed HTMX attributes in Kita Html with a triple-slash reference and use hx-get, hx-post, and hx-swap in JSX. - [Alpine.js](/integrations/type-extensions/alpine.md): Enable typed Alpine.js directives in Kita Html with triple-slash references and use x-data, x-show, and x-on in JSX. - [Hotwire Turbo](/integrations/type-extensions/hotwire-turbo.md): Enable typed Hotwire Turbo elements and attributes in Kita Html, including turbo-frame, turbo-stream, and Turbo Drive. - [Base Templates](/integrations/base-templates.md): Build shared HTML layouts in Kita Html, add doctype strings, define slot props, and use framework auto-doctype support. ## API - [API Reference](/api/index.md): This section documents the public API of each Kita Html package. - [XSS Analysis](/api/xss-analysis.md): The XSS analysis engine inspects JSX expressions at the TypeScript type level and emits diagnostics for potentially unsafe content. This engine is shared between the editor plugin and the CLI scanner. - [Editor Plugin](/api/editor-plugin.md): The TypeScript language service plugin provides real-time XSS diagnostics in editors that support TypeScript plugins. - [CLI Scanner](/api/scanner-cli.md): The xss-scan command-line tool runs the XSS analysis engine against an entire project or specific files. - [Class: HtmlTimeout](/api/html/classes/error-boundary.HtmlTimeout.md): An error thrown by the ErrorBoundary's timeout property. - [Function: ErrorBoundary()](/api/html/functions/error-boundary.ErrorBoundary.md): A component that adds an error boundary to catch any inner promise rejection. - [Function: attributesToString()](/api/html/functions/index.attributesToString.md): Transforms an object of attributes into a html attributes string. This function does not support Date objects. - [Function: contentsToString()](/api/html/functions/index.contentsToString.md): Joins raw string html elements into a single html string. A raw html fragment is just an array of strings, this method concatenates them. - [Function: createElement()](/api/html/functions/index.createElement.md): Generates a html string from the given contents. - [Function: escape()](/api/html/functions/index.escape.md): Tag function that escapes the given string pieces and interpolates the given values. Internally it uses escapeHtml to escape the values. - [Function: Fragment()](/api/html/functions/index.Fragment.md): A JSX Fragment is used to return multiple elements from a component. - [Function: isVoidElement()](/api/html/functions/index.isVoidElement.md): Returns true if the element is a html void element. - [Function: jsx()](/api/html/functions/jsx-runtime.jsx.md): Generates a html string from an attribute name of component and it's props. This function is meant to be used by the jsx runtime and should not be called directly. - [Function: jsxs()](/api/html/functions/jsx-runtime.jsxs.md): Generates a html string from an attribute name of component and it's props. This function is meant to be used by the jsx runtime and should not be called directly. - [Function: renderToStream()](/api/html/functions/suspense.renderToStream.md): Transforms a component tree who may contain Suspense components into a stream of HTML. - [Function: resolveHtmlStream()](/api/html/functions/suspense.resolveHtmlStream.md): Joins the html base template (with possible suspense's fallbacks) with the request data and returns the final Readable to be piped into the response stream. This API is meant to be used by library authors and should not be used directly. - [Function: Suspense()](/api/html/functions/suspense.Suspense.md): A component that returns a fallback while the async children are loading. The rid prop is the one renderToStream returns, this way the suspense knows which request it belongs to. Warning: Using Suspense without any type of runtime support will LEAK memory and not work. Always use with renderToStream or within a framework that supports it. - [Interface: ErrorBoundaryProps](/api/html/interfaces/error-boundary.ErrorBoundaryProps.md): The props for the ErrorBoundary component. - [Interface: SuspenseProps](/api/html/interfaces/suspense.SuspenseProps.md): The props for the Suspense component. - [Module: index](/api/html/modules/index.md) - [Module: error-boundary](/api/html/modules/error-boundary.md) - [Module: jsx-runtime](/api/html/modules/jsx-runtime.md) - [Module: suspense](/api/html/modules/suspense.md) - [Type Alias: Children](/api/html/types/index.Children.md) - [Type Alias: Component()](/api/html/types/index.Component.md) - [Type Alias: PropsWithChildren](/api/html/types/index.PropsWithChildren.md) - [Type Alias: RequestData](/api/html/types/suspense.RequestData.md): Everything a suspense needs to know about its request lifecycle. - [Variable: e](/api/html/variables/index.e.md): Alias of escape to reduce verbosity. - [Variable: escapeHtml()](/api/html/variables/index.escapeHtml.md): Escapes a string for safe use as HTML text content. If the value is not a string, it is coerced to one with its own toString() method. If the Bun runtime is available, this function will be swapped out to Bun.escapeHTML. - [~~Variable: h~~](/api/html/variables/index.h.md) - [~~Variable: Html~~](/api/html/variables/index.Html.md): Namespace export containing all core runtime functions. Used with the legacy jsx: "react" transform where jsxFactory is set to Html.createElement. When using the modern jsx: "react-jsx" transform, import individual functions directly from @kitajs/html instead. - [Variable: SuspenseRoot](/api/html/variables/suspense.SuspenseRoot.md): The SuspenseRoot is a store that holds the state of all the suspense components rendered in the server. This was previously a global object called SUSPENSE_ROOT, but it was moved out of the global scope to avoid many issues related to global state. - [Variable: SuspenseScript](/api/html/variables/suspense.SuspenseScript.md): Small client-side helper used to replace suspense fallbacks with streamed template content. As this script is the only residue of this package that is actually sent to the client, it's important to keep it as small as possible and also include the license to avoid legal issues. It requires support for