JSX renderer

kubb/jsx is Kubb's JSX-based renderer, an alternative to building files with the ast.factory node builders from kubb/kit. It provides a JSX runtime and a set of built-in components so a generator can emit files and markdown through JSX instead of composing AST nodes by hand.

Setup

Point your tsconfig.json at the kubb/jsx runtime so JSX syntax compiles against its components instead of React's:

tsconfig.json

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "kubb/jsx"
  }
}

With that in place, .tsx files in the plugin resolve jsx-runtime and jsx-dev-runtime from kubb/jsx automatically.

jsxRenderer()

jsxRenderer creates a renderer instance with three members: render, files, and stream. Call render with a JSX element, then read the generated files back off files.

render.tsx

import { jsxRenderer } from 'kubb/jsx'
import { File, Function, Type } from 'kubb/jsx'

const renderer = jsxRenderer()

await renderer.render(
  <File baseName="petStore.ts" path="src/gen/petStore.ts">
    <File.Source>
      <Type name="Pet">{'{ id: number; name: string }'}</Type>
      <Function name="getPet" async>
        {"return fetch('/pets')"}
      </Function>
    </File.Source>
  </File>,
)

const files = renderer.files

Use stream(element) instead of render when you want files as they are produced rather than buffered into one array. stream yields each FileNode in turn, which suits large trees or a plugin that wants to react to files as they land.

Built-in components

Component	Description
File	Declares a generated output file, with its path and optional imports and exports
File.Source	The source content block nested inside a File
Function	Generates a TypeScript function declaration
Type	Generates a TypeScript type alias
Const	Generates a const variable declaration
Jsx	Renders JSX expressions inside the generated output
Callout	Generates a callout block in markdown output
Frontmatter	Generates a frontmatter block in markdown output
Heading	Generates a heading in markdown output
List	Generates a list in markdown output
Paragraph	Generates a paragraph in markdown output

Callout, Frontmatter, Heading, List, and Paragraph target markdown output. The rest emit TypeScript.

Types

KubbReactNode is the JSX node type this renderer accepts. Use it to type a component's children or a helper that returns JSX. Each component's props type follows the Kubb<Component>Props convention, for example KubbFileProps for File and KubbTypeProps for Type.

Package

kubb/jsx re-exports @kubb/renderer-jsx. The underlying package stays directly installable and importable for projects that prefer not to depend on the kubb meta-package.

See also

• Kit API for defineGenerator's renderer field and the ast.factory alternative to JSX
• Creating plugins for how a generator wires a renderer into its output
• Core API for the engine-level jsxRenderer mention