Voxcode includes a Virtual File System (VFS) — a lightweight, browser-based file store that holds all of the code the AI generates for you. You do not need to set up a project folder, install a CLI, or connect a cloud service. Your files exist entirely within the browser, ready for preview and further editing the moment they are created.
What the VFS is
The VFS persists your project files using your browser’s localStorage. Every file the AI generates — HTML, CSS, JavaScript, TypeScript, React components, configuration files — is written directly into localStorage under a namespaced key.
localStorage key format: voxcode:vfs:<filename>
For example, if the AI generates an index.html and a styles.css, your browser’s storage will contain:
voxcode:vfs:index.html → "<html>...</html>"
voxcode:vfs:styles.css → "body { margin: 0; ... }"
voxcode:vfs:components/Header.tsx → "export default function Header() { ... }"
How AI-generated code is saved
When the AI responds to a coding request, Voxcode parses the response for fenced code blocks that include a filename in the fence tag:
```html:index.html
<html>...</html>
```
```css:styles.css
body { margin: 0; }
```
Each code block is extracted and written to the VFS automatically. You do not need to accept or confirm each file — they are saved as the AI streams its response.
After saving, the file appears as an interactive CodeSnippet card in the chat. From there you can:
- Reject the file (red button) — removes it from the VFS
- Accept the file (yellow button) — confirms it as-is
- Edit the file (green button) — opens an inline editor inside the card, and saves changes back to the VFS on submit
Viewing your files
Swipe left from the main chat view to open the File Explorer sidebar. It lists all files currently stored in the VFS organized by path.
Click the sidebar toggle button or use the File Explorer icon in the navigation to reveal the file tree panel on the left side of the screen.
Supported project types
The VFS stores any text-based file the AI generates. The following project structures are fully supported for both storage and live preview:
| Project type | Typical files |
|---|
| Static HTML/CSS | index.html, styles.css, .js scripts |
| React app | package.json with react dependency, .tsx/.jsx components |
| Vanilla JS | index.html with <script type="module"> imports |
| Node.js app | package.json with scripts, server files |
CRUD operations
The VFS supports the full set of file operations:
| Operation | When it happens |
|---|
| Create | AI generates a new file with a filename in the code fence |
| Read | VFS loads files for preview, AI context, and the File Explorer |
| Update | AI regenerates a file with the same filename, or you edit it inline |
| Delete | You reject a CodeSnippet, or explicitly ask the AI to delete a file |
Giving the AI context from VFS
When you send a message, Voxcode reads all files from the VFS and includes them as context for the AI. This means the AI knows about your current project structure and can make edits that are consistent with existing code — adding a component to a layout, updating a stylesheet, or modifying a config file without overwriting unrelated parts.
VFS data lives entirely in your browser’s localStorage. If you clear your browser storage, use private/incognito mode, or switch to a different browser or device, your files will not be available. Always export or copy important code before clearing your browser data. GitHub sync to back up your VFS is coming soon.
Coming soon: GitHub sync
A future release will let you push your VFS files to a GitHub repository and pull existing repos into the VFS. This will enable persistent storage, collaboration, and deployment workflows directly from Voxcode.