Project Structure
Glyx has two project modes: JS-only (no Rust toolchain) and native (includes a Rust crate). Both are scaffolded by glyx create.
my-app/
βββ src/
β βββ app.jsx β root React component (your entry point)
β βββ components/ β your components go here
β
βββ public/ β static assets (images, fonts, icons)
β βββ glyx-mark.svg
β
βββ dist/ β compiled bundle output (gitignored)
β βββ app.js
β
βββ glyx.config.ts β app identity, capabilities, window settings
βββ package.json β JS dependencies
βββ .gitignoredist/ is gitignored. It is generated by the CLI on every build and dev run β never commit it.
Key files
glyx.config.ts
The single source of truth for your app's identity, capabilities, and window:
import { defineConfig } from '@glyx-dev/config'
export default defineConfig({
app: {
version: '1.0.0',
},
window: {
title: 'My App',
width: 1280,
height: 800,
},
capabilities: {
fs: { read: ['public/**'] },
dialog: true,
},
dev: {
entry: 'src/app.jsx', // JS-only default
output: 'dist/app.js',
watch: ['src'],
},
})See the full glyx.config.ts reference for every option.
src/app.jsx (JS-only) / ui/app.jsx (native)
Your root React component. Behaves exactly like a React app β hooks, context, suspense, and @glyx-dev/react primitives all work:
import { View, Text } from '@glyx-dev/react'
export default function App() {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{ fontSize: 24 }}>Hello, Glyx!</Text>
</View>
)
}public/
Static assets served from the app root. Reference them with a relative path:
<Image src="./public/logo.png" width={64} height={64} />package.json
Standard bun/npm package file. Glyx packages are listed here:
{
"dependencies": {
"@glyx-dev/react": "*",
"@glyx-dev/design": "*"
}
}Templates
glyx 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 @glyx-dev/design components and ThemeProvider for automatic light/dark mode.
glyx create my-app --template dashboardBuild output
dist/app.js β Bun-compiled bundle (dev + build output)The Glyx runtime loads dist/app.js on startup. During glyx dev, this file is rebuilt automatically whenever any file in the watched directory changes (HMR).
The entry, output path, and watch directories are all overridable in glyx.config.ts under dev:
dev: {
entry: 'src/app.jsx', // or 'ui/app.jsx' for native
output: 'dist/app.js',
watch: ['src'],
}