Getting Started

    Estimated reading time: 2 minutes

    Install @kitajs/html and @kitajs/ts-html-plugin together. The first is the JSX runtime; the second provides editor diagnostics and the xss-scan CLI for catching XSS at compile time.

    npm
    yarn
    pnpm
    bun
    npm i @kitajs/html@next @kitajs/ts-html-plugin@next

    TypeScript configuration

    Add the following to your tsconfig.json. The jsx and jsxImportSource fields tell TypeScript to compile JSX using the Kita Html runtime. The plugins entry activates the XSS detection plugin in your editor.

    tsconfig.json
    {
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@kitajs/html",
    "plugins": [{ "name": "@kitajs/ts-html-plugin" }]
  }
}

    If your editor uses a globally installed TypeScript version instead of the project's local copy, the plugin will not load. In VS Code, configure the workspace to use the local TypeScript:

    .vscode/settings.json
    {
  "typescript.tsdk": "node_modules/typescript/lib",
  "typescript.enablePromptUseWorkspaceTsdk": true
}

    XSS scanner

    Add xss-scan to your test script so it runs in CI alongside your tests. The CLI performs the same XSS analysis as the editor plugin, but against your entire codebase.

    package.json
    {
  "scripts": {
    "test": "xss-scan && vitest"
  }
}

    Verification

    Write the following in a .tsx file:

    var console: Console
    The console module provides a simple debugging console that is similar to the
JavaScript console mechanism provided by web browsers.
    

    The module exports two specific components:
    

      

    • A Console class with methods such as console.log(), console.error() and console.warn() that can be used to write to any Node.js stream.
      • 

    • A global console instance configured to write to process.stdout and
process.stderr. The global console can be used without importing the node:console module.
      • 

    

    Warning: The global console object's methods are neither consistently
synchronous like the browser APIs they resemble, nor are they consistently
asynchronous like all other Node.js streams. See the note on process I/O for
more information.
    

    Example using the global console:
    

    console.log('hello world');
// Prints: hello world, to stdout
console.log('hello %s', 'world');
// Prints: hello world, to stdout
console.error(new Error('Whoops, something bad happened'));
// Prints error message and stack trace to stderr:
//   Error: Whoops, something bad happened
//     at [eval]:5:15
//     at Script.runInThisContext (node:vm:132:18)
//     at Object.runInThisContext (node:vm:309:38)
//     at node:internal/process/execution:77:19
//     at [eval]-wrapper:6:22
//     at evalScript (node:internal/process/execution:76:60)
//     at node:internal/main/eval_string:23:3

const name = 'Will Robinson';
console.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to stderr
    

    Example using the Console class:
    

    const out = getStreamSomehow();
const err = getStreamSomehow();
const myConsole = new console.Console(out, err);

myConsole.log('hello world');
// Prints: hello world, to out
myConsole.log('hello %s', 'world');
// Prints: hello world, to out
myConsole.error(new Error('Whoops, something bad happened'));
// Prints: [Error: Whoops, something bad happened], to err

const name = 'Will Robinson';
myConsole.warn(`Danger ${name}! Danger!`);
// Prints: Danger Will Robinson! Danger!, to err
    @seesource
    console    .
    Console.log(message?: any, ...optionalParams: any[]): void (+1 overload)
    Prints to stdout with newline. Multiple arguments can be passed, with the
first used as the primary message and all additional used as substitution
values similar to printf(3)
(the arguments are all passed to util.format()).
    

    const count = 5;
console.log('count: %d', count);
// Prints: count: 5, to stdout
console.log('count:', count);
// Prints: count: 5, to stdout
    

    See util.format() for more information.
    @sincev0 .1.100
    log    (<
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div    >{String.name}</
    JSX.IntrinsicElements.div: JSX.HtmlTag
    div    >)
    Content may introduce an XSS vulnerability and must be marked with the `safe` attribute.
See https://html.kitajs.org/TS88601

    Your editor should show an XSS error on String.name, because its type is string and it is not escaped. If you see the error, the plugin is working. Run xss-scan from the terminal to confirm the CLI catches the same issue.

    If no error appears, verify that your editor is using the workspace TypeScript version and that the plugins array is present in the tsconfig.json that covers the file.