Files — Explorer + Markdown Notes

A file explorer and Markdown notes editor. Demonstrates the fs and dialog capabilities with a resizable two-pane layout and live Markdown preview.

Mode: Native dev (cargo run via glyx dev). Demonstrates: fs, dialog, @glyx-dev/split-pane, @glyx-dev/markdown, @glyx-dev/design

Run it

cd examples/files
glyx dev

Features

Open any folder with a native folder picker (dialog.openFolder)
Browse directories; navigate into folders and back up
Open/edit/save text and Markdown files
Toggle Edit ↔ Preview — .md files render through @glyx-dev/markdown
Debounced autosave (~600ms) back to disk
Resizable split pane via @glyx-dev/split-pane

Key code

Browsing and reading

import { fs, dialog } from '@glyx-dev/react'
 
const p = await dialog.openFolder()
const entries = await fs.listDir(p)            // → { name, isDir }[]
entries.sort((a, b) => Number(b.isDir) - Number(a.isDir) || a.name.localeCompare(b.name))
 
const text = await fs.readFile(selectedPath)    // UTF-8 string
await fs.writeFile(selectedPath, text)          // overwrites
await fs.deleteFile(selectedPath)

Split layout + Markdown preview

import { SplitPane } from '@glyx-dev/split-pane'
import { Markdown } from '@glyx-dev/markdown'
 
<SplitPane direction="horizontal" defaultSizes={[30, 70]} width={width} height={height}>
  <ExplorerPane />
  <EditorPane />
</SplitPane>
 
{/* in the editor, when previewing a .md file: */}
<Markdown source={text} width={paneW} />

glyx.config.json

{
  "window": { "title": "Files", "width": 1000, "height": 700, "renderMode": "skia" },
  "capabilities": { "fs": { "read": ["**"], "write": ["**"] }, "dialog": true },
  "dev": { "entry": "js/app.jsx", "output": "js/dist/app.js", "watch": ["js"] }
}

Source

Browse the full source on GitHub: glyx-dev/glyx · examples/files (opens in a new tab)

Dashboard 3D Viewer