Installation
New project (recommended)
bash
npm create flexium@latest my-app
cd my-app
npm install
npm run devYou get a working Vite + Flexium project with HMR, TypeScript, and the recommended vite-plugin-flexium config.
Add to existing project
bash
npm install flexium
npm install -D vite-plugin-flexiumUpdate vite.config.ts:
ts
import { defineConfig } from 'vite'
import flexium from 'vite-plugin-flexium'
export default defineConfig({
plugins: [
flexium({ optimize: 'auto' })
]
})Update tsconfig.json:
jsonc
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "flexium"
}
}That's it — JSX now compiles via flexium's runtime and vite-plugin-flexium applies compile-time optimizations.
Mount the app
tsx
// src/main.tsx
import { render } from 'flexium/dom'
import App from './App'
render(<App />, document.getElementById('app')!)html
<!-- index.html -->
<!DOCTYPE html>
<html>
<head><title>My app</title></head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>Requirements
- Node 18+ (Node 22+ recommended for the fastest builds)
- TypeScript 5+
- Vite 5+ or any bundler with JSX support
Ecosystem packages
Install when needed:
bash
# Canvas rendering
npm install flexium-canvas
# Layout primitives
npm install flexium-ui
# ESLint rules for signal correctness
npm install -D eslint-plugin-flexiumNext
→ Signals — the core concept.