@hypen-space/cli

Command-line interface for creating and managing Hypen applications.

Installation

bun add -g @hypen-space/cli

Or use directly with bunx:

bunx @hypen-space/cli init my-app

Commands

hypen init [name]

Create a new Hypen project.

# With project name
hypen init my-app

hypen dev

Start the development server with hot reload.

hypen dev

This will:

• Discover all components in src/components/
• Generate components.generated.ts
• Start a server at http://localhost:3000
• Watch for file changes and hot reload

Options:

• --port <number> - Server port (default: 3000)
• --debug - Enable debug logging

hypen build

Build for production.

hypen build

Options:

• --outDir <path> - Output directory (default: dist)
• --minify - Enable minification
• --sourcemap - Generate source maps

hypen generate

Generate component imports from discovered components.

hypen generate

hypen studio

Open the Hypen Studio IDE — a local development environment with file browser, code editor, live preview, state inspector, and time-travel debugging.

Note: Requires the Bun runtime.

hypen studio

Options:

• --port <number> - Studio server port (default: 5173)
• --open - Open browser automatically (default: true)
• --session <id> - Load a teleported session from hypen.space

Project Structure

After running hypen init, your project will have this structure:

my-app/
├── hypen.config.ts         # Hypen configuration
├── package.json
├── tsconfig.json
└── src/
    └── components/
        └── App/
            ├── component.ts    # Component logic/state
            └── component.hypen # Component UI

hypen.config.ts

Configuration file for your Hypen project:

export default {
  components: "./src/components",
  entry: "App",
  port: 3000,
  outDir: "dist",
};

Component Structure

Each component lives in its own directory with two files:

component.ts - State and logic:

import { app } from "@hypen-space/core";

type AppState = {
  count: number;
};

export default app
  .defineState<AppState>({ count: 0 })
  .onAction("increment", ({ state }) => {
    state.count++;
  })
  .onAction("decrement", ({ state }) => {
    state.count--;
  })
  .build();

component.hypen - UI declaration:

module App {
  Column {
    Text("Count: ${state.count}")

    Row {
      Button {
        Text("-")
      }
      .onClick("@actions.decrement")

      Button {
        Text("+")
      }
      .onClick("@actions.increment")
    }
  }
}

Development

# Install dependencies
bun install

# Run CLI locally
bun bin/hypen.ts init test-project
bun bin/hypen.ts dev --port 3001

License

MIT