Your First App

This guide walks through creating and running a Glyx app from scratch.

1. Create the project

If you haven't installed the CLI yet, do that first — see Installation.

glyx create hello-glyx
cd hello-glyx

2. Install dependencies

Glyx detects your package manager automatically from the lockfile — no configuration needed.

npm install

3. Start the dev server

glyx dev

A native window opens. The window auto-reloads on every file save — usually within 80ms.

4. Edit your first component

Open src/app.jsx. The blank template generates a welcome screen with the Glyx logo, your app name, and a counter:

import React, { useState } from 'react'
import { View, Text, Image, Pressable, render, useWindowSize } from '@glyx-dev/react'
 
function App() {
  const { width, height } = useWindowSize()
  const [count, setCount] = useState(0)
 
  return (
    <View
      width={width}
      height={height}
      style={{ backgroundColor: '#0A0A0E', justifyContent: 'center', alignItems: 'center', gap: 20 }}
    >
      <Image src="./public/glyx-mark.svg" width={64} height={56} />
      <Text style={{ fontSize: 28, color: '#EDEDF2', fontWeight: '700' }}>
        hello-glyx
      </Text>
      <Text style={{ fontSize: 16, color: '#A9A9B8' }}>
        count: {count}
      </Text>
      <Pressable
        onPress={() => setCount(c => c + 1)}
        style={{ backgroundColor: '#F59E0B', paddingVertical: 10, paddingHorizontal: 24, borderRadius: 8 }}
      >
        <Text style={{ fontSize: 15, color: '#131318', fontWeight: '600' }}>increment</Text>
      </Pressable>
    </View>
  )
}
 
render(<App />)

Save the file. The window updates instantly.

The entry file calls render(<App />). Glyx mounts it as the root of your app — no createRoot or createApp wrapper needed.

5. Explore the config

glyx.config.ts controls the window, capabilities, and build settings:

import { defineConfig } from '@glyx-dev/config'
 
export default defineConfig({
  window: {
    title:  'hello-glyx',
    width:  1280,
    height: 800,
  },
  capabilities: {
    fs: { read: ['public/**'], write: [] },
  },
  dev: {
    entry:  'src/app.jsx',
    output: 'dist/app.js',
    watch:  ['src'],
  },
})

capabilities gates access to native APIs. Add "fs": { "read": ["**"] } to enable all file reads, "db": true for SQLite, etc. If you call an API without declaring it, Glyx 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 @glyx-dev/router

Installation Project Structure