Menú
Configure and use JSX with Vani while keeping runtime behavior explicit
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Create a tiny global store with explicit subscriptions
Updates Vani SPA app UI in src/spa-app, especially the landing page/homepage and landing examples. Use when the user mentions Vani SPA app, src/spa-app, landing page/homepage, or landing examples.
Mount Vani components inside existing apps or DOM islands
Build scalable lists with keyed rows and per-item updates
Schedule explicit updates with microtasks and transitions
Create a minimal Vani SPA root with explicit updates
| name | vani-jsx-setup |
| description | Configure and use JSX with Vani while keeping runtime behavior explicit |
Instructions for enabling JSX with Vani and creating JSX-based components.
Use this when a project wants .tsx files with Vani or needs a JSX example.
tsconfig.json sets jsx to react-jsx and jsxImportSource to @vanijs/vani..tsx component using component and return JSX.handle.update() on events.renderToDOM as usual.tsconfig.json)Counter)app)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.
Example output:
Updated: tsconfig.json
Created: src/counter.tsx
Notes: JSX uses @vanijs/vani as jsxImportSource.
Explain the JSX settings, highlight where explicit updates happen, and list the files changed.