📖 ForgeEdit User Guide

⚡ Welcome to ForgeEdit

ForgeEdit is a professional web IDE that runs entirely in your browser. Write code in 22+ languages, manage files, connect to remote servers, create documents, convert media, and collaborate with your team — all from one interface.

This guide walks you through every feature using real workflows. If you're new, start here and work through the Getting Started section. If you already know the basics, use the sidebar to jump to any topic.

🔑 Signing In

When you open ForgeEdit, you'll see the login screen. Enter your username and password, then click Sign In.

You can also create a new account by clicking Create Account. Depending on your organization's settings, new accounts may need admin approval before activation.

📂 Your Workspace

After signing in, you land in the IDE. On the left is your file explorer showing your personal workspace. Every user has their own private file space — your files are only visible to you.

The center area is the code editor, where you'll spend most of your time. When no files are open, you'll see a welcome screen with quick links to common actions.

🧭 Navigating the IDE

The interface is organized into five main areas:

🔍 Command Palette

Press Ctrl+K (or Cmd+K on Mac) to open the Command Palette — a searchable list of every available action. Start typing what you want to do (e.g., "new file", "ftp", "export", "vault") and select from the filtered results. It's the fastest way to access anything.

⌨️ Keyboard Shortcuts

✏️ Opening & Editing Files

Click any file in the file explorer to open it in the editor. The file appears as a tab at the top — you can have many files open at once and switch between them freely.

The editor automatically detects the file type and provides matching syntax highlighting, bracket matching, auto-closing brackets, code folding, and active line highlighting.

📑 Working with Tabs

Each open file gets its own tab. A dot indicator appears on tabs with unsaved changes. Click the × on a tab to close it — you'll be asked to confirm if there are unsaved changes.

Use the ⛶ Expand button in the tab bar to go full-screen for distraction-free coding. Press Escape to return to normal view.

✂️ Selection Toolbar

A floating toolbar that appears whenever text is selected in the editor. On mobile, long-press a word to select it and open the toolbar. On desktop, click-drag or use Shift+arrows to select text.

The toolbar stays visible as long as text is selected — it only disappears when you press ✕ or tap outside the editor. On mobile, after long-pressing to select a word, you can slide along the text to extend the selection or tap additional words.

📝 Scratchpad

The Scratchpad is a quick-access editor that isn't tied to any file. It's perfect for:

• Pasting and formatting code snippets
• Drafting code before saving it as a file
• Quick experiments and throwaway notes

Use the language dropdown in the scratchpad toolbar to switch between 22+ languages. When you switch, the editor updates syntax highlighting and shows a starter template for that language as placeholder text.

From the scratchpad toolbar you can: Check syntax, Import from a file, Save as a new file, Export as a download, or Clear everything.

🌐 Supported Languages

ForgeEdit provides full syntax highlighting and editing support for 22+ languages:

Each language has its own file icon and color in the explorer, and the editor automatically detects the correct mode from the file extension.

🔎 Find & Replace

Press Ctrl+F to open the find bar at the top of the editor. Matching text highlights throughout the file as you type. Press Ctrl+H to also show the replace field.

Toggle buttons in the find bar enable: regular expressions, case-sensitive matching, and whole-word matching. All matches are highlighted in the scrollbar gutter for quick navigation.

🔍 Syntax Checking

Click ▶ Check in the top bar or scratchpad toolbar, or use the Command Palette to run a syntax check on the current file. Errors appear in the Problems panel at the bottom of the editor with line numbers and descriptions.

Click any error to jump directly to that line in the editor.

📄 Creating Files & Folders

There are several ways to create new files and folders:

• Right-click in the file explorer → New File or New Folder
• Use the Command Palette (Ctrl+K) → type "new file"
• Click the 📄 or 📁 icons at the top of the explorer

You can also rename, duplicate, and delete files from the right-click context menu. Deleting a folder removes everything inside it — a confirmation dialog always appears first.

⬆️ Uploading & Downloading

Uploading Files

Three ways to get files into your workspace:

1. Click the ⬆ Upload button in the top bar
2. Right-click a folder in the explorer → Upload
3. Drag and drop files directly onto the file explorer

