Skip to main content
The Workbench is your complete development environment, providing everything you need to build, test, and deploy applications in one unified interface.

​
Overview

The workbench combines code editing, live preview, and change tracking into a seamless development experience. Whether you’re building a web application, mobile app, or any other project, the workbench adapts to your workflow.

Code Editing

Full-featured code editor with file management, search, and terminal integration

Live Preview

Real-time application preview with device simulation and responsive testing

Change Tracking

Visual diff comparison and version history for all your file changes

​
Main Views

The workbench provides three primary views that you can switch between based on your current task:

​
Code Editing Interface

The code view is your primary workspace for writing and managing code. It features a resizable layout with multiple panels working together seamlessly.

​
File Tree Panel

Navigate your project structure with an intuitive file tree that supports:
  • Hierarchical browsing - Expand and collapse folders to find files quickly
  • File type indicators - Visual icons showing file types (JavaScript, CSS, images, etc.)
  • Unsaved changes - Clear indicators for files with pending changes
  • Hidden file filtering - Automatically hides common directories like node_modules
Quick Tip: Use the search bar within the file tree to quickly locate specific files by name.

​
Main Editing Area

A powerful code editor with features designed for modern development:
  • Syntax highlighting - Support for all major programming languages
  • Auto-completion - Intelligent code suggestions as you type
  • Multiple cursors - Edit multiple locations simultaneously
  • Find and replace - Search within files with regex support

​
File Management

  • Breadcrumb navigation - See your current location in the file hierarchy
  • Save/Reset buttons - Quick access to save changes or revert to original state
  • Auto-save - Automatic saving prevents data loss
Find anything in your codebase instantly:
  • Text search - Search for specific words, phrases, or patterns
  • File filtering - Limit searches to specific file types
  • Case sensitivity - Toggle case-sensitive matching
  • Regular expressions - Advanced pattern matching for complex searches
Results are grouped by file with line numbers and highlighted matches for easy navigation.

​
Command Line Access

Run commands directly within your development environment:
  • Multiple terminal tabs - Work with different command sessions
  • Resizable panels - Adjust terminal size to fit your workflow
  • Command history - Access previously run commands
  • Environment integration - Full access to your project’s environment

​
Key Features

​
Development Workflow

The workbench supports your complete development cycle:
1

Code Your Application

Use the powerful code editor with syntax highlighting, auto-completion, and intelligent suggestions to write clean, efficient code.
2

Test Across Devices

Switch to preview mode to see your application on different devices and screen sizes, ensuring it works perfectly everywhere.
3

Review Changes

Use the diff view to understand what has changed, review modifications, and ensure code quality before committing.
4

Deploy & Share

Use built-in deployment tools to push your code to GitHub, deploy to hosting platforms, or share with team members.

​
Additional Tools

Beyond the main views, the workbench includes several supporting tools to enhance your development experience.

​
Project Deployment

Share your work with the world using integrated deployment tools:
  • GitHub integration - Push directly to GitHub repositories
  • Repository creation - Create new repos with proper configuration
  • Commit management - Generate meaningful commit messages
  • Branch handling - Work with different branches and merge strategies

​
Advanced File Operations

Keep your local and remote files in sync:
  • File synchronization - Sync changes between local and remote environments
  • Download options - Export your project as a ZIP file
  • Import capabilities - Bring in files from external sources
  • Conflict resolution - Handle file conflicts gracefully

​
Team Development

Work effectively with your team:
  • File locking - Prevent conflicts when multiple people edit the same files
  • Change notifications - See when team members modify shared files
  • Comment system - Add notes and feedback on specific code sections
  • Review workflows - Structured processes for code review and approval

​
Development Optimization

Ensure your application performs well:
  • Performance monitoring - Track loading times and resource usage
  • Error tracking - Identify and debug runtime issues
  • Console access - View browser console output and debugging information
  • Network inspection - Monitor API calls and data flow

​
Getting Started

Quick Start: Open any project file to automatically activate the workbench. The interface will adapt based on your project type and current development needs.