helios init

Initialize a new Helios project configuration

The init command creates a new Helios project or adds Helios configuration to an existing project.

Usage

helios init [target] [options]

Arguments

target · string

Target directory for the project. If omitted, uses the current directory.

Options

--yes · boolean · default: "false"

Skip prompts and use defaults (React framework). Useful for automated workflows.

--framework · string

Specify framework without prompts. Valid values: react, vue, svelte, solid, vanilla.

--example · string

Initialize from an example project. Downloads and sets up a complete example.

--repo · string · default: "BintzGavin/helios/examples"

Example repository to download from. Format: user/repo or user/repo/path.

Interactive mode

When run without flags, helios init presents an interactive setup:

1. Choose between scaffolding a new project or downloading an example
2. Select your framework (React, Vue, Svelte, Solid, or Vanilla)
3. Configure component and library directories

helios init

How do you want to start?
❯ Scaffold a new project (from template)
  Download an example

Which framework are you using?
❯ React
  Vue
  Svelte
  Solid
  Vanilla

Where would you like to install components? (src/components/helios)
Where is your lib directory? (src/lib)

Examples

Create a new React project

helios init my-video-app
cd my-video-app
npm install
npm run dev

Quick start with defaults

helios init my-project --yes

This creates a React project with default settings:

• Framework: React
• Components directory: src/components/helios
• Lib directory: src/lib

Specify a framework

helios init --framework vue

Initialize from an example

helios init --example basic-animation

This downloads the basic-animation example from the default repository.

Use a custom example repository

helios init --example my-template --repo myorg/helios-templates

Add Helios to an existing project

cd existing-project
helios init

If a package.json exists, Helios will detect the framework and only create the configuration file.

Configuration file

The command creates helios.config.json:

{
  "version": "1.0.0",
  "framework": "react",
  "directories": {
    "components": "src/components/helios",
    "lib": "src/lib"
  },
  "components": [],
  "dependencies": {}
}

Configuration options

version · string

Configuration schema version. Currently 1.0.0.

framework · string

Project framework: react, vue, svelte, solid, or vanilla.

directories.components · string

Path where Helios components will be installed.

directories.lib · string

Path to the lib/utils directory.

components · array

List of installed component names.

dependencies · object

Component dependencies and their versions.

registry · string

Custom component registry URL.

Project templates

Each framework template includes:

• package.json with required dependencies
• composition.html entry point
• vite.config.js build configuration
• index.html development server entry
• Framework-specific component examples
• TypeScript configuration

Template structure

my-project/
├── src/
│   ├── components/
│   │   └── helios/          # Helios components
│   ├── lib/                 # Utilities
│   └── composition.tsx      # Main composition
├── composition.html         # Entry point
├── helios.config.json      # Helios configuration
├── package.json
├── tsconfig.json
└── vite.config.js

Next steps

After initialization:

1. Install dependencies:

   npm install
   

2. Start the development server:

   npm run dev
   

3. Or launch Studio:

   helios studio
   

4. Add components:

   helios add fade-in