Files are uploaded into whichever folder you have selected.

Downloading Files

Right-click any file → Download, or click the ⬇ Export button in the top bar to download the currently open file.

📦 Moving & Organizing Files

To move a file or folder to a new location:

1. Right-click the file or folder in the explorer
2. Select 📦 Move to...
3. A full-screen folder browser opens — navigate to the destination
4. Click Move Here to complete the move

If the moved file is open in a tab, the tab path updates automatically.

📦 Zip Import & Export

Importing: Use the top-bar "📦 Zip" button or the Command Palette's "Import Zip" command. Upload a .zip file and it extracts into the current folder, preserving all directory structure.

Exporting: Right-click any folder → "Export as Zip" to download the entire folder and its contents as a .zip archive.

You can also right-click any .zip file already in your workspace and choose Extract to unpack it in place.

📸 Snapshots

Snapshots save a point-in-time copy of any file — like a mini version control system.

1. Open the 🕐 Snapshots panel from the activity bar
2. Click Create Snapshot on any open file
3. To restore later, find the snapshot in the list and click Restore

Each snapshot records the complete file contents and a timestamp. Great for safeguarding work before making big changes.

🔍 Search Across Files

Open the 🔍 Search panel from the activity bar to search across every file in your workspace. Results show the filename, line number, and a preview of matching content.

Click any result to open the file and jump directly to that line. Supports case-sensitive and regular expression search via toggle checkboxes.

📝 Word Processor

A full rich-text document editor built right into the IDE. Open it from the 📝 icon in the activity bar.

✍️ Formatting

The formatting toolbar gives you control over every aspect of your text:

🖼️ Image Editing

Click any image in your document to open the Image Adjustment Panel with controls for:

• Size — width, height, lock aspect ratio
• Appearance — opacity, rounded corners, rotation
• Border — width, color, style
• Shadow — blur, color, X/Y offset
• Alignment — inline, float left, center, float right
• Filters — brightness, contrast, saturation, blur, grayscale, sepia

All changes preview live as you adjust sliders. Use Reset All to revert to defaults.

💾 Saving & Exporting

Save documents to your workspace with the 💾 Save button — a folder browser lets you pick the destination and filename. Export in multiple formats: PDF, HTML, DOCX, or Plain Text.

📋 Context Menu

Right-click (or long-press on mobile) inside the document for quick access to clipboard operations, formatting shortcuts, alignment, and heading styles.

🔐 Secure Vault

The Vault is a secure file sharing system. Upload a file and receive a unique redemption code. Share the code with anyone — they can download the file one time using the public Share/Redeem page.

How to Share a File Securely

1. Open the 🔐 Vault panel from the activity bar
2. Upload a file — optionally choose a folder and add a note
3. Copy the generated redemption code
4. Send the code to your recipient — they redeem it at the Share page for a one-time download

Organizing Your Vault

Create folders to organize vault files by project or category. Use the folder dropdown to navigate between them, and the breadcrumb trail to go back. Attach notes or identifiers to files for easy reference — you can edit notes anytime with the 📝 button.

Standalone Access

There's also a Vault Portal — a dedicated interface for quick file sharing without loading the full IDE. Access it from the login screen or via direct URL.

🌐 FTP / SFTP Client

Connect to remote servers to browse, upload, download, and manage files over FTP or encrypted SFTP.

How to Connect

1. Open the 🌐 FTP panel from the activity bar
2. Select your protocol: FTP (port 21) or 🔒 SFTP (port 22) — the port auto-switches when you change protocol
3. Enter your server host, username, and password
4. Optionally set a starting path (e.g., /var/www/html)
5. Click 🔗 Connect

Once connected, you get a full remote file browser. You can download files to edit in the IDE, upload files from your workspace, create and delete directories, and manage remote files. Your connection persists for the duration of your session.

The connection status shows the protocol — 🔒 SFTP Connected or FTP Connected — along with the host. A 💾 Save button lets you save the current connection for quick access later.

💾 Saved Hosts

Save frequently used server connections for one-tap reconnection. Saved Hosts appear as a collapsible list at the top of both the FTP panel and the Remote Shell panel.

