IDE Overview

The PhantomWP IDE is a powerful web-based development environment designed specifically for building Astro sites. It runs entirely in your browser, powered by GitHub Codespaces.

Main Sections

Header Bar

The header bar provides quick access to essential functions:

• Logo — Click to return to the dashboard
• Repository Name — Shows which project you're editing
• Git Status — Shows uncommitted changes count
• WordPress — Connect and manage WordPress integration
• AI Assistant — Toggle the AI chat panel
• Settings — Access editor and AI settings

File Tree (Left Panel)

The file tree shows all files in your project:

• Click a file to open it in the editor
• Right-click for context menu (rename, delete)
• Drag and drop to move files
• Use the + buttons to create new files or folders

Key folders in your Astro project:

• src/pages/ — Your site's pages (routes)
• src/content/ — Blog posts and other content
• src/components/ — Reusable components
• src/layouts/ — Page layouts
• public/ — Static assets (images, fonts)

Code Editor (Center Panel)

The Monaco-powered editor provides:

• Syntax highlighting for all major languages
• IntelliSense autocomplete for Astro, TypeScript, and more
• Error detection with inline diagnostics
• Multiple tabs for working with several files
• Code folding to collapse sections
• Find and replace with regex support

Keyboard Shortcuts

• Save - Mac: ⌘S / Windows: Ctrl+S
• Find - Mac: ⌘F / Windows: Ctrl+F
• Replace - Mac: ⌘H / Windows: Ctrl+H
• Go to Line - Mac: ⌘G / Windows: Ctrl+G
• Toggle Comment - Mac: ⌘/ / Windows: Ctrl+/
• Format Document - Mac: ⇧⌥F / Windows: Shift+Alt+F

Live Preview (Right Panel)

The preview panel shows your site as it will appear to visitors:

• Auto-refreshes when you save changes
• Navigate through your site like a real user
• Responsive testing — resize the panel to test layouts
• Refresh button to manually reload

Tab Bar

Work with multiple files using tabs:

• Click a tab to switch files
• Middle-click or click the × to close a tab
• Unsaved changes shown with a dot indicator
• Right-click for options (Close Others, Close All)

Right Panel Tabs

Toggle between different views in the right panel:

Preview Tab

Shows the live preview of your site.

HTML Tree Tab

Inspect the rendered HTML structure. Useful for:

• Understanding the DOM hierarchy
• Debugging layout issues
• Finding elements to style

Data Panel Tab

Shows available WordPress data when connected:

• Posts and pages
• Categories and tags
• Media items
• Custom fields

Editor Modes

Code Mode (Default)

Edit files as raw code with full syntax support.

Visual Mode (Markdown Files)

For .md and .mdx files, switch to Visual Mode for a WYSIWYG experience:

• Bold, italic, and other formatting
• Insert images and links
• Preview renders inline
• No markdown syntax knowledge needed

Toggle between modes using the button in the editor toolbar.

Built-in Tools

Media Manager

Upload and manage images and other assets:

1. Click the Media icon in the header
2. Drag and drop files or click to upload
3. Click an image to copy its path

Git Integration

Version control built right in:

• Changes — See modified files
• Commit — Save changes with a message
• History — View past commits
• Push — Send changes to GitHub

Component Library

Access pre-built components:

1. Click the Components icon
2. Browse available components
3. Click to insert into your file

Code Snippets

Quick access to common code patterns:

• Frontmatter templates
• Component imports
• Layout wrappers
• And more

Customizing the IDE

Panel Sizes

Drag the borders between panels to resize them. Your preferences are saved automatically.

Toggle Panels

• Preview: Click the eye icon to show/hide
• AI Chat: Click the AI icon to toggle

Editor Settings

Access via Settings icon:

• Font size
• Tab size
• Word wrap
• Theme (coming soon)

Performance Tips

1. Close unused tabs to free up memory
2. Use the search (⌘P / Ctrl+P) instead of browsing files
3. Split large files into smaller components
4. Clear browser cache if you experience slowdowns

Keyboard Shortcuts Reference

File Operations

• New File - Mac: ⌘N / Windows: Ctrl+N
• Save - Mac: ⌘S / Windows: Ctrl+S
• Save All - Mac: ⌘⌥S / Windows: Ctrl+Alt+S
• Close Tab - Mac: ⌘W / Windows: Ctrl+W

Navigation

• Quick Open - Mac: ⌘P / Windows: Ctrl+P
• Go to Line - Mac: ⌘G / Windows: Ctrl+G
• Go to Symbol - Mac: ⌘⇧O / Windows: Ctrl+Shift+O

Editing

• Cut Line - Mac: ⌘X / Windows: Ctrl+X
• Copy Line - Mac: ⌘C / Windows: Ctrl+C
• Move Line Up - Mac: ⌥↑ / Windows: Alt+Up
• Move Line Down - Mac: ⌥↓ / Windows: Alt+Down
• Duplicate Line - Mac: ⇧⌥↓ / Windows: Shift+Alt+Down
• Delete Line - Mac: ⇧⌘K / Windows: Ctrl+Shift+K

Next Steps

• Content Editor — Learn about the visual markdown editor
• AI Assistant — Use AI to help write code
• WordPress Data — Browse and insert WordPress content