codinit-dev · Gerome-Elassaad · Dec 30, 2025 · Dec 30, 2025 · Dec 30, 2025 · Dec 30, 2025
diff --git a/features/development/code-editor.mdx b/features/development/code-editor.mdx
@@ -1,90 +1,68 @@
 ---
 title: Code Editor Panel
-description: Professional code editing environment with syntax highlighting, intelligent file management, and seamless terminal integration.
+description: Where you write and organize your code files
 ---
 
-The Code Editor Panel serves as your primary workspace for writing, editing, and managing code files. It combines a powerful code editor with intuitive file navigation and terminal integration in a unified interface.
+The Code Editor is where you write your code. It's like a super-smart text editor that understands programming and helps you write better code.
 
-## Overview
+## What is the Code Editor?
 
-Designed for modern development workflows, the editor panel provides everything you need for efficient coding: syntax highlighting, intelligent file management, and seamless terminal access. The resizable layout adapts to your preferred working style.
+Think of the Code Editor as a special notebook for writing code. It colors your code to make it easier to read and helps you find mistakes.
 
 <CardGroup cols={3}>
-  <Card title="Code Editing" icon="code">
-    Advanced editor with syntax highlighting and intelligence
+  <Card title="Write Code" icon="code">
+    Type your code with helpful colors and hints
   </Card>
-  <Card title="File Management" icon="folder">
-    Hierarchical file browsing with advanced operations
+  <Card title="Organize Files" icon="folder">
+    See all your project files in a tree
   </Card>
-  <Card title="Terminal Integration" icon="terminal">
-    Built-in command line access
+  <Card title="Run Commands" icon="terminal">
+    Use the terminal without leaving the editor
   </Card>
 </CardGroup>
 
-## Main Interface
+## Main Parts
 
-<AccordionGroup>
-  <Accordion title="File Navigation" icon="folder-tree">
-    ### Project File Tree
+### Finding Your Files
 
-    Navigate your project structure with powerful browsing features:
-    - **Hierarchical display** - Expandable folder structure
-    - **File type indicators** - Visual icons for different file types
-    - **Unsaved changes** - Clear indicators for modified files
-    - **Hidden file filtering** - Automatic exclusion of system files
+On the left side, you'll see all your project files organized like folders on your computer:
+- Click folders to open them and see what's inside
+- Click files to open and edit them
+- Icons show you what type of file it is (JavaScript, image, etc.)
+- A dot appears next to files you've changed but haven't saved
 
-  </Accordion>
+### Writing Code
 
-  <Accordion title="Code Editor" icon="edit">
-    ### Main Editing Area
+The big area in the middle is where you write your code:
+- **Colors** - Different parts of your code show up in different colors to make it easier to read
+- **Suggestions** - As you type, the editor suggests what you might want to write next
+- **Find and replace** - Search for words in your code and change them
+- **Multiple spots** - Edit several places at once
 
-    Professional code editing with modern features:
-    - **Syntax highlighting** - Support for all major programming languages
-    - **Auto-completion** - Intelligent code suggestions
-    - **Multiple cursors** - Simultaneous editing at multiple locations
-    - **Find and replace** - Advanced search within files
+### Using the Terminal
 
-  </Accordion>
+At the bottom, you can open a terminal to run commands:
+- Open multiple terminal tabs for different tasks
+- Make it bigger or smaller by dragging
+- See commands you ran before
+- Run commands without leaving your code
 
-  <Accordion title="Terminal Access" icon="terminal">
-    ### Integrated Command Line
+## What You Can Do With Files
 
-    Execute commands without leaving your coding environment:
-    - **Multiple terminal tabs** - Different command sessions
-    - **Resizable panels** - Adjust terminal size as needed
-    - **Command history** - Access to previous commands
-    - **Environment integration** - Full project context
+You can manage your files in many ways:
+- **Create** - Make new files and folders
+- **Delete** - Remove files you don't need
+- **Rename** - Change file names
+- **Upload** - Drag files from your computer into the editor
+- **Search** - Find files quickly by name
 
-  </Accordion>
-</AccordionGroup>
+### Reviewing AI Changes
 
-## File Operations
-
-<BadgeGroup>
-  <Badge variant="secondary">Create Files/Folders</Badge>
-  <Badge variant="secondary">Delete/Rename</Badge>
-  <Badge variant="secondary">Drag & Drop Upload</Badge>
-  <Badge variant="secondary">File Locking</Badge>
-  <Badge variant="secondary">Diff Approval</Badge>
-</BadgeGroup>
-
-### File Management Features
-
-- **Context menus** - Right-click for quick operations
-- **Drag and drop** - Upload files from your computer
-- **File locking** - Prevent conflicts in team environments
-- **Search integration** - Quick file location
-- **Diff approval workflow** - Review and approve AI-generated file changes before applying them
-
-### Diff Approval Workflow
-
-CodinIT now includes an optional diff approval system that lets you review AI-generated changes before they're applied to your files:
-
-- **Visual diff comparison** - See exactly what changes the AI wants to make
-- **Side-by-side view** - Compare before and after versions inline
-- **Approve or reject** - Full control over which changes get applied
-- **Syntax highlighting** - Language-aware diff display for better readability
+When the AI wants to change your files, you can review the changes first:
+- **See the differences** - Compare the old and new versions side by side
+- **Approve or reject** - Choose which changes to keep
+- **Colored highlights** - See exactly what's being added or removed
 
 <Callout type="info">
