Skip to main content
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

Build docs developers (and LLMs) love

Get started for freeTalk to us