veyrix-web.mdx

veyrix-web.mdx (2577B)

1 ---
2 title: "Veyrix Web (Multi-File IDE)"
3 sidebarTitle: "Veyrix Web (Multi-File)"
4 ---
5
6 import Copyright from "/snippets/copyright.mdx";
7
8 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.
9
10 ## Isolated database (VeyrixWebFS)
11
12 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.
13
14 ```typescript
15 // VFS Node Representation
16 interface VFSNode {
17 path: string; // Absolute virtual path
18 type: string; // "file" or "folder"
19 content: string; // String payload or Base64 URI
20 isBase64: boolean; // Flags binary image assets
21 }
22 ```
23
24 ## Live preview engine
25
26 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.
27
28 **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.
29
30 **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.
31
32 **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.
33
34 ## Workspace export (ZIP)
35
36 Unlike the main IDE (flat single files), Veyrix Web lets you export your entire workspace architecture.
37
38 - **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.
39 - **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.
40
41 <Copyright />