Dev Mode

View and edit your project code directly in Astrio with a full-featured development environment

Full-Stack Development Environment

Dev Mode bridges the gap between no-code simplicity and full development control. Switch seamlessly between visual editing and code editing to customize every aspect of your application.

Key Features

Code Editor

Full-featured IDE with syntax highlighting and auto-completion

Live Preview

See changes instantly as you type with hot reload

Debugging Tools

Built-in debugger with breakpoints and variable inspection

Version Control

Git integration with branch management and commit history

Development Workflow

Seamless Mode Switching

Switch between visual editing and code editing without losing context:

1. Start Visual

   Begin with drag-and-drop components in visual mode

2. Switch to Code

   Click “Dev Mode” to see the generated code

3. Edit Code

   Make custom modifications and add advanced logic

4. Back to Visual

   Return to visual mode to see your changes reflected

Code Generation

Astrio automatically generates clean, readable code:

• React/Next.js for frontend components
• TypeScript for type safety
• Tailwind CSS for styling
• API routes for backend functionality

Code Editor Features

Advanced IDE Capabilities

Experience professional development tools:

• Intelligent auto-completion - Context-aware suggestions
• Syntax highlighting - Support for 50+ languages
• Error detection - Real-time linting and error highlighting
• Code formatting - Automatic code beautification
• Multi-cursor editing - Edit multiple locations simultaneously

File Explorer

Navigate your project structure with ease:

• Tree view of all project files
• Search functionality to quickly find files
• File operations - create, rename, delete files and folders
• Import management - Automatic import organization

Terminal Integration

Access a full terminal within Astrio:

# Install packages
npm install lodash

# Run custom scripts
npm run build

# Deploy changes
npm run deploy

Debugging and Testing

Built-in Debugger

Debug your applications without leaving Astrio:

Breakpoints

Set breakpoints and step through code execution

Variable Inspector

Inspect variables and object states at runtime

Console Output

View console logs and error messages

Network Monitor

Monitor API calls and network requests

Testing Framework

Write and run tests directly in Astrio:

• Unit tests for individual components
• Integration tests for API endpoints
• E2E tests for complete user flows
• Test coverage reporting

Advanced Features

Custom Components

Create reusable custom components:

// Create a custom component
export function CustomButton({ variant, children, onClick }) {
  return (
    <button 
      className={`btn btn-${variant}`}
      onClick={onClick}
    >
      {children}
    </button>
  )
}

API Development

Build custom backend functionality:

// API route example
export default async function handler(req, res) {
  if (req.method === 'POST') {
    const { data } = req.body
    // Process data
    res.status(200).json({ success: true })
  }
}

Database Integration

Connect to databases and external services:

• PostgreSQL and MySQL support
• MongoDB for NoSQL needs
• Redis for caching
• External APIs integration

Performance Optimization

Code Analysis

Astrio analyzes your code for:

• Performance bottlenecks identification
• Bundle size optimization suggestions
• Unused code detection and removal
• SEO improvements recommendations

Build Optimization

Automatic optimizations for production:

• Code splitting for faster load times
• Tree shaking to remove unused code
• Image optimization for better performance
• CDN deployment for global distribution

Git Integration

Version Control

Full Git functionality within Astrio:

1. Initialize Repository

   Create a new Git repository for your project

2. Commit Changes

   Stage and commit your changes with descriptive messages

3. Branch Management

   Create and switch between feature branches

4. Push and Deploy

   Push to remote repositories and deploy automatically

Collaboration

Work with external developers:

• Pull request integration with GitHub/GitLab
• Code review tools for team collaboration
• Merge conflict resolution with visual diff viewer
• Branch protection rules and automated checks

Security Features

Code Security

Astrio helps maintain secure code:

• Dependency scanning for vulnerabilities
• Secret detection to prevent credential leaks
• Security best practices enforcement
• Automated security updates for dependencies

Migration and Export

Code Export

Export your code for external development:

• Full source code with all dependencies
• Docker containers for easy deployment
• CI/CD configurations for automated workflows
• Documentation generation

Import Projects

Bring existing projects into Astrio:

• GitHub repository import
• Zip file upload
• NPM package integration
• Template customization

Use Dev Mode when you need fine-grained control over functionality that’s difficult to achieve with visual editing alone.

Changes made in Dev Mode may not be fully reversible through visual editing. Always commit your work before making major code changes.