-  **Enable Diff Approval**: Toggle this feature in Settings → Features to review all AI file changes before they're applied to your project.
+  **Review Changes**: Turn on diff approval in Settings → Features to check all AI changes before they're saved to your files.
 </Callout>
diff --git a/features/development/terminal.mdx b/features/development/terminal.mdx
@@ -1,94 +1,65 @@
 ---
 title: Terminal
-description: Advanced terminal emulation with full command-line integration, multiple sessions, and seamless project environment access.
+description: Type commands to control your project, just like a computer's command line
 ---
 
-The Terminal Interface provides a fully-featured command-line environment directly within your development workspace, enabling seamless execution of build commands, package management, and system operations.
+The Terminal is like a text-based remote control for your project. Instead of clicking buttons, you type commands to tell your computer what to do.
 
-## Overview
+## What is the Terminal?
 
-Built on XTerm.js, the terminal component offers professional-grade terminal emulation with support for multiple sessions, theming, and interactive command execution. It integrates deeply with your project's environment, providing access to all development tools and scripts.
+Think of the Terminal as a way to talk directly to your computer using text commands. It's like texting your computer to ask it to do things.
 
 <CardGroup cols={3}>
-  <Card title="Command Execution" icon="terminal">
-    Run build scripts, package managers, and development tools
+  <Card title="Run Commands" icon="terminal">
+    Tell your computer what to do by typing
   </Card>
-  <Card title="Session Management" icon="layers">
-    Multiple terminal tabs for different workflows
+  <Card title="Multiple Tabs" icon="layers">
+    Open several terminals at once
   </Card>
-  <Card title="Theme Integration" icon="palette">
-    Consistent theming with your development environment
+  <Card title="See Results" icon="palette">
+    Watch what happens when you run commands
   </Card>
 </CardGroup>
 
-## Key Features
+## What Can You Do?
 
-<AccordionGroup>
-  <Accordion title="Terminal Emulation" icon="monitor">
-    ### Advanced Terminal Capabilities
+### Running Commands
 
-    Professional terminal emulation supporting:
-    - **Full ANSI escape sequences** - Rich text formatting and colors
-    - **Mouse support** - Interactive terminal applications
-    - **Unicode support** - International character display
-    - **Web links** - Clickable URLs in terminal output
+You can type commands to:
+- Start your app so you can see it working
+- Install new tools and libraries
+- Check if your code has any problems
+- Save your work to GitHub
 
-  </Accordion>
+### Common Commands
 
-  <Accordion title="Environment Integration" icon="cog">
-    ### Project Environment Access
+Here are some commands you might use:
+- `npm install` - Download tools your project needs
+- `npm start` - Start your app
+- `npm test` - Check if everything works correctly
+- `git status` - See what files you've changed
 
-    Complete access to your development environment:
-    - **Project directory** - Automatic navigation to workspace
-    - **Environment variables** - Access to configured variables
-    - **Installed tools** - Node.js, npm, git, and other tools
-    - **File permissions** - Full read/write access to project files
+### Using Multiple Terminals
 
-  </Accordion>
+You can open several terminal tabs at once, like having multiple conversations:
+- One tab runs your app
+- Another tab runs tests
+- A third tab is ready for quick commands
 
-  <Accordion title="Interactive Features" icon="zap">
-    ### Enhanced User Experience
+This way, you don't have to stop one thing to do another.
 
-    Modern terminal features for improved productivity:
-    - **Command history** - Navigate through previous commands
-    - **Auto-completion** - Intelligent command suggestions
-    - **Search functionality** - Find text within terminal output
-    - **Copy/paste support** - Standard clipboard operations
-    - **Live action console** - Real-time streaming output for running commands
+### Helpful Features
 
-  </Accordion>
+The terminal has some handy tricks:
+- **Command history** - Press the up arrow to see commands you typed before
+- **Copy and paste** - Copy text in and out of the terminal
+- **Search** - Find specific text in the terminal output
+- **Live updates** - See results appear as they happen
 
-  <Accordion title="Live Action Console" icon="activity">
-    ### Real-Time Command Monitoring
-
-    Monitor command execution with live streaming output:
-    - **Real-time output** - See command output as it happens
-    - **Progress tracking** - Visual progress indicators for long-running tasks
-    - **Command context** - Know which command is currently executing
-    - **Streaming display** - Continuous output updates without page refresh
-
-    <Callout type="info">
-      **Enable Live Console**: Toggle this feature in Settings → Features to see real-time command output in a floating console.
-    </Callout>
-
-  </Accordion>
-</AccordionGroup>
-
-## Usage Modes
-
-<BadgeGroup>
-  <Badge variant="secondary">Read-Write Mode</Badge>
-  <Badge variant="secondary">Read-Only Mode</Badge>
-  <Badge variant="secondary">Background Execution</Badge>
-</BadgeGroup>
-
-### Terminal States
-
-- **Active Session** - Full command execution and interaction
-- **Read-Only** - Output display without input capability
-- **Background** - Commands running without visible interface
+<Callout type="info">
+  **Live Console**: Turn on the live console in Settings → Features to see command results in a floating window while you work.
+</Callout>
 
 <Callout type="tip">
