Veyrix IDE

What is Veyrix IDE?

Veyrix is a lightweight, offline-first progressive web application (PWA) that transforms your browser into a highly responsive code editor. It is designed to run seamlessly in strict or restricted browser environments, keeping all processing and storage entirely on the client side without relying on backend servers.

Why use it?

Architecture & Stack

Veyrix IDE is an offline-first, client-side progressive web application (PWA) engineered for high-performance code editing in browser-restricted environments. It bypasses traditional Virtual DOM overhead by utilizing a vanilla JavaScript monolithic state architecture paired directly with the Ace Editor engine.

Core Technology Stack

Comprehensive Usage Guide

This section details how to operate the Veyrix IDE effectively, covering file management, keyboard shortcuts, versioning, and sharing capabilities.

Visual System Design

Below is a high-level visual representation of the data flow and architectural boundaries within Veyrix IDE. Notice the strict isolation of the Cloud layer.

State Management Pattern

To maintain extreme performance on low-end mobile devices, Veyrix eschews frameworks like React or Vue. Instead, it relies on a mutable, global singleton `state` object. UI updates are handled through explicit imperative functions triggered by state mutations, avoiding full tree diffing.

// Global State Singleton
const state = {
    files: [],              // Array of File objects
    activeFileId: null,     // ID of currently rendered file
    editor: null,           // Ace Editor instance reference
    db: null,               // IndexedDB connection instance
    renameTargetId: null    // Transient state for UI modals
};

Local Storage Model (IndexedDB)

Persistence is entirely managed via the browser's native IndexedDB API using a Promisified wrapper. The database is named `VeyrixFS` (Version 1).

Schema: `files` ObjectStore

KeyPath: id

// TypeScript Representation of the IndexedDB Record
interface VeyrixFile {
  id: string;             // e.g., "f_a1b2c3d4e_1679000000"
  name: string;           // Base filename (e.g., "app")
  ext: string;            // Extension (e.g., "js", "html")
  content: string;        // Raw string payload of the editor
  unsaved: boolean;       // Tracks dirty state for the UI
  lastModified: number;   // Epoch timestamp
  snapshotCounter?: number; 
  snapshots?: Snapshot[]; // Array (Max length: 5, FIFO eviction)
}

Cloud & Synchronization Strategy

Veyrix employs a zero-cost initial load strategy. Firebase SDKs (App, Auth, Firestore) are not bundled or loaded on startup. They are dynamically imported via ES Modules only when a user initiates a "Cloud Share".

Cryptography & Security Model

// Internal Utility Method
async function hashPassword(password) {
    const msgBuffer = new TextEncoder().encode(password);
    const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}

Threat Model Assumptions

• 1. Physical Security Veyrix relies completely on the local OS and browser profile. If an attacker gains physical, unlocked access to the device or compromises the browser profile (e.g., via malicious extensions), the IndexedDB store is considered compromised.
• 2. Cross-Site Scripting (XSS) Veyrix is an editor, not an evaluator. The Ace Editor parses content into Abstract Syntax Trees (ASTs) for highlighting. It does not execute the code within the DOM. DOM string interpolations are secured via native `textContent` mappings.
• 3. Cloud Anonymity Firebase interactions utilize `signInAnonymously()`. Data is tied to a temporary, anonymous session UID. We assume Firebase Security Rules enforce read/write access correctly based on the snippet UID, but URLs are considered semi-public unless SHA-256 hashed.

Performance & Benchmarks

By stripping away Webpack overhead, Virtual DOM reconciliation, and heavy language servers, Veyrix operates on a fraction of the hardware requirements of modern cloud IDEs.

Why Ours is Better for Mobile/Low-End:

• Debounced I/O: IndexedDB writes are debounced by 500ms, ensuring zero main-thread blockage during rapid typing.
• No Monaco Overhead: While powerful, the Monaco editor struggles on low-end Androids due to heavy worker threading. Ace Editor is substantially lighter.
• Visual Viewport Anchoring: PWA implementations often suffer from layout thrashing when the soft keyboard appears. Veyrix anchors directly to the `window.visualViewport` API, freezing the reflow.

Error Handling Behavior

Web IDE Architecture

Veyrix Web (web.html) is an advanced, multi-file environment built specifically for web development. Unlike the single-file main IDE, it utilizes a robust virtual file system with directory structures, multi-tab editing, and an integrated real-time preview window.

Isolated Database (VeyrixWebFS)

To prevent data collision, Veyrix Web uses a completely separate IndexedDB named VeyrixWebFS. It tracks full relative paths (e.g., /css/style.css) rather than flat IDs, enabling a true folder hierarchy.

// VFS Node Representation
interface VFSNode {
  path: string;           // Absolute virtual path
  type: string;           // "file" or "folder"
  content: string;        // String payload or Base64 URI
  isBase64: boolean;      // Flags binary image assets
}

Live Preview Engine

The core powerhouse of the Web IDE is the PreviewEngine. Because all files exist securely inside IndexedDB, standard relative HTML links (like <link rel="stylesheet" href="style.css">) fail natively inside an isolated iframe. Our engine intercepts and resolves these on the fly.

Workspace Export (ZIP)

Unlike the main IDE which deals with flat single files, Veyrix Web allows you to export your entire workspace architecture effortlessly.

Frequently Asked Questions (FAQ)

UI Visuals & Layout

The interface is designed using a flexbox layout tailored for high-performance desktop workflows. Both environments utilize a persistent sidebar for file management, while the Web IDE adds a synchronized live preview engine.