Saving a Connection

1. Connect to a server via FTP or SFTP
2. Click the 💾 Save button next to the Disconnect button
3. Enter a label for the connection (e.g., "Production Server" or "Staging")
4. The host, port, protocol, username, password, and starting path are all stored

Quick Connect

Click any saved host to auto-fill all fields and connect instantly. Each host displays a color dot, protocol icon (🔒 for SFTP, 🌐 for FTP), label, host:port, and username. You can delete hosts with the 🗑️ button.

Passwords are stored with base64 encoding in your per-user data directory. The host list tracks last-used timestamps so your most recent connections are easy to find.

🖥️ Remote Shell

Run commands on your own server directly from ForgeEdit. This gives every user their own full server-side execution environment — compile code, run scripts, manage packages, or do anything your server supports.

Setting Up Remote Shell

1. Open the 🖥️ Remote Shell panel from the activity bar
2. Enter your server's FTP credentials and click 🔗 Connect to Server
3. Click 🔑 Generate to create a secure auth token (automatically copied to your clipboard)
4. Click 🚀 Deploy to Server — the agent is uploaded to your server automatically via FTP
5. The web URL is auto-filled — click 🔗 Connect to Agent to go live

Once connected, open the Terminal and switch to 🌐 Remote mode (the purple prompt). You now have full shell access to your server.

Already Set Up?

If you've previously deployed a remote agent, use the "Already Deployed?" section at the bottom of the Remote Shell panel. Enter the agent URL and your auth token to reconnect instantly.

⚡ Snippets

Save reusable command templates for one-click execution in the terminal. Open the ⚡ Snippets panel from the activity bar.

Creating a Snippet

1. Click ➕ New Snippet in the panel header
2. Enter a label (e.g., "Deploy to production"), the command, an optional description, and comma-separated tags
3. Pick a color for visual organization
4. Click Save

Variables

Use {{variable_name}} syntax in your commands to create dynamic placeholders. When you run the snippet, you'll be prompted to fill in each variable before execution.

For example: ssh {{user}}@{{host}} -p {{port}} will prompt for user, host, and port values each time you run it.

Running Snippets

Click the ▶ Run button on any snippet. If the terminal is open, the command is injected and executed directly. Otherwise, it's copied to your clipboard. You can also use 📋 Copy to grab the raw command text.

Snippets are searchable by label, tags, or command text. They're sorted with recently-used snippets at the top.

💻 Terminal

