wZed

A Zed-inspired playground for Nodepod — the browser-native Node.js runtime. Features split panes, an integrated terminal running real Node.js in the browser, Monaco code editing, git integration, AI assistant, and live preview — all without a backend.

Experimental: Both wZed and Nodepod are in early development. Expect bugs, missing features, and breaking changes.

Disclaimer: wZed is not affiliated with Zed Industries. This is an independent playground with a Zed-inspired design, built as a frontend for Nodepod.

Features

Editor

Monaco-powered code editing with 20+ language grammars
N-way split panes (horizontal/vertical nesting) with drag-to-resize
Tab management with reorder, close, and back/forward navigation
Minimap, word wrap, line numbers, indentation guides, cursor styling

Terminal

Integrated xterm.js terminal with multiple tabs
Runs real Node.js commands in the browser via nodepod (npm, node, shell builtins)
ANSI color output themed to match the editor

File Explorer

Project file tree with create, rename, delete, and duplicate
Import local files and folders from your machine
Drag-and-drop files between panes
Auto-syncs with the in-memory virtual filesystem

Git

Full git integration (init, stage, unstage, commit, push, pull)
Visual diff view with staged/unstaged file lists
GitHub token support for authenticated operations (push, pull, clone)

AI Assistant

AI-powered chat panel with tool execution (file edit, terminal commands, search)
OpenRouter integration with model selection
Bug report tool — detects runtime issues and offers to report them on GitHub

Live Preview

Embedded browser panel for previewing localhost servers
Auto-navigates when a server starts (Express, Next.js, Vite, etc.)

Extras

Command palette with fuzzy search (Ctrl+Shift+P)
File finder (Ctrl+P)
Global text search across project files
Customizable keybindings (VSCode, JetBrains, Vim presets)
15+ color themes (One Dark Pro, GitHub, Catppuccin, and more)
Persistent layout and settings per project
Bug report button for quick issue filing

Getting Started

Install and run

git clone https://github.com/ScelarOrg/wZed.git wzed
cd wzed
npm install
npm run dev

Open http://localhost:3000 in your browser.

Note: SharedArrayBuffer is required for the nodepod runtime. The Next.js config sets the necessary COEP/COOP headers automatically.

Git integration

To use push/pull with GitHub, set a personal access token in Settings > Git > GitHub Token. The token is stored locally in your browser and never sent to any server.

Scripts

| Command | Description | |---------|-------------| | npm run dev | Start Next.js dev server (localhost:3000) | | npm run build | Production build (static export) | | npm run start | Serve production build | | npm run lint | Run ESLint |

Project Structure

src/
├── app/
│   ├── layout.tsx              # Root layout, theme setup
│   └── page.tsx                # Main application shell
├── components/
│   ├── TitleBar.tsx            # Menu bar and panel toggles
│   ├── EditorPane.tsx          # Split pane layout and drag-drop
│   ├── CodeEditor.tsx          # Monaco editor integration
│   ├── FileTree.tsx            # Project file explorer
│   ├── TabBar.tsx              # File tab management
│   ├── TerminalPanel.tsx       # xterm.js terminal with tabs
│   ├── BrowserPanel.tsx        # Embedded preview browser
│   ├── GitPanel.tsx            # Git status, staging, commit, push/pull
│   ├── AIPanel.tsx             # AI assistant with tool execution
│   ├── CommandPalette.tsx      # Fuzzy command/file search
│   ├── SearchPanel.tsx         # Global text search
│   ├── SettingsModal.tsx       # Preferences UI
│   ├── KeymapEditor.tsx        # Keybinding customization
│   ├── HomeScreen.tsx          # Welcome screen with templates
│   └── ...                     # Context menus, icons, resize handles
├── stores/
│   ├── workspace-store.ts      # Editor layout, tabs, panes, open files
│   ├── nodepod-store.ts        # Nodepod instance and file tree sync
│   ├── settings-store.ts       # User preferences (persisted)
│   └── keymap-store.ts         # Keyboard shortcuts
├── lib/
│   ├── ai-sdk.ts               # AI agent loop and tool definitions
│   ├── themes.ts               # Color theme definitions
│   ├── keybind-dispatcher.ts   # Global keybinding handler
│   └── mock-data.ts            # Language detection, types
└── hooks/
    └── use-resizable.ts        # Resize drag handler

Tech Stack

| Layer | Technology | |-------|-----------| | Framework | Next.js 16 (static export) | | UI | React 19, Tailwind CSS 4 | | State | Zustand 5 | | Code Editor | Monaco Editor | | Terminal | xterm.js | | Runtime | Nodepod — browser-native Node.js (VFS, npm, shell, workers) | | Icons | Lucide React |

How It Works

Boot — The app dynamically imports Nodepod and creates an in-memory Node.js environment with a virtual filesystem at /project.
Edit — Files are read/written through Nodepod's async fs API. Monaco renders with language detection and theme-matched colors.
Run — Terminal commands spawn worker-based processes. Output streams back in real time. HTTP servers register in Nodepod's server registry.
Preview — When a server starts on a port, the browser panel navigates to it. Requests are intercepted and dispatched through Nodepod's HTTP polyfill.

Project Templates

When creating a new project, choose from:

Blank — Empty workspace
React — Vite + React starter
Node.js — HTTP server example
Vite — Vanilla JS with Vite

Each template comes with starter files and an optional auto-run command.

Contributing

Found a bug or have a feature request? Open an issue.

Pull requests are welcome. For major changes, please open an issue first to discuss what you'd like to change.

License

MIT

WZed

Install / Use

README