القائمة
Configure and use JSX with Vani while keeping runtime behavior explicit
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف 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.