Vani JSX Setup

Instructions for enabling JSX with Vani and creating JSX-based components.

When to Use

Use this when a project wants .tsx files with Vani or needs a JSX example.

Steps

1. Ensure tsconfig.json sets jsx to react-jsx and jsxImportSource to @vanijs/vani.
2. Create a .tsx component using component and return JSX.
3. Keep state in local variables and call handle.update() on events.
4. Mount with renderToDOM as usual.

Arguments

• tsconfigPath – path to TypeScript config (defaults to tsconfig.json)
• componentName – name of the JSX component (defaults to Counter)
• mountSelector – id for the root element (defaults to app)

Examples

Example 1 usage pattern:

Configure JSX and create a <button> counter that calls handle.update() on click.

Example 2 usage pattern:

Mix JSX components inside JS-first components using @vanijs/vani/html helpers.

Output

Example output:

Updated: tsconfig.json
Created: src/counter.tsx
Notes: JSX uses @vanijs/vani as jsxImportSource.

Present Results to User

Explain the JSX settings, highlight where explicit updates happen, and list the files changed.