# Installation
VoltX.js can be installed via CDN or package manager. Choose the method that best fits your project setup.
## CDN (unpkg)
The simplest way to get started is loading VoltX.js directly from a CDN. This approach requires no build tools and works immediately in any HTML file.
### ES Modules
Use the module build for modern browsers with ES module support:
```html
```
You can optionally pin to a specific version:
```html
```
## CLI (⚠️ Unreleased as of v0.5.0)
The fastest way to create a new VoltX.js project is with the CLI:
```bash
pnpm create voltx my-app
cd my-app
pnpm install
pnpm dev
```
This scaffolds a complete project with development server, build tools, and framework assets. See the [CLI Guide](./cli) for all available commands and templates.
## Package Manager
For applications using node based tools, install VoltX.js via npm or JSR:
### npm
```bash
npm install voltx.js
```
```bash
pnpm add voltx.js
```
### JSR (Deno, Node.js, Bun)
```bash
npx jsr add @voltx/core
```
```bash
deno add jsr:@voltx/core
```
### Module Imports
Import only the functions you need to minimize bundle size:
```js
// npm
import { charge, registerPlugin } from 'voltx.js';
// JSR
import { charge, registerPlugin } from '@voltx/core';
registerPlugin('persist', persistPlugin);
charge();
```
The framework uses tree-shaking to eliminate unused code when bundled with modern build tools like Vite, Rollup, or Webpack.
## TypeScript
VoltX.js is written in TypeScript and includes complete type definitions.
TypeScript users get automatic type inference for:
- Signal values and methods
- Computed dependencies
- Plugin contexts
- Scope objects passed to `mount()`
## Basic Setup
### Declarative Mode (Recommended)
For applications that can be built entirely in HTML, use the declarative approach with `charge()`:
```html
VoltX.js App
0
```
The `charge()` function auto-discovers all elements with the `data-volt` attribute and mounts them with their declared state.
### Programmatic Mode
For applications requiring initialization logic, use the programmatic API with `mount()`:
```html
```
This approach gives you full control over signal creation, initialization, and the scope object.
## Server-Side Rendering
For SSR applications, use the `hydrate()` function instead of `charge()` to preserve server-rendered HTML and attach interactivity:
```html
```
See the [Server-Side Rendering guide](./usage/ssr) for complete hydration patterns and lifecycle coordination tips.
## Plugin Setup
VoltX.js includes several built-in plugins that must be registered before use:
```html
```
Register plugins before calling `charge()`, `mount()`, or `hydrate()` to ensure they're available for binding resolution.
## Browser Compatibility
VoltX.js requires modern browsers with support for:
- ES2020 syntax (optional chaining, nullish coalescing)
- ES modules
- Proxy objects
- CSS custom properties
**Minimum versions:**
- Chrome 90+
- Firefox 88+
- Safari 14+
- Edge 90+
## Next Up
- Read the [Framework Overview](./overview) to understand core concepts
- Learn about [State Management](./usage/state) with signals and computed values
- Explore available [Bindings](./usage/bindings) for DOM manipulation
- Check out [Expression Evaluation](./usage/expressions) for template syntax