The terminal panel slides up from the bottom of the IDE. Toggle it with Ctrl+` or the 💻 icon in the activity bar.

Three execution modes are available, switchable via buttons in the terminal header:

Status Indicators

Colored dots next to each mode button show real-time availability:

• 🟢 Green — Connected and ready
• 🟠 Amber — Access available but execution restricted by host settings
• ⚫ Dim — Not available (not connected or insufficient permissions)

Built-in Commands & History

Available in all modes: clear (clear screen), status (show all modes and their availability), mode (show current mode), help (show available commands), info (show server details in Remote mode).

Use ↑ and ↓ arrow keys to navigate through your command history.

🚀 App Preview

A built-in browser and development toolkit for building and previewing web apps. Open the 🚀 App Preview panel from the activity bar.

Live Site Preview

Enter any URL to open it in a full viewport within the editor. If you're connected via FTP/SFTP, the host is auto-detected as a starting URL. Use the address bar to navigate, and the toolbar buttons to go back, forward, or refresh. Close the preview with ✕ to return to your editor.

Quick Launch

One-tap buttons to preview common paths: Homepage (/), index.php, api.php, or the currently open file on your connected server.

Viewport Sizes

Resize the preview iframe to test responsive layouts: 📱 iPhone (375×667), 📱 iPad (768×1024), 💻 Laptop (1024×768), or 🖥️ Full width.

Starter Templates

Insert production-ready code templates directly into your active editor or scratchpad: HTML5 Boilerplate, PHP CRUD API, CSS Flex/Grid Layout, Fetch API Pattern, SQLite Database Helper, and Session Auth. Templates insert at the cursor position.

CDN Quick-Add

Insert popular CDN script/link tags with one click: Tailwind CSS, Alpine.js, HTMX, Bootstrap 5, jQuery, Chart.js, Font Awesome, and Animate.css. Tags insert at cursor or copy to clipboard if no editor is active.

💬 Messaging

Send and receive messages with other users on the system. Open the 💬 Messages panel from the activity bar.

Connecting with Users

Before messaging someone, you need to exchange connection codes. Go to the Contacts tab, copy your connection code, and share it with the other person. When they add your code (and you add theirs), you're connected and can start messaging.

Conversations

Messages display in an email-style thread view. You can compose new messages with a subject line, or reply directly to existing threads. The 💬 icon in the activity bar shows an unread badge when you have new messages.

Group members who share the same group are auto-connected and can message each other without exchanging codes.

🔧 Developer Tools

Access from the 🧰 Tools panel in the activity bar. A suite of utilities for everyday development tasks:

🎮 Game Dev Tools

A suite of utilities for game developers and creative coders. Access from the 🧰 Tools panel → 🎮 Game Dev.

🎬 Media & Conversion Tools

🖼️ Image Converter

Batch convert images between formats: PNG, JPG/JPEG, WebP, GIF, and BMP. Select your target format, adjust quality settings for lossy formats, and download converted files instantly.

Includes Marketplace Presets for one-click resizing to eBay, Amazon, Instagram, YouTube, and other platform specifications.

🎵 Audio Converter

Convert audio files entirely within your browser — nothing is uploaded to external servers. Your audio stays private.

📊 File Intel

Drop any file to inspect its metadata. For images: dimensions, color depth, and camera data. For all files: type, size, and encoding information.

👥 Roles & Tiers

ForgeEdit uses a role and tier system to manage access. Your role determines what you can manage, and your tier determines which features are available to you.

Roles

Tiers

Individual features can be toggled on or off for any user by admins or diplomats, giving fine-grained control beyond the tier defaults.

👥 Team Management

If you're an Admin, Diplomat, or Group Leader, you can manage team members from the 👥 Users panel.

The Users panel provides a visual folder-based view of all users organized by tier and registration date. From here you can:

• View all users with status badges, roles, and group assignments
• Edit a user's role, tier, and group
• Reset passwords for team members
• Toggle features on or off for individual users
• Enable or disable accounts
• Approve or deny pending registrations
• Create new accounts directly

🔑 Invite Keys

Invite keys let you onboard new team members without the approval waiting period. Each key is a unique code that instantly activates a new account when redeemed during registration.

Creating & Sharing Keys

1. Go to the 👥 Users panel → Keys tab
2. Select the tier and group for the new key
3. Optionally add a label (e.g., "For Sarah" or "Onboarding batch 3")
4. Click Generate — the key is created and ready to share
5. Send the key to the new user — they enter it during registration for instant activation

Keys can only be used once. After use, the key record shows who redeemed it and when. Unused keys can be deleted at any time.

You can also create direct registration links that pre-fill the invite key for a seamless onboarding experience.

🎛️ Feature Controls

Admins and Diplomats can toggle individual features on or off for any user, giving fine-grained control beyond tier defaults. This lets you grant specific tools to an Individual-tier user, or restrict certain features for a specific team member.

From the Users panel, click the 🎛️ Features button on any user to see all available features with toggle switches. Changes take effect immediately — no restart or re-login needed.

📈 Analytics Admin

Track visitor activity, session behavior, and usage patterns across your ForgeEdit installation. Access from the 👥 Users panel → 📈 Analytics tab.

The analytics dashboard shows:

Analytics data is stored locally in daily JSON files — no external services or tracking pixels required.

📜 Activity Log Admin

The Activity Log tracks all significant actions across the system, including: file saves, uploads, deletions, user management actions, login attempts, terminal commands, and vault operations.

Access it from the 👥 Users panel → 📜 Audit Log tab. Each entry shows a color-coded action type, timestamp, and file path or details. Actions are color-coded: green for saves, blue for creates, purple for logins, orange for renames, and red for deletions.

The activity log is invaluable for tracking changes, troubleshooting issues, and maintaining team accountability.