Getting Started

The fastest way to experiment with Hydroxide is the interactive playground. Write code and see the compiled output in real-time. No setup required.

Open Playground

Write Hydroxide code and see it compile in real-time

Create a Project

Hydroxide uses a compiler that integrates with Vite. Start by creating a new Vite project, then add Hydroxide.

1. Create a Vite Project

npm create vite@latest my-hydroxide-app
cd my-hydroxide-app

pnpm create vite my-hydroxide-app
cd my-hydroxide-app

yarn create vite my-hydroxide-app
cd my-hydroxide-app

bun create vite my-hydroxide-app
cd my-hydroxide-app

When prompted, select Vanilla and JavaScript (or TypeScript).

2. Install Hydroxide

npm install hydroxide hydroxide-dom vite-plugin-hydroxide

pnpm add hydroxide hydroxide-dom vite-plugin-hydroxide

yarn add hydroxide hydroxide-dom vite-plugin-hydroxide

bun add hydroxide hydroxide-dom vite-plugin-hydroxide

3. Configure Vite

Add the Hydroxide plugin to your Vite configuration:

vite.config.js

import { defineConfig } from 'vite'
import hydroxide from 'vite-plugin-hydroxide'

export default defineConfig({
  plugins: [hydroxide()]
})

4. Create Root Component

Create the root component:

src/App.jsx

import { reactive } from 'hydroxide'

export function App() {
  const count = reactive(0)

  return <button on-click={() => count.do(v => v + 1)}>Count: {count()}</button>
}

5. Render Root Component

Update the entry file to render your app:

src/main.jsx

import { render } from 'hydroxide-dom'
import { App } from './App'

render(App, document.getElementById('app'))

Make sure your index.html has a container element:

index.html

<div id="app"></div>

6. Start the Dev Server

npm run dev

pnpm dev

yarn dev

bun run dev

Your Hydroxide app is now running! Open the URL shown in your terminal.