IDE Overview

WP2Astro provides a complete development environment that runs entirely in your browser. No installation, no setup, no configuration - just open and start coding.

What is the WP2Astro IDE?

The WP2Astro IDE is a web-based code editor and development environment built on top of GitHub Codespaces. It gives you:

• Monaco Editor: The same powerful editor that powers VS Code
• Live Preview: See your changes instantly
• File Management: Full access to your project files
• Terminal Access: Run any npm or git commands
• Auto-Save: Never lose your work

[screenshot of IDE interface]

How It Works

Cloud Development Environment

Instead of running on your computer, your development environment runs in the cloud:

Benefits:

• No local installation required
• Works on any device with a browser
• Consistent environment for all users
• Powerful cloud servers handle builds
• Access from anywhere

GitHub Codespaces

Under the hood, WP2Astro uses GitHub Codespaces:

• Virtual Linux machine (Ubuntu)
• 2-4 CPU cores
• 4-8 GB RAM
• Node.js 20 pre-installed
• Astro development server ready to go

Two Editing Modes

WP2Astro offers two ways to edit your site, depending on your needs:

Content Editor (Simple Mode)

Perfect for content creators and non-developers:

• Focus: Writing and editing content
• Interface: Simplified, WYSIWYG-style
• Files: Blog posts and pages only
• Complexity: Low - no code knowledge needed

[screenshot of content editor]

Best for:

• Writers and bloggers
• Content updates
• Quick edits
• Non-technical users

Learn more about Content Editor →

Dev Mode (Advanced Mode)

Full-featured IDE for developers:

• Focus: Complete site development
• Interface: Full code editor with syntax highlighting
• Files: Access to all project files
• Complexity: High - for developers and designers

[screenshot of dev mode]

Best for:

• Developers
• Theme customization
• Component creation
• Advanced configurations

Learn more about Dev Mode →

Accessing the IDE

From Your Dashboard

1. Go to your WP2Astro dashboard
2. Find your project card
3. Make sure codespace status is "Running"
   • If "Off", click "Start Codespace" and wait 30-60 seconds
   • If no codespace, click "Create Codespace"
4. Choose your editing mode:
   • Click "Content" for Content Editor
   • Click "Dev Mode" for full IDE

Codespace Status Indicators

• 🔴 Off: Codespace is stopped (not consuming resources)
• 🟡 Starting: Booting up (wait 30-60 seconds)
• 🟢 Running: Ready to use!
• 🟠 Shutting Down: Stopping (wait before restarting)

IDE Layout

Main Components

The IDE interface consists of several key areas:

[screenshot of file tree]

1. Header Bar

Located at the top:

• Project Name: Which site you're editing
• Save Status: Shows "Saved" or "Saving..."
• Action Buttons:
  • View on GitHub
  • Component Builder
  • Media Manager
  • Git Changes
  • Settings

2. File Tree (Left Panel)

Navigate your project structure:

Actions:

• Click to open files
• Right-click for context menu
• Create new files and folders
• Rename or delete items

3. Code Editor (Center Panel)

Monaco editor with full features:

• Syntax Highlighting: For Astro, TypeScript, CSS, Markdown
• Auto-Completion: Smart suggestions as you type
• Error Detection: Red squiggles for errors
• Multi-Cursor: Edit multiple places at once
• Find & Replace: Search across files
• Tab Management: Work on multiple files

4. Live Preview (Right Panel)

See your changes in real-time:

• Auto-Refresh: Updates as you type
• Responsive View: Test mobile/desktop
• Console: View JavaScript logs
• Reload Button: Force refresh
• Open in New Tab: Full preview

5. Terminal (Bottom Panel - Dev Mode)

Full command-line access:

# Run npm commands
npm install package-name
npm run build

# Git operations
git status
git add .
git commit -m "Update homepage"

# Check versions
node --version
npm --version
astro --version

Key Features

Auto-Save

Every change is automatically saved:

1. You type in the editor
2. After 500ms of inactivity, WP2Astro saves
3. File is written to the codespace
4. Green "Saved" indicator appears
5. Astro dev server detects change
6. Preview updates automatically

No manual save button needed!

Live Preview

See changes instantly:

• Edit any .astro, .md, or .css file
• Preview updates within 1-2 seconds
• Hot Module Replacement keeps scroll position
• Works for all pages and components

Syntax Highlighting

Code is color-coded for readability:

---
// Frontmatter (gray)
import Layout from '../layouts/Layout.astro';
const title = "Welcome"; // (blue)
---

