Griot Notebook

Griot is a desktop notebook and text editor that renders custom syntax rules defined by a simple DSL (files with the .csml extension). It is built as a Tauri 2 desktop app with a React + TypeScript + Vite frontend.

You can load a .csml/.conf file to define how text is highlighted and structured, then edit content and export it to standalone HTML.

Overview

• Desktop app powered by Tauri 2 (Rust backend) and a React 19 + Vite 7 frontend.
• Custom CodeMirror 6 based editor with dynamic syntax rules.
• Import a syntax config (DSL) from a .csml/.conf file at runtime.
• Export the current document to a self-contained HTML file.

Stack

• Language(s):
  • Frontend: TypeScript + React 19, Vite 7
  • Backend: Rust (Tauri 2)
• UI: Material UI (MUI)
• Editor: CodeMirror 6
• Package manager: Bun

Requirements

• Bun (to install dependencies and run scripts)
• Rust toolchain (stable) with Cargo
• Tauri 2 prerequisites for your OS:
  • macOS: Xcode Command Line Tools
  • Windows: Visual Studio Build Tools + WebView2 Runtime
  • Linux: libgtk-3-dev, libayatana-appindicator3-dev, libsoup2.4-dev (or see Tauri docs)
• Optional:
  • Node.js (only if you prefer npm/pnpm/yarn, but this project is configured for Bun)

Setup

1. Install dependencies

   bun install

2. First run (web preview only)

   bun run dev

   This starts the Vite dev server at http://localhost:1420 (port fixed by config). Note: The app is primarily designed to run inside Tauri; certain features may assume a desktop context.

3. Desktop app (Tauri) – development

   bun run tauri dev

   Tauri will:

   • run bun run dev as the frontend dev server (per src-tauri/tauri.conf.json)
   • open the desktop window pointing to http://localhost:1420

4. Build production

   • Frontend bundle only:

     bun run build

   • Desktop app bundle (Tauri):

     bun run tauri build

Scripts

Defined in package.json:

• dev: start Vite dev server

  bun run dev

• build: type-check with tsc and build the frontend with Vite

  bun run build

• preview: preview the production build

  bun run preview

• tauri: proxy to the Tauri CLI
  • development: bun run tauri dev
  • build: bun run tauri build

Entry points

• Web: index.html → <div id="root"> mounts React → src/main.tsx renders <App />
• Desktop (Rust): src-tauri/src/main.rs calls griot_lib::run(); Tauri is configured in src-tauri/tauri.conf.json and src-tauri/Cargo.toml

Configuration and example DSL files

• ExampleStoryboard.conf and ExampleTinyMarkdown.conf: example syntax configs for experimenting with the DSL.
• storyboard.csml: example DSL file extension accepted by the app.
• In the UI, click "Load .conf (DSL)" to import a .csml/.conf file; the editor will apply the rules dynamically.

Environment variables

• TAURI_DEV_HOST (optional): when set, Vite HMR is configured for networked devices (see vite.config.ts). Example:

  # expose dev server over LAN
  TAURI_DEV_HOST=192.168.1.100 bun run tauri dev

Tests

• No test setup is present in this repository at the moment. TODO: choose a test framework (e.g., Vitest for frontend, Rust tests for backend) and add tests.

Project structure

/ (project root)
├─ README.md
├─ package.json
├─ bun.lock
├─ index.html
├─ public/
├─ src/
│  ├─ main.tsx
│  ├─ App.tsx
│  ├─ App.css
│  ├─ codeEditor/
│  │  ├─ index.tsx
│  │  ├─ dynamicSyntax.ts
│  │  └─ widgets/
│  ├─ exportHtml.ts
│  └─ ...
├─ src-tauri/
│  ├─ Cargo.toml
│  ├─ tauri.conf.json
│  └─ src/main.rs
├─ ExampleStoryboard.conf
├─ ExampleTinyMarkdown.conf
├─ storyboard.csml
├─ tsconfig.json
├─ tsconfig.node.json
└─ vite.config.ts

Development notes

• Port and HMR: Vite runs on port 1420 with strict port and optional HMR host. Adjust in vite.config.ts if needed.
• Security: csp is set to null in tauri.conf.json for development convenience; consider tightening for production.
• Editor: The CodeMirror-based editor supports dynamic rules added at runtime via the DSL parser (src/codeEditor/syntaxDslParser.ts).

License

• GNU General Public License v3.0