### Install and Run Kita Html Examples Source: https://github.com/kitajs/html/blob/next/examples/README.md Instructions for setting up and running the provided examples. Navigate to an example directory, install dependencies with pnpm, and start the development server. ```bash cd examples/ pnpm install pnpm dev ``` -------------------------------- ### Install and Run Development Server Source: https://github.com/kitajs/html/blob/next/packages/docs/README.md Commands to install dependencies, start the development server, build for production, and preview the production build. ```bash pnpm install pnpm dev pnpm build pnpm preview ``` -------------------------------- ### Quick Start Development Commands Source: https://github.com/kitajs/html/blob/next/CLAUDE.md Essential commands for setting up and developing within the Kita Html monorepo, including installation, building, testing, and formatting. ```bash pnpm install # Install dependencies (pnpm >=10 required) pnpm build # Build published packages under packages/* pnpm build-all # Build the full workspace pnpm test # Run all tests pnpm test-types # Type-check all packages pnpm format # Format code pnpm bench # Run benchmarks ``` -------------------------------- ### Install @kitajs/fastify-html-plugin Source: https://github.com/kitajs/html/blob/next/packages/fastify-html-plugin/README.md Install the plugin using npm. Ensure you have followed the @kitajs/html installation guide first to prevent XSS vulnerabilities. ```sh npm install @kitajs/fastify-html-plugin ``` -------------------------------- ### Agent Prompts for Kita Html Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/guide/ai-support.mdx Use these example prompts to guide coding agents when working with Kita Html. They cover building pages with streaming async sections, fixing code for safe rendering and XSS scans, and converting React components. ```text Build this Fastify page with Kita Html and stream async sections. ``` ```text Fix this Kita TSX so user bios render safely and xss-scan passes. ``` ```text Convert this React-style server component into Kita Html. ``` -------------------------------- ### Install Kita Html Skill Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/guide/ai-support.mdx Install the `kita-html` skill for coding agents that support installable skills. This teaches the agent the core runtime model, XSS rules, framework adapters, async components, and Suspense streaming. ```bash skills add kitajs/html --skill kita-html ``` -------------------------------- ### Install Kita.js HTML and TypeScript Plugin Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/guide/getting-started.mdx Install the core JSX runtime and the TypeScript plugin for editor diagnostics and compile-time XSS scanning. ```bash npm i @kitajs/html@next @kitajs/ts-html-plugin@next ``` ```bash yarn add @kitajs/html@next @kitajs/ts-html-plugin@next ``` ```bash pnpm add @kitajs/html@next @kitajs/ts-html-plugin@next ``` ```bash bun add @kitajs/html@next @kitajs/ts-html-plugin@next ``` -------------------------------- ### Basic Usage Example Source: https://github.com/kitajs/html/blob/next/packages/fastify-html-plugin/CLAUDE.md Registers the plugin and uses `reply.html()` to render a simple HTML component. ```typescript import fastifyKitaHtml from '@kitajs/fastify-html-plugin'; app.register(fastifyKitaHtml); app.get('/', (req, reply) => { reply.html( Hello World ); }); ``` -------------------------------- ### Simple Kita HTML Example Source: https://github.com/kitajs/html/blob/next/packages/docs/plugins/kita/README.md A basic example demonstrating a simple Kita JSX element that renders to HTML. ```tsx const html =
Hello World
``` -------------------------------- ### Install @elysiajs/html Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/integrations/frameworks/elysia.mdx Use your package manager to install the @elysiajs/html plugin. ```bash npm i @elysiajs/html ``` ```bash yarn add @elysiajs/html ``` ```bash pnpm add @elysiajs/html ``` ```bash bun add @elysiajs/html ``` -------------------------------- ### Development Server for Docs Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Starts the development server for the documentation site on port 1229. ```bash pnpm -F @kitajs/docs-html dev ``` -------------------------------- ### Install ts-html-plugin Source: https://github.com/kitajs/html/blob/next/packages/ts-html-plugin/README.md Install the plugin using npm. ```sh npm install @kitajs/ts-html-plugin ``` -------------------------------- ### Install @kitajs/html and @kitajs/ts-html-plugin Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Install the core HTML package and the TypeScript plugin for editor intellisense. Run this command in your terminal. ```sh npm install @kitajs/html @kitajs/ts-html-plugin ``` -------------------------------- ### Install Fastify HTML Plugin Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/integrations/frameworks/fastify.mdx Install the Fastify HTML plugin using your preferred package manager. ```bash npm i @kitajs/fastify-html-plugin ``` ```bash yarn add @kitajs/fastify-html-plugin ``` ```bash pnpm add @kitajs/fastify-html-plugin ``` ```bash bun add @kitajs/fastify-html-plugin ``` -------------------------------- ### Install Dependencies Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Installs project dependencies using pnpm. Ensure Node.js 24+ and pnpm 10+ are installed. ```bash pnpm install ``` -------------------------------- ### CLI Usage Examples Source: https://github.com/kitajs/html/blob/next/packages/ts-html-plugin/README.md Examples of how to use the xss-scan CLI tool to find XSS vulnerabilities in your project. ```sh $ xss-scan --help ``` ```sh $ xss-scan ``` ```sh $ xss-scan --cwd src ``` ```sh $ xss-scan --project tsconfig.build.json ``` ```sh $ xss-scan src/index.tsx src/App.tsx ``` -------------------------------- ### Install ts-html-plugin Globally Source: https://github.com/kitajs/html/blob/next/packages/ts-html-plugin/README.md Install the plugin globally to use its CLI functionality. ```sh npm install -g @kitajs/ts-html-plugin ``` -------------------------------- ### Project Structure Overview Source: https://github.com/kitajs/html/blob/next/packages/docs/README.md Illustrates the directory and file structure of the new documentation setup, including public assets, navigation, content pages, theme components, and configuration files. ```tree docs-new/ ├── docs/ │ ├── public/ # Static assets │ │ ├── logo.png │ │ ├── doug-pc-glasses.svg │ │ └── xss-preview.png │ ├── _nav.json # Top navigation │ ├── index.md # Home page with hero │ ├── guide/ │ │ ├── _meta.json │ │ ├── introduction.md │ │ ├── getting-started.md │ │ ├── xss-protection/ # XSS security docs │ │ │ ├── overview.md │ │ │ ├── scanner.md │ │ │ └── sanitization.md │ │ └── features/ │ │ ├── jsx-syntax.md │ │ ├── async-components.md │ │ └── benchmark.md │ ├── integrations/ │ │ ├── overview.md │ │ ├── frameworks/ │ │ │ └── fastify.md │ │ └── libraries/ │ │ ├── htmx.md │ │ ├── alpine.md │ │ ├── turbo.md │ │ └── base-templates.md │ └── api/ # API reference │ ├── index.md │ ├── core.md │ ├── jsx-runtime.md │ └── plugins.md ├── theme/ │ ├── components/ │ │ ├── HeroInteractive.tsx # Animated hero │ │ └── HeroInteractive.module.css # Hero styles │ ├── index.tsx # Theme customization │ └── index.css # Brand colors ├── rspress.config.ts # Rspress configuration ├── package.json # Dependencies └── tsconfig.json # TypeScript config ``` -------------------------------- ### Setup HTMX Type Definitions Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/integrations/type-extensions/htmx.md Create a `src/kita.d.ts` file and add the triple-slash directive to enable HTMX type extensions. ```typescript /// ``` -------------------------------- ### HTML to JSX Conversion Example Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Demonstrates the conversion of a sample HTML structure to JSX format. This is useful for migrating existing HTML to a JSX-compatible structure. ```html