<!-- HTML with syntax highlighting -->
<Layout title={title}>
  <h1>Hello World</h1>  <!-- (green) -->
  <p class="intro">Welcome to my site</p>
</Layout>

<style>
  .intro { color: blue; } /* (purple) */
</style>

Multi-File Tabs

Work on multiple files simultaneously:

• Open files appear as tabs at the top
• Switch between tabs instantly
• Unsaved changes marked with dot (•)
• Close tabs with ✕
• Reopen with file tree

Git Integration (Dev Mode)

Version control built-in:

• View changed files
• Stage changes
• Commit with messages
• Push to GitHub
• View commit history
• Revert changes

Keyboard Shortcuts

Speed up your workflow:

Editor Shortcuts

• Cmd/Ctrl + S: Save file (though auto-save handles this)
• Cmd/Ctrl + F: Find in file
• Cmd/Ctrl + H: Find and replace
• Cmd/Ctrl + /: Toggle comment
• Cmd/Ctrl + D: Select next occurrence
• Alt + Up/Down: Move line up/down
• Cmd/Ctrl + Z: Undo
• Cmd/Ctrl + Shift + Z: Redo

Navigation Shortcuts

• Cmd/Ctrl + P: Quick file open
• Cmd/Ctrl + B: Toggle sidebar
• Cmd/Ctrl + J: Toggle terminal
• Cmd/Ctrl + \: Split editor

Resource Management

Codespace Auto-Stop

GitHub automatically stops codespaces after:

• 4 hours of inactivity
• You can manually stop them sooner
• All files are preserved when stopped
• Restart anytime in seconds

Managing Quota

Monitor your GitHub Codespace usage:

• Free: 120 core-hours/month
• Pro: 180 core-hours/month

Tips to save resources:

• Stop codespaces when not in use
• Delete codespaces you no longer need
• Work locally by cloning the repo (optional)

Performance Tips

Fast Editing Experience

The IDE is optimized for speed:

• Editor loads in < 2 seconds
• File switching is instant
• Preview updates in 1-2 seconds
• Terminal commands run immediately

Build Performance

Astro's development server is fast:

• Initial build: 1-3 seconds
• Hot reload: 50-200ms
• Full rebuild: 2-5 seconds

Slow Preview?

If preview seems sluggish:

1. Check your internet connection
2. Restart the dev server (terminal: npm run dev)
3. Refresh the preview panel
4. Check for build errors in terminal

Browser Compatibility

The IDE works best in modern browsers:

• ✅ Chrome 90+ (Recommended)
• ✅ Firefox 88+
• ✅ Safari 14+
• ✅ Edge 90+

Minimum Requirements:

• Modern browser with WebSocket support
• Stable internet connection
• JavaScript enabled

Mobile and Tablet Support

The IDE works on mobile devices, but with limitations:

• Tablets (iPad, Android): Good experience with external keyboard
• Phones: Limited - better for viewing than editing

Recommendation: Use desktop/laptop for best experience

Working Offline

The IDE requires an internet connection:

• Editor runs in the cloud
• Files stored in GitHub
• Preview served from codespace
• No offline mode available

Alternative: Clone your repository and work locally

Security and Privacy

Data Security

• All connections encrypted (HTTPS/WSS)
• Files stored in your GitHub account
• Only you have access to your codespace
• Tokens and credentials encrypted

What WP2Astro Can Access

• Read/write files in your codespace
• Create commits in your repository
• Start/stop your codespaces
• View deployment status

What WP2Astro CANNOT Access

• Other GitHub repositories
• Your GitHub password
• Files outside your project
• Other codespaces

Troubleshooting

IDE Won't Load

1. Check codespace status is "Running"
2. Wait 60 seconds after starting
3. Try refreshing the browser
4. Check browser console for errors

Preview Not Updating

1. Check terminal for build errors
2. Refresh preview panel
3. Restart dev server: npm run dev
4. Check file actually saved (green indicator)

File Tree Not Showing Files

1. Refresh the page
2. Check WebSocket connection (green indicator)
3. Try closing and reopening the IDE
4. Restart the codespace

Terminal Commands Not Working

1. Verify you're in Dev Mode (not Content Editor)
2. Check the command is correct
3. Make sure codespace is fully started
4. Try opening new terminal tab

Next Steps

Now that you understand the IDE basics:

• For content creators: Learn about Content Editor
• For developers: Explore Dev Mode
• Learn more: Read about GitHub Codespaces

Additional Resources

• Monaco Editor Documentation
• Astro Documentation
• GitHub Codespaces Guide
• WP2Astro Support