@aerys/aerysx

AerysX — React components, written in Aerys. Drop .aerx files anywhere in a React + Vite project and they compile to standard JSX at build time. Every React library keeps working: Tailwind, React Query, Framer Motion, shadcn, Zustand — all of it.

// src/Counter.aerx
fn Counter() {
    let count = signal(0)
    return <div class="card">
        <h1>Clicks: @{count:get()}</h1>
        <button onClick={fn() { count:set(count:get() + 1) }}>+1</button>
    </div>
}

Install

npm install -D @aerys/aerysx

Wire it up

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { aerysxPlugin } from '@aerys/aerysx';

export default defineConfig({
    plugins: [aerysxPlugin(), react()],
});

That's the whole setup. Import .aerx files just like .jsx:

// src/main.jsx
import { createRoot } from 'react-dom/client';
import Counter from './Counter.aerx';

createRoot(document.getElementById('root')).render(<Counter />);

What the transform does

| Aerys | Compiles to | React equivalent | |---|---|---| | let x = signal(0) | const [x, setX] = useState(0) | useState | | x:get() / x:set(v) | x / setX(v) | — | | computed([x], fn() { ... }) | useMemo(() => ..., [x]) | useMemo | | effect([x], fn() { ... }) | useEffect(() => ..., [x]) | useEffect | | class="..." | className="..." | — | | and / or / not / nil | && / \|\| / ! / null | — | | fn() { ... } | () => { ... } | arrow fns | | @{expr} | ${expr} | template interpolation |

.aerx is a superset of JSX — anything you can do in JSX you can do in .aerx, plus the Aerys conveniences above.

Options

aerysxPlugin({
    // Which extensions to intercept. Default: ['.aerx']
    include: ['.aerx'],
});

Compatibility

• Vite 5, 6, 7
• React 18 and 19
• Works with @vitejs/plugin-react, @vitejs/plugin-react-swc, and any JSX-aware downstream plugin. Must be placed before the React plugin.

Related

• @aerys/lang — the Aerys runtime (WASM). Use it to execute .aer scripts in the browser — playgrounds, tutorials, sandboxed eval. Not needed for .aerx components.

License

Proprietary — see LICENSE. Free for personal and commercial use, no attribution required. Source is not distributed and may not be redistributed, modified, or republished. The names "Aerys" and "AerysX" are trademarks of the copyright holder.