#Getting started

Install @kitajs/html and @kitajs/html-cli together, with TypeScript 7.1 or later. The first is the JSX runtime; the second provides kita-html check, which catches XSS at compile time.

npm i @kitajs/html@next && npm i -D @kitajs/html-cli@next typescript@next

yarn add @kitajs/html@next && yarn add -D @kitajs/html-cli@next typescript@next

pnpm add @kitajs/html@next && pnpm add -D @kitajs/html-cli@next typescript@next

bun add @kitajs/html@next && bun add -d @kitajs/html-cli@next typescript@next

TypeScript 7.1 is published under the next tag until its stable release. Projects that cannot leave TypeScript 6 yet can use the deprecated editor plugin and xss-scan instead of @kitajs/html-cli.

#TypeScript configuration

Add the following to your tsconfig.json. The jsx and jsxImportSource fields tell TypeScript to compile JSX using the Kita Html runtime.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@kitajs/html"
  }
}

#XSS scanner

Add kita-html check to your test script so it runs in CI alongside your tests. It type checks every TSX file of the project and fails on any unsafe JSX.

{
  "scripts": {
    "test": "kita-html check && vitest"
  }
}

TypeScript 7 does not load editor plugins, so findings appear in the terminal and CI. kita-html check shows how to annotate GitHub pull requests and list findings in the VS Code Problems panel.

#Verification

Write the following in a .tsx file:

const 
const html: JSX.Elementhtml = <
JSX.IntrinsicElements.div: JSX.HtmlTagdiv>{String.name}</
JSX.IntrinsicElements.div: JSX.HtmlTagdiv>
Content may introduce an XSS vulnerability and must be marked with the `safe` attribute.
See https://html.kitajs.org/TS88601

<div>String</div>

Run npx kita-html check. It reports TS88601 on String.name, because its type is string and it is not escaped. If no error appears, verify that the file is included by the tsconfig.json in the current directory, or pass the right config with -p.