Enter your HTML here

``` ```tsx <> {/* Hello world */}

Enter your HTML here

``` -------------------------------- ### Basic Elysia HTML Setup Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/integrations/frameworks/elysia.mdx Integrate the html plugin and define a route that returns JSX. The plugin automatically sets the correct Content-Type and prepends the doctype. ```typescript import { Elysia } from 'elysia' import { html } from '@elysiajs/html' const app = new Elysia() .use(html()) .get('/', () => (

Hello from Elysia

)) .listen(3000) ``` -------------------------------- ### Repository Structure Source: https://github.com/kitajs/html/blob/next/CLAUDE.md Illustrates the directory layout of the Kita Html monorepo, showing the organization of core packages, plugins, benchmarks, and examples. ```bash kitajs/html/ ├── packages/ │ ├── html/ # Core JSX runtime (@kitajs/html) │ ├── ts-html-plugin/ # XSS detection TypeScript plugin (@kitajs/ts-html-plugin) │ ├── fastify-html-plugin/# Fastify integration (@kitajs/fastify-html-plugin) │ ├── express-html-plugin/# Express integration (@kitajs/express-html-plugin) │ └── docs/ # Documentation site (@kitajs/docs-html) ├── benchmarks/ # Performance benchmarks └── examples/ # Usage examples ``` -------------------------------- ### Kita Component Example Source: https://github.com/kitajs/html/blob/next/packages/docs/plugins/kita/README.md Example of using a Kita component within a code block. The component is defined and then rendered, with its output assigned to the 'html' variable. ```tsx function Card({ title }: { title: string }) { return (

