Dev Mode

Dev Mode is WP2Astro's complete development environment, giving you full access to your Astro project with professional-grade tools. Built on Monaco Editor (the same engine powering VS Code), it provides everything developers need.

What is Dev Mode?

Dev Mode is the advanced editing interface that provides:

• Monaco Code Editor: Professional code editing
• Full File System Access: Edit any project file
• Terminal: Run npm, git, and shell commands
• Component Builder: Visual component creator
• Media Manager: Upload and organize assets
• Git Integration: Version control built-in
• Live Preview: Real-time preview panel

[screenshot of dev mode]

Perfect for developers, designers, and power users who want complete control.

Accessing Dev Mode

From Dashboard

1. Navigate to your WP2Astro dashboard
2. Find your project card
3. Ensure codespace is "Running"
4. Click "Dev Mode" button

When to Use Dev Mode

Choose Dev Mode when you need to:

• Modify components, layouts, or pages
• Edit CSS and styling
• Configure Astro settings
• Install npm packages
• Run terminal commands
• Commit and push changes
• Build and test locally

Interface Overview

Dev Mode provides a complete IDE experience:

[screenshot of IDE interface]

File Tree

The left panel shows your complete project structure:

Project Structure

File Tree Actions

Click: Open file in editor Double-click: Open in new tab Right-click: Context menu with:

• New File
• New Folder
• Rename
• Delete
• Copy Path

File Icons

Files are color-coded by type:

• .astro - Astro components
• .js/.ts - JavaScript/TypeScript
• .css - Stylesheets
• .md/.mdx - Markdown content
• .json - Configuration files

Monaco Code Editor

The center panel features Monaco Editor with full IDE capabilities.

Syntax Highlighting

Code is beautifully highlighted:

---
// Frontmatter - Gray/Purple
import Layout from '../layouts/Layout.astro';
import Card from '../components/Card.astro';

const title = "Welcome to Astro"; // String - Green
const items = [1, 2, 3]; // Numbers - Orange
---

<Layout title={title}>
  <main>
    <h1>Hello World</h1>
    {items.map(item => (
      <Card title={`Item ${item}`} />
    ))}
  </main>
</Layout>

<style>
  main {
    max-width: 1200px;
    margin: 0 auto;
  }
  h1 {
    color: #333;
    font-size: 2rem;
  }
</style>

IntelliSense & Auto-Completion

Smart suggestions as you type:

• Component imports
• CSS properties
• JavaScript methods
• Astro APIs
• File paths

Type < to see available components:

<|  ← Shows: Layout, Card, Header, Footer, etc.

Error Detection

Real-time error checking:

• 🔴 Red squiggles for errors
• 🟡 Yellow for warnings
• Hover for details
• Quick fixes suggested

Multi-Cursor Editing

Edit multiple places at once:

• Alt + Click: Add cursor
• Cmd/Ctrl + D: Select next occurrence
• Cmd/Ctrl + Shift + L: Select all occurrences

Find and Replace

Search across files:

• Cmd/Ctrl + F: Find in current file
• Cmd/Ctrl + H: Find and replace
• Cmd/Ctrl + Shift + F: Find in all files
• Regex support

Code Formatting

Auto-format your code:

• Shift + Alt + F: Format document
• Formats on save (configurable)
• Respects .prettierrc if present

Tab Management

Work on multiple files simultaneously:

Opening Tabs

• Click file in tree → Opens new tab
• Cmd/Ctrl + P → Quick open
• Click link/import → Opens file

Tab Features

• Active tab: Highlighted
• Unsaved changes: Dot indicator (•)
• Close tab: Click ×
• Close all: Right-click → "Close All"
• Close others: Right-click → "Close Others"

Tab Shortcuts

• Cmd/Ctrl + Tab: Next tab
• Cmd/Ctrl + Shift + Tab: Previous tab
• Cmd/Ctrl + W: Close current tab

Live Preview

The right panel shows your site in real-time:

Preview Features

Auto-Refresh:

• Updates automatically on save
• Preserves scroll position
• Hot Module Replacement (HMR)

Responsive Testing:

• Desktop view (default)
• Tablet view (768px)
• Mobile view (375px)
• Custom width

Browser Console:

• View JavaScript logs
• See errors and warnings
• Debug client-side code

Actions:

• 🔄 Refresh: Force reload
• 🔗 Open in new tab: Full preview
• 📱 Toggle device size
• 🐛 Toggle console

Terminal Access

The bottom panel provides full terminal access:

What You Can Do

npm Commands:

# Install packages
npm install package-name
npm install -D dev-package

# Run scripts
npm run build
npm run dev
npm run preview

# Check versions
npm --version
node --version

Git Commands:

# Check status
git status

# View changes
git diff

# Stage files
git add .
git add src/pages/about.astro

# Commit
git commit -m "Update homepage"

# Push to GitHub
git push origin main

Astro CLI:

# Check Astro version
npx astro --version

# Add integration
npx astro add tailwind
npx astro add react

# Build for production
npm run build

File Operations:

# List files
ls src/pages/

# View file
cat src/pages/index.astro

# Find text in files
grep -r "searchterm" src/

Terminal Shortcuts

• Ctrl + C: Cancel command
• Ctrl + L: Clear terminal
• Up/Down: Command history
• Tab: Auto-complete

Advanced Features

Component Builder

Visual tool to create Astro components:

1. Click "Component Builder" in header
2. Define component props
3. Design component interface
4. Generate component code
5. File created automatically

[screenshot of component builder]

Example:

---
interface Props {
  title: string;
  description?: string;
}

const { title, description } = Astro.props;
---

<div class="card">
  <h3>{title}</h3>
  {description && <p>{description}</p>}
</div>

Media Manager

Upload and organize images:

1. Click "Media" in header
2. Drag files or click upload
3. Files saved to public/ directory
4. Copy paths to use in code

Supported Formats:

• Images: JPG, PNG, GIF, WebP, SVG
• Documents: PDF
• Maximum size: 10MB per file

Git Integration

Version control without leaving the IDE:

Git Changes Panel:

• View modified files
• Stage/unstage changes
• Write commit message
• Push to GitHub

Git History:

• View commit log
• See who changed what
• Revert to previous version
• Compare versions

[screenshot of git changes modal]

Code Snippets

Quick insert common patterns:

Type trigger → Press Tab → Snippet expands

Examples:

• astro → Astro component template
• layout → Layout component
• api → API route template
• config → Astro config

Development Workflow

Typical Dev Session

1. Start Codespace

   • From dashboard, ensure "Running"
   • Opens in 30-60 seconds

2. Open Files

   • Navigate file tree
   • Open files in tabs
   • Preview updates automatically

3. Make Changes

   • Edit code in Monaco
   • See changes in preview instantly
   • Terminal for npm commands

4. Test Changes

   • Check preview
   • Test responsive views
   • Check console for errors

5. Commit & Deploy

   • Stage changes via Git panel
   • Write commit message
   • Push to GitHub
   • Vercel auto-deploys

Hot Reload

Astro's dev server provides instant feedback:

• Component changes: 50-200ms
• Style changes: Instant
• Content changes: 100-300ms
• Config changes: Full reload

Keyboard Shortcuts

Editor Shortcuts

• Cmd/Ctrl + S: Save file
• Cmd/Ctrl + F: Find
• Cmd/Ctrl + H: Replace
• Cmd/Ctrl + /: Toggle comment
• Cmd/Ctrl + D: Select next occurrence
• Cmd/Ctrl + Shift + K: Delete line
• Alt + Up/Down: Move line
• Cmd/Ctrl + Shift + F: Format document

Navigation

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

Terminal

• Ctrl + C: Cancel command
• Ctrl + L: Clear screen
• Ctrl + R: Search history

Customizing Your Site

Editing Layouts

Layouts wrap your pages:

---
// src/layouts/Layout.astro
interface Props {
  title: string;
}

const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>{title}</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <slot /> <!-- Page content goes here -->
  </body>
</html>

Creating Components

Reusable UI elements:

---
// src/components/Button.astro
interface Props {
  text: string;
  href?: string;
}

const { text, href } = Astro.props;
---

{href ? (
  <a href={href} class="btn">{text}</a>
) : (
  <button class="btn">{text}</button>
)}

<style>
  .btn {
    padding: 0.5rem 1rem;
    background: blue;
    color: white;
    border-radius: 4px;
  }
</style>

Styling with CSS

Global styles in src/styles/global.css:

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography */
body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #333;
}

h1, h2, h3 {
  margin-bottom: 1rem;
}

/* Utilities */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

Configuration

Edit astro.config.mjs:

import { defineConfig } from 'astro/config';
import mdx from '@astrojs/mdx';

export default defineConfig({
  site: 'https://yoursite.com',
  integrations: [mdx()],
  markdown: {
    shikiConfig: {
      theme: 'nord',
    },
  },
});

Building and Testing

Development Build

Run in terminal:

npm run dev

Starts Astro dev server on port 4321.

Production Build

Test production build:

# Build site
npm run build

# Preview build
npm run preview

Check terminal for:

• Build time
• File sizes
• Any errors or warnings

Build Output

Debugging

Console Errors

Check browser console in preview:

console.log('Debug info');
console.error('Error message');
console.warn('Warning');

Terminal Errors

Watch terminal for build errors:

[error] Module not found: 'missing-package'
  Fix: npm install missing-package

[warn] Image not optimized
  Suggestion: Use Astro's Image component

Common Issues

Import Errors:

// ❌ Wrong
import Card from 'Card.astro';

// ✅ Correct
import Card from '../components/Card.astro';

Frontmatter Errors:

// ❌ Missing closing ---
---
const title = "Test"

// ✅ Correct
---
const title = "Test"
---

Performance Tips

Fast Editing

• Keep fewer tabs open (< 10)
• Close unused terminal tabs
• Clear terminal output periodically
• Restart dev server if slow

Build Performance

• Optimize images before uploading
• Remove unused dependencies
• Use dynamic imports for large components
• Enable caching in config

Tips for Developers

Astro Best Practices

• Use .astro for UI components
• Use .mdx for content
• Keep components small and focused
• Use TypeScript for type safety
• Leverage Astro's static generation

Code Organization

TypeScript Support

Use TypeScript for better DX:

---
interface Props {
  title: string;
  count: number;
  items?: string[];
}

const { title, count, items = [] }: Props = Astro.props;
---

Switching to Content Editor

Need simpler editing? Switch modes:

1. Save current work (auto-saved)
2. Go to dashboard
3. Click "Content" instead of "Dev Mode"
4. Access simplified content editor

Both modes work on the same files.

Troubleshooting

Editor Won't Load

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

Preview Not Updating

1. Check terminal for errors
2. Restart dev server (npm run dev)
3. Hard refresh preview (Cmd/Ctrl + Shift + R)
4. Check file actually saved

Terminal Not Responding

1. Check codespace hasn't auto-stopped
2. Try opening new terminal tab
3. Restart codespace if needed

Git Push Fails

1. Check GitHub connection
2. Verify you have push access
3. Pull latest changes first
4. Check for merge conflicts

Next Steps

• Learn about GitHub Codespaces
• Setup Vercel Deployment
• Explore Custom Components
• Read Astro Documentation

Additional Resources

• Monaco Editor Docs
• Astro Documentation
• TypeScript Handbook
• Git Documentation
• WP2Astro Support