Your First App
This guide walks through creating and running a VeloxKit app from scratch.
1. Create the project
npx veloxkit-cli create hello-velox
cd hello-velox2. Start the dev server
npm run devA native window opens. The window auto-reloads on every file save — usually within 80ms.
3. Edit your first component
Open js/app.jsx:
import { View, Text, Pressable } from 'veloxkit'
import { useState } from 'react'
export default function App() {
const [count, setCount] = useState(0)
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', gap: 16 }}>
<Text style={{ fontSize: 32, fontWeight: 700 }}>
Count: {count}
</Text>
<Pressable
onPress={() => setCount(c => c + 1)}
style={{ paddingVertical: 10, paddingHorizontal: 24, backgroundColor: '#00A878', borderRadius: 8 }}
>
<Text style={{ color: '#fff', fontWeight: 600 }}>Increment</Text>
</Pressable>
</View>
)
}Save the file. The window updates instantly.
The entry file just exports a default React component. VeloxKit mounts it as the root of your app automatically — no createApp() wrapper needed.
4. Explore the config
veloxkit.config.json controls the window, capabilities, and build settings:
{
"window": {
"title": "Hello VeloxKit",
"width": 900,
"height": 600
},
"capabilities": {},
"dev": {
"entry": "js/app.jsx",
"output": "js/dist/app.js"
}
}capabilities gates access to native APIs. Add "fs": { "read": ["**"] } to enable file reads, "db": true for SQLite, etc. If you call an API without declaring it, VeloxKit throws a CapabilityDenied error at runtime.
Next steps
- Project Structure — understand every file
- View component — the layout primitive
- Capability system — how API access works
- Routing guide — add multiple screens with
@velox/router