{title}

) } const html = ``` -------------------------------- ### Async Kita Example Source: https://github.com/kitajs/html/blob/next/packages/docs/plugins/kita/README.md Demonstrates how to use an asynchronous function within a Kita code block. The result of the awaited async function is assigned to the 'html' variable. ```tsx async function UserGreeting({ userId }: { userId: string }) { return
User {userId}
} const html = await UserGreeting({ userId: '123' }) ``` -------------------------------- ### Override Hostname for Build Source: https://github.com/kitajs/html/blob/next/packages/docs/README.md Example of overriding the default hostname during the build process using an environment variable. ```bash DOCS_HOSTNAME=docs.example.com pnpm build ``` -------------------------------- ### Basic JSX HTML Generation Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Demonstrates how to use JSX to create simple HTML structures within .tsx files after installing and configuring the package. ```tsx const html = (

Hello, world!

Welcome to the Kita Html package.

) ``` -------------------------------- ### Setup Rspress Config with Kita Plugin Source: https://github.com/kitajs/html/blob/next/packages/docs/plugins/kita/README.md Configure your Rspress project to use the Kita plugin by adding remarkKitaPlugin to your markdown remark plugins. ```typescript import { remarkKitaPlugin } from './plugins/kita/remarkPlugin' export default defineConfig({ markdown: { remarkPlugins: [remarkKitaPlugin] } }) ``` -------------------------------- ### Basic Async Component Example Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/guide/introduction.mdx Illustrates an async component fetching data and rendering it. The component's return type is `Promise`, and it can be used directly within JSX. ```tsx const db = { async getUser(id: string) { return { name: 'Arthur' } } } async function UserCard({ id }: { id: string }) { const user = await db.getUser(id) return
{user.name}
} const html = ``` -------------------------------- ### Verify XSS Detection Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Test your setup by writing code that intentionally triggers an XSS error, confirming the @kitajs/ts-html-plugin is active and correctly configured. ```typescript console.log(
{String.name}
); ``` -------------------------------- ### Base HTML Template with Doctype and Layout Component Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Example of creating a base HTML template using a Layout component, including doctype, head, and body. This approach avoids issues with raw string concatenation for templates. ```tsx export function Layout(props: Html.PropsWithChildren<{ head: string; title?: string }>) { return ( <> {''} {props.title || 'Hello World!'} {props.head} {props.children} ) } const html = ( ' } // Executes malicious code: input =
{user.description}
output = (
) // Does not execute any malicious code: input = (
{user.description}
) output = (
</div><script>getStoredPasswordAndSentToBadGuysServer()</script>
) ``` -------------------------------- ### Run Benchmarks Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Executes performance benchmarks for the project. ```bash pnpm bench ``` -------------------------------- ### JSX Compilation Example Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/guide/introduction.mdx Demonstrates how JSX syntax is compiled into runtime function calls for string concatenation. The `safe` attribute is used for XSS protection. ```tsx import { jsx as __jsx } from '@kitajs/html/jsx-runtime' const username: string = 'Username' export let html: JSX.Element // ---cut--- // What you write html = (

