Hypen CLI

The Hypen CLI (@hypen-space/cli) is the recommended way to create, develop, and build Hypen applications.

Installation

# Using Bun (recommended)
bun install -g @hypen-space/cli

# Using npm
npm install -g @hypen-space/cli

Commands

hypen init

Create a new Hypen project.

hypen init my-app

Options:

• --template <name> - Use a specific template (default: starter)

This creates a new directory with:

• Project structure with src/components/
• TypeScript configuration
• A starter component
• Development dependencies

hypen dev

Start the development server with hot reload.

cd my-app
hypen dev

Options:

• --port <number> - Port to run on (default: 3000)
• --host - Expose to network

The dev server:

• Watches for file changes
• Hot reloads components
• Shows compilation errors in the browser

hypen build

Build the application for production.

hypen build

Options:

• --outdir <path> - Output directory (default: dist)

Outputs optimized assets ready for deployment.

Project Structure

The CLI expects this structure:

my-app/
├── src/
│   ├── components/
│   │   └── App/
│   │       ├── component.hypen    # UI template
│   │       └── component.ts       # Module logic
│   └── main.ts                    # Entry point
├── public/
│   └── index.html
├── package.json
└── tsconfig.json

Component Discovery

The CLI automatically discovers components in src/components/. Each component folder should contain:

• component.hypen - The UI template
• component.ts - The module (optional, for stateful components)

Components are named by their folder name (e.g., Counter/ becomes the Counter component).

Configuration

Create a hypen.config.ts in your project root for custom configuration:

import { defineConfig } from "@hypen-space/cli";

export default defineConfig({
  // Source directory
  srcDir: "src",

  // Output directory for builds
  outDir: "dist",

  // Dev server options
  server: {
    port: 3000,
    host: false,
  },
});

Troubleshooting

Port already in use

hypen dev --port 3001

Clear cache

rm -rf node_modules/.hypen
hypen dev

See Also

• Installation Guide
• Your First App
• Language Server (LSP)