-  **Pro Tip**: Use multiple terminal tabs to run development servers, build processes, and testing simultaneously
-  without switching contexts.
+  **Quick Tip**: Open multiple terminal tabs to run your app in one tab while typing other commands in another tab.
 </Callout>
diff --git a/features/development/webcontainer.mdx b/features/development/webcontainer.mdx
@@ -1,83 +1,53 @@
 ---
 title: WebContainer
-description: Manage multiple development server instances with seamless port switching and real-time preview management for complex applications.
+description: Switch between different parts of your app while it's running
 ---
 
-Manage multiple development server instances running in WebContainer environments. The port dropdown provides seamless switching between different preview instances and server configurations.
+WebContainer lets you run your app and see it working. If your app has multiple parts (like a website and a backend), you can easily switch between them.
 
-## Overview
+## What is WebContainer?
 
-When running multiple development servers or microservices, the WebContainer Preview Management system allows you to switch between different application instances with a simple dropdown interface.
+Think of WebContainer like a mini computer inside CodinIT. It runs your code and shows you what it looks like, just like opening a website in your browser.
 
 <CardGroup cols={3}>
-  <Card title="Port Selection" icon="hash">
-    Quick switching between server instances
+  <Card title="Switch Views" icon="hash">
+    Jump between different parts of your app
   </Card>
-  <Card title="Instance Management" icon="server">
-    Multiple preview environments
+  <Card title="Multiple Parts" icon="server">
+    Run several things at once
   </Card>
-  <Card title="Status Indicators" icon="activity">
-    Active preview identification
+  <Card title="See What's Active" icon="activity">
+    Know which part you're looking at
   </Card>
 </CardGroup>
 
-## Preview Management
+## How to Use It
 
-<AccordionGroup>
-  <Accordion title="Port Organization" icon="list-ordered">
+### Switching Between Parts
 
-    ### Server Instance Selection
+When your app is running, you might see different "ports" (think of them as different doors to your app). You can click a dropdown to switch between them.
 
-    Organized access to all running preview instances:
-    - **Port-based sorting** - Numerical ordering of available ports
-    - **Active indication** - Clear highlighting of current preview
-    - **Quick switching** - One-click navigation between instances
-    - **Instance persistence** - Maintains selection across sessions
+- Click the port number to see all available parts
+- Select the one you want to view
+- Your preview updates instantly
 
-  </Accordion>
+### When You Need Multiple Parts
 
-  <Accordion title="Multi-Server Support" icon="network">
+Some apps have different pieces that work together:
 
-    ### Complex Application Management
+- **Website** - What users see and click on
+- **Backend** - The part that handles data and logic
+- **Tools** - Extra helpers for testing or building
 
-    Handle applications with multiple server components:
-    - **Frontend servers** - Main application interfaces
-    - **API servers** - Backend service endpoints
-    - **Development tools** - Additional development servers
-    - **Microservices** - Individual service previews
+You can view each part separately to make sure everything works correctly.
 
-  </Accordion>
+### Navigating Your App
 
-  <Accordion title="Navigation Integration" icon="link">
-
-    ### Address Bar Integration
-
-    Seamlessly integrated with preview navigation:
-    - **URL path support** - Navigate within selected instance
-    - **Port preservation** - Maintains port context during navigation
-    - **Reload functionality** - Refresh current preview instance
-    - **External access** - Open previews in new tabs/windows
-
-  </Accordion>
-</AccordionGroup>
-
-## Usage Scenarios
-
-<BadgeGroup>
-  <Badge variant="secondary">Full-Stack Apps</Badge>
-  <Badge variant="secondary">Microservices</Badge>
-  <Badge variant="secondary">Multi-Tenant Apps</Badge>
-  <Badge variant="secondary">Development Tools</Badge>
-</BadgeGroup>
-
-### Common Use Cases
-
-- **Full-stack applications** - Frontend and backend servers
-- **Microservice architectures** - Multiple service endpoints
-- **Development tooling** - Build tools, testing servers
-- **Multi-environment** - Different configurations
+Once you pick a part to view:
+- Type URLs in the address bar to visit different pages
+- Click the refresh button to reload
+- Open in a new tab to see it in your regular browser
 
 <Callout type="info">
-  **Port Management**: The port dropdown automatically detects and lists all available WebContainer preview instances,
-  making it easy to switch between different parts of your application during development.
+  **Easy Switching**: CodinIT automatically finds all the running parts of your app. Just pick the one you want to see from the dropdown menu.
 </Callout>