{username}

) // What TypeScript compiles to html = __jsx('div', { class: 'card', children: __jsx('h1', { safe: true, children: username }) }) ``` -------------------------------- ### Format and Build Docs After Changes Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md After editing documentation files, format the code and build the documentation package to verify changes. The build must exit with code 0. ```bash pnpm format pnpm -F @kitajs/docs-html build ``` -------------------------------- ### Benchmark Versions Source: https://github.com/kitajs/html/blob/next/benchmarks/README.md Lists the versions of various libraries used in the benchmarks. Ensure these versions are consistent for accurate comparisons. ```json { "common-tags": "1.8.2", "ghtml": "4.0.2", "hono": "4.12.2", "html-minifier": "4.0.0", "jsxte": "3.3.1", "mitata": "1.0.34", "nano-jsx": "0.2.1", "preact-render-to-string": "6.6.6", "react-dom": "19.2.9" } ``` -------------------------------- ### Integrate Alpine.js with Type Definitions Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Add the Alpine.js type definition reference to your file to get type checking and Intellisense for Alpine.js attributes in your JSX. ```tsx /// const html = ( // Type checking and intellisense for all HTMX attributes
...
) ``` -------------------------------- ### Package Dependencies Source: https://github.com/kitajs/html/blob/next/CLAUDE.md Visualizes the dependency tree for the Kita Html packages, highlighting the core runtime and its adapter packages. ```plaintext @kitajs/html (core) ↑ ├── @kitajs/ts-html-plugin (peer dependency) │ ├── @kitajs/fastify-html-plugin (peer dependency) │ └── @kitajs/express-html-plugin (peer dependency) ``` -------------------------------- ### Build Project with pnpm Source: https://github.com/kitajs/html/blob/next/packages/html/CLAUDE.md Compiles TypeScript code using tsgo. Run this command for production builds. ```bash pnpm build # Compiles TypeScript with tsgo ``` -------------------------------- ### Combine Alpine.js with HTMX Types Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/integrations/type-extensions/alpine.md You can combine multiple type extension directives in the same `src/kita.d.ts` file. This example shows how to include both Alpine.js and HTMX type definitions. ```typescript /// /// ``` -------------------------------- ### String Building Optimizations in @kitajs/html Source: https://github.com/kitajs/html/blob/next/packages/html/CLAUDE.md Demonstrates optimizations for fast string generation, including a regex check before conversion and character-by-character escaping for performance. ```typescript if (!CAMEL_REGEX.test(camel)) { return camel } // Character-by-character escaping (faster than regex replace) for (; end < length; end++) { switch (value[end]) { case '&': escaped += value.slice(start, end) + '&' start = end + 1 continue // ... } } ``` -------------------------------- ### Build Full Workspace Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Builds all packages within the entire workspace, including development-only packages. ```bash pnpm build-all ``` -------------------------------- ### Use Typed Turbo Streams in JSX Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/integrations/type-extensions/hotwire-turbo.md Example of using the typed `` element in JSX for targeted DOM mutations. This snippet appends content to a target element. ```tsx ``` -------------------------------- ### Async and Sync Components in JSX Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Demonstrates how async components return promises while sync components return strings. Use `instanceof Promise` to check for async behavior. ```tsx async function Async() { await callApi() return
Async!
} function Sync() { return
Sync!
} const async = (
) async instanceof Promise const sync: string = (
) typeof sync === 'string' ``` -------------------------------- ### Use Typed Turbo Frames in JSX Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/integrations/type-extensions/hotwire-turbo.md Example of using the typed `` element in JSX for partial page updates. It includes a link and a form within the frame. ```tsx Show all expanded messages in this frame.
Show response from this form within this frame.
 ``` -------------------------------- ### Component Composition for Avoiding Prop Drilling Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Instead of a context API, use component composition and pass props down. This example shows drilling specific properties to child components. ```tsx // Drills only the required properties. app.get('/', (request, response) => ( )) ``` -------------------------------- ### Build Project with TypeScript Source: https://github.com/kitajs/html/blob/next/packages/ts-html-plugin/CLAUDE.md Use this command to compile TypeScript code using tsgo. ```bash pnpm build # Compiles TypeScript with tsgo ``` -------------------------------- ### Build Specific Package Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Builds a single package, identified by its scope and name. Replace `` with the target package. ```bash pnpm -F @kitajs/html build ``` -------------------------------- ### Fastify Integration with Kita HTML Source: https://github.com/kitajs/html/blob/next/skills/kita-html/references/integrations.md Register the `@kitajs/fastify-html-plugin` to use `reply.html(...)` for HTML responses. Auto-doctype is added when the response starts with ``. Use `rid={req.id}` for Suspense. ```tsx import fastify from 'fastify' import fastifyKitaHtml from '@kitajs/fastify-html-plugin' const app = fastify() await app.register(fastifyKitaHtml) app.get('/', (req, reply) => { reply.html(

Hello

) }) ``` -------------------------------- ### Create a Changeset Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Use `pnpm changeset` to create a changeset file for version management after making user-facing changes to a published package. Select affected packages, choose a semver bump, and write a description. Documentation-only changes are ignored. ```bash pnpm changeset ``` -------------------------------- ### HTML Tag Detection with Regex Source: https://github.com/kitajs/html/blob/next/packages/fastify-html-plugin/CLAUDE.md Uses a bound regex test for performance, avoiding new function allocations on each call to check if a string starts with an HTML '' tag. ```typescript const isTagHtml = RegExp.prototype.test.bind(/^\s*
1
2
) ``` -------------------------------- ### Project Directory Structure Source: https://github.com/kitajs/html/blob/next/packages/docs/CLAUDE.md Illustrates the organization of files and directories within the Kita HTML documentation project. ```tree docs/ index.md Homepage _nav.json Top navigation guide/ Learning-oriented content _meta.json Sidebar ordering introduction.md getting-started.md how-jsx-becomes-html.md xss/ XSS protection (solution-first ordering) async/ Async components and Suspense jsx/ JSX syntax and type extensions design-decisions.md reference/ Benchmarks, compatibility, migration integrations/ Framework and library integrations frameworks/ Fastify, Elysia type-extensions/ HTMX, Alpine.js, Hotwire Turbo api/ Handwritten XSS tooling docs generated/ Auto-generated from source via TypeDoc theme/ index.tsx Custom layout index.css Brand styling components/ Hero interactive component ``` -------------------------------- ### TypeScript Diagnostic Creation Source: https://github.com/kitajs/html/blob/next/packages/ts-html-plugin/CLAUDE.md A helper function to create a ts.Diagnostic object. It requires a node, an error code, and a category, and populates the diagnostic with message text, code, file, length, and start position. ```typescript function diagnostic(node, error, category): ts.Diagnostic { return { category: ts.DiagnosticCategory[category], messageText: Errors[error].message, code: Errors[error].code, file: node.getSourceFile(), length: node.getWidth(), start: node.getStart() } } ``` -------------------------------- ### Performance Benchmark Results Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Benchmark results comparing KitaJS/Html with other popular HTML builders across different rendering scenarios. ```text cpu: 13th Gen Intel(R) Core(TM) i5-13600K runtime: node v20.11.0 (x64-linux) benchmark time (avg) (min … max) p75 p99 p999 --------------------------------------------------- • Many Components (31.4kb) --------------------------------------------------- KitaJS/Html 98'860 ns/iter (76'287 ns … 448 µs) 97'481 ns 238 µs 410 µs Typed Html 738 µs/iter (635 µs … 1'398 µs) 779 µs 1'118 µs 1'398 µs React 4'119 µs/iter (3'871 µs … 4'775 µs) 4'210 µs 4'755 µs 4'775 µs Common Tags 2'815 µs/iter (2'565 µs … 3'461 µs) 2'905 µs 3'414 µs 3'461 µs Ghtml 753 µs/iter (654 µs … 1'358 µs) 773 µs 1'080 µs 1'358 µs summary for Many Components (31.4kb) KitaJS/Html 7.46x faster than Typed Html 7.61x faster than Ghtml 28.47x faster than Common Tags 41.66x faster than React • Many Props (7.4kb) --------------------------------------------------- KitaJS/Html 18'628 ns/iter (15'527 ns … 515 µs) 16'945 ns 60'084 ns 218 µs Typed Html 76'473 ns/iter (65'986 ns … 509 µs) 70'509 ns 225 µs 379 µs React 71'436 ns/iter (56'823 ns … 805 µs) 65'783 ns 272 µs 482 µs Common Tags 43'080 ns/iter (36'634 ns … 594 µs) 39'846 ns 125 µs 357 µs Ghtml 42'271 ns/iter (37'753 ns … 511 µs) 39'867 ns 101 µs 319 µs summary for Many Props (7.4kb) KitaJS/Html 2.27x faster than Ghtml 2.31x faster than Common Tags 3.83x faster than React 4.11x faster than Typed Html • MdnHomepage (66.7Kb) --------------------------------------------------- KitaJS/Html 14'981 µs/iter (10'529 µs … 33'066 µs) 15'980 µs 33'066 µs 33'066 µs Typed Html 28'667 µs/iter (25'501 µs … 36'842 µs) 30'385 µs 36'842 µs 36'842 µs React 94'917 µs/iter (85'455 µs … 108 ms) 105 ms 108 ms 108 ms Common Tags 39'634 µs/iter (37'625 µs … 40'880 µs) 40'517 µs 40'880 µs 40'880 µs Ghtml 37'052 µs/iter (33'344 µs … 41'569 µs) 39'852 µs 41'569 µs 41'569 µs summary for MdnHomepage (66.7Kb) KitaJS/Html 1.91x faster than Typed Html 2.47x faster than Ghtml 2.65x faster than Common Tags 6.34x faster than React ``` -------------------------------- ### Basic Suspense Usage with renderToStream Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/guide/async/using-suspense.md Wrap async components in Suspense with a rid and fallback. Pass the resulting tree to renderToStream to get a Readable stream. The rid is automatically provided to the renderToStream callback. ```tsx import { jsx as __jsx } from '@kitajs/html/jsx-runtime' import { Suspense, renderToStream } from '@kitajs/html/suspense' let api = { async getStats(id: string): Promise<{ totalPosts: number }> { return { totalPosts: Number(id) } } } async function UserStats({ id }: { id: string }) { const stats = await api.getStats(id) return
{stats.totalPosts} posts
} const stream = renderToStream((rid) => (

Dashboard

Loading stats...}> )) ``` ```tsx import { text } from 'node:stream/consumers' // As a stream stream.pipe(response) // Or consume entirely (loses streaming benefits, useful for testing) const html = await text(stream) ``` -------------------------------- ### Export Patterns Source: https://github.com/kitajs/html/blob/next/packages/fastify-html-plugin/CLAUDE.md Demonstrates various ways to export and import the plugin for compatibility. ```typescript // Named export export const fastifyKitaHtml = Object.assign(plugin_, { kAutoDoctype }) // Default export export default fastifyKitaHtml // Usage examples: // const fastifyKitaHtml = require('@kitajs/fastify-html-plugin') // const { fastifyKitaHtml } = require('@kitajs/fastify-html-plugin') // import fastifyKitaHtml from '@kitajs/fastify-html-plugin' // import { fastifyKitaHtml } from '@kitajs/fastify-html-plugin' ``` -------------------------------- ### Build Published Packages Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Builds all packages intended for publication under the `packages/` directory. ```bash pnpm build ``` -------------------------------- ### Conditional Rendering with Mixed Types Source: https://github.com/kitajs/html/blob/next/packages/docs/docs/guide/xss/safe-attribute.md This example demonstrates a conditional rendering scenario where a union type (string | number) is used. The XSS tooling flags this as unsafe because the string branch may contain dynamic, unescaped HTML. ```tsx // @errors: 88601 const condition = true const safeValue = 42 const unsafeString = 'user input' ;
{condition ? safeValue : unsafeString}
``` -------------------------------- ### Run All Tests Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Executes all tests across the workspace using Turbo. ```bash pnpm test ``` -------------------------------- ### Express Integration with Kita HTML Source: https://github.com/kitajs/html/blob/next/skills/kita-html/references/integrations.md Install `@kitajs/express-html-plugin` and `express`. Register `app.use(expressKitaHtml())` before routes to use `res.html(...)`. Use `rid={req.id}` for Suspense. Set `disableRequestId: true` if another middleware handles request IDs. ```tsx import express from 'express' import { expressKitaHtml } from '@kitajs/express-html-plugin' const app = express() app.use(expressKitaHtml()) app.get('/', (req, res) => { res.html(

Hello

) }) ``` -------------------------------- ### Benchmark Results Overview Source: https://github.com/kitajs/html/blob/next/benchmarks/README.md Displays benchmark results including CPU, runtime, and performance metrics for different HTML templating libraries. Note that '!' indicates JSX runtimes producing different output than React, and '*' indicates template engines. ```text clk: ~4.80 GHz cpu: 13th Gen Intel(R) Core(TM) i5-13600K runtime: node 24.13.0 (x64-linux) benchmark avg (min … max) p75 / p99 (min … top 1%) ------------------------------------------- ------------------------------- KitaJs 170.5 KiB 361.79 µs/iter 358.24 µs █ (302.91 µs … 1.13 ms) 866.76 µs ██ ( 1.27 mb … 2.53 mb) 1.83 mb ███▅▃▂▂▂▁▁▁▁▁▁▁▁▁▁▁▁▁ ! TypedHtml 173.5 KiB 2.11 ms/iter 2.24 ms ▅█ ▄ (1.78 ms … 3.47 ms) 2.97 ms ████▃ ( 6.24 mb … 8.48 mb) 7.13 mb ████████▅▅▆▆▅▄▃▃▃▄▁▂▁ ! vHtml 170.5 KiB 2.06 ms/iter 2.18 ms █▂ (1.79 ms … 3.24 ms) 3.19 ms ███▅▂ ( 2.31 mb … 4.63 mb) 3.54 mb █████▇▇▇▅▂▂▃▂▁▁▂▂▁▂▂▁ ReactJsx 170.5 KiB 1.01 ms/iter 1.08 ms █ (822.95 µs … 2.33 ms) 1.92 ms ▂█▂ ( 1.31 mb … 4.67 mb) 3.30 mb ███▆▆▆▅▃▂▂▂▁▁▁▁▁▁▂▂▁▁▁ Preact 170.5 KiB 806.05 µs/iter 845.81 µs █ (603.80 µs … 4.66 ms) 3.13 ms █▃▂ ( 2.32 mb … 4.42 mb) 3.09 mb ███▃▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ React 170.5 KiB 1.04 ms/iter 1.03 ms █ (919.83 µs … 2.15 ms) 1.86 ms ▃█▂ ( 2.14 mb … 5.16 mb) 3.68 mb ███▅▃▂▂▂▂▁▁▁▁▁▁▁▁▂▁▁▁ ! Jsxte 170.6 KiB 3.95 ms/iter 4.19 ms █ (3.59 ms … 5.20 ms) 4.89 ms ██▃▄▂ ( 13.36 mb … 17.30 mb) 13.94 mb ██████▄▂▄▂▃▅▆▇▅▂▄▁▂▂▂ HonoJsx 170.5 KiB 1.05 ms/iter 1.07 ms ▅█ (872.65 µs … 2.60 ms) 1.95 ms ██▂ ( 2.46 mb … 6.24 mb) 3.14 mb ████▅▄▄▃▂▂▁▂▁▁▂▂▁▂▁▁▁ * CommonTags 211.3 KiB 3.58 ms/iter 3.60 ms █ (3.18 ms … 5.39 ms) 5.17 ms █▅ ( 5.55 mb … 7.45 mb) 6.30 mb ▆██▇▆▄▃▂▂▃▂▁▁▂▂▂▁▂▂▁▂ * Ghtml 204.5 KiB 230.79 µs/iter 216.96 µs █ (188.45 µs … 3.27 ms) 440.05 µs █▅ (169.75 kb … 1.38 mb) 649.87 kb ▂██▅▃▂▂▁▁▁▁▁▁▁▁▁▁▁▁▁ * HonoHtml 204.5 KiB 118.12 µs/iter 113.55 µs █ (103.38 µs … 645.95 µs) 360.09 µs █ ( 40.68 kb … 1.11 mb) 549.60 kb █▆▅▂▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁▁ ┌ ┐ ┬ ╷ KitaJs 170.5 KiB │────┤ ┴ ╵ ╷┌─┬┐ ╷ ! TypedHtml 173.5 KiB ├┤ │├─────┤ ╵└─┴┘ ╵ ╷┌┬┐ ╷ ! vHtml 170.5 KiB ├┤│├────────┤ ╵└┴┘ ╵ ╷┌┬┐ ╷ ReactJsx 170.5 KiB ├┤│├──────┤ ╵└┴┘ ╵ ╷┌┬┐ ╷ Preact 170.5 KiB ├┤│├───────────────────┤ ╵└┴┘ ╵ ╷┬ ╷ React 170.5 KiB ├│───────┤ ╵┴ ╵ ╷┌─┬─┐ ╷ ! Jsxte 170.6 KiB ├┤ │ ├─────┤ ╵└─┴─┘ ╵ ┌┬┐ ╷ HonoJsx 170.5 KiB ││├──────┤ └┴┘ ╵ ╷┌──┬ ╷ * CommonTags 211.3 KiB ├┤ │─────────────┤ ╵└──┴ ╵ ┬ ╷ * Ghtml 204.5 KiB │─┤ ┴ ╵ ┬ ╷ * HonoHtml 204.5 KiB │─┤ ┴ ╵ └ ┘ 103.38 µs 2.64 ms 5.17 ms Sizes are the final html output based on the same input. !) Are jsx runtimes that produces different output from React for the same input ⚠️ *) Are template engines, which usually lacks syntax highlighting and intellisense: https://github.com/kitajs/html/blob/master/benchmarks/templates/normal.tsx ``` -------------------------------- ### Using Suspense with renderToStream Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Illustrates how to use the `Suspense` component with `renderToStream` to render a fallback UI while waiting for async components. The `rid` is crucial for concurrent requests. ```tsx import { Suspense, renderToStream } from '@kitajs/html/suspense' async function MyAsyncComponent() { const data = await database.query() return } function renderUserPage(rid: number) { return ( Loading username...} catch={(err) =>
Error: {err.stack}
} > ) } // Html is a string readable stream that can be piped to the client const html = renderToStream(renderUserPage) ``` -------------------------------- ### Configure CI/CD Scripts Source: https://github.com/kitajs/html/blob/next/packages/ts-html-plugin/CLAUDE.md Define the test script in package.json to include xss-scan and vitest for CI/CD pipelines. ```json // package.json { "scripts": { "test": "xss-scan && vitest" } } ``` -------------------------------- ### Run Tests with pnpm Source: https://github.com/kitajs/html/blob/next/packages/html/CLAUDE.md Executes tests using Vitest, including coverage and type checking. Ensure code quality and correctness. ```bash pnpm test # Runs vitest with coverage and type checking ``` -------------------------------- ### Test Specific Package Source: https://github.com/kitajs/html/blob/next/CONTRIBUTING.md Runs tests for a single package. Replace `` with the target package. ```bash pnpm -F @kitajs/html test ``` -------------------------------- ### Pretty Printing HTML Output Source: https://github.com/kitajs/html/blob/next/packages/html/README.md Shows how to use an external library like 'html-prettify' to format the compact HTML string output by the package into a more human-readable, pretty-printed format. The default output is a compact string. ```tsx import prettify from 'html-prettify' const html = (
1
2
) console.log(html) //
1
2
console.log(prettify(html)) //
//
1
//
2
//
```