veyrix-web.md (2529B)
1 --- 2 label: Veyrix Web (Multi-File) 3 icon: file-directory 4 order: 560 5 --- 6 7 # Veyrix Web (Multi-File IDE) 8 9 Veyrix Web (`web.html`) is an advanced, multi-file environment built specifically for web development. Unlike the single-file main IDE, it uses a robust virtual file system with directory structures, multi-tab editing, and an integrated real-time preview window. 10 11 ## Isolated database (VeyrixWebFS) 12 13 To prevent data collision with the main IDE, 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. 14 15 ```typescript 16 // VFS Node Representation 17 interface VFSNode { 18 path: string; // Absolute virtual path 19 type: string; // "file" or "folder" 20 content: string; // String payload or Base64 URI 21 isBase64: boolean; // Flags binary image assets 22 } 23 ``` 24 25 ## Live preview engine 26 27 The core of the Web IDE is the `PreviewEngine`. Because all files live inside IndexedDB, standard relative HTML links (like `<link rel="stylesheet" href="style.css">`) fail natively inside an isolated iframe — the engine intercepts and resolves these on the fly. 28 29 **AST parsing & injection** — when rendering, the engine intercepts your `/index.html` file and uses the browser's native `DOMParser` API to scan the DOM for external scripts, styles, and image tags. 30 31 **Virtual path resolution** — using `PathUtils.resolve()`, it computes the absolute virtual path of each linked asset, retrieves its content from the VFS, and transforms it: `<link>` tags become inline `<style>` tags, and `<script src>` tags become inline execution blocks. 32 33 **Blob srcdoc rendering** — the compiled master HTML string is injected directly into the iframe's `srcdoc` attribute. This entirely bypasses cross-origin requests, eliminates network latency, and keeps processing fast and 100% offline. 34 35 ## Workspace export (ZIP) 36 37 Unlike the main IDE (flat single files), Veyrix Web lets you export your entire workspace architecture. 38 39 - **Combine HTML** — leverages the PreviewEngine to bundle all CSS, JavaScript, and Base64 images into a single monolithic `index.html`. Good for quick sharing or embedding in systems that don't support multi-file directories. 40 - **ZIP archive export** — dynamically loads the `JSZip` library only when requested, maps over the virtual file system, constructs a standard directory structure, and outputs a downloadable `.zip` preserving all relative paths and binary formats.