🚧 Glyx is pre-release software. APIs may change before v1.0. Get started β†’
Documentation
Getting Started
Project Structure

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
└── .gitignore

dist/ 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:

TemplateDescription
blank (default)Bare counter app
notesSidebar + scrollable note list
dashboardStat cards + navigation bar
settingsSwitch 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 dashboard

Build 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'],
}