Project Structure

A freshly scaffolded VeloxKit project looks like this:

my-app/
├── js/
│   ├── app.jsx          ← root React component (your app)
│   └── dist/            ← compiled bundle output (gitignored)
│       └── app.js
│
├── veloxkit.config.ts      ← app name, version, capabilities, window settings
├── package.json         ← JS dependencies (@velox/react, @velox/design, etc.)
└── .gitignore

The js/dist/ folder is gitignored. It's generated by the CLI on every build and dev run — never commit it.

Key files

`veloxkit.config.ts`

The single source of truth for your app's identity, capabilities, and window:

import { defineConfig } from 'veloxkit'
 
export default defineConfig({
  version: '0.1.0',
 
  window: {
    title:  'My App',
    width:  1280,
    height: 800,
  },
 
  capabilities: {
    fs:     { read: ['**'] },
    db:     true,
    dialog: true,
  },
 
  dev: {
    entry:  'js/app.jsx',
    output: 'js/dist/app.js',
    watch:  ['js'],
  },
})

See the full veloxkit.config.ts reference for every option.

`js/app.jsx`

Your root React component. Behaves exactly like a React app — hooks, context, suspense, and @velox/react primitives all work here:

import { View, Text } from 'veloxkit'
 
export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>Hello, VeloxKit!</Text>
    </View>
  )
}

`package.json`

Standard npm/bun package file. VeloxKit packages live here:

{
  "dependencies": {
    "@velox/react":  "*",
    "@velox/design": "*"
  }
}

Templates

veloxkit create supports several starter templates:

Template	Description
`blank` (default)	Bare counter app
`notes`	Sidebar + scrollable note list
`dashboard`	Stat cards + navigation bar
`settings`	Switch rows grouped in card sections

All non-blank templates use @velox/design components and ThemeProvider for automatic light/dark mode.

npx veloxkit-cli create my-app --template dashboard

Build output

js/dist/app.js      ← Bun-compiled bundle of js/app.jsx (dev + build output)

The Velox runtime loads js/dist/app.js on startup. During veloxkit dev, this file is rebuilt automatically whenever any file in the js/ directory changes (HMR — hot reload).

Your First App Docker Setup