Edit your site.
Right from your machine.

Adding a Site

Click the connection badge in the top-right corner (or the Connect to Site button on the welcome screen) to open the connection dialog. You'll need:

• Site Name — a label for this connection (e.g., "My Blog")
• FTP Host — your server address (e.g., ftp.yourhost.com)
• Port — auto-set based on protocol (21 for FTP, 990 for FTPS, 22 for SFTP)
• Username and Password — your FTP/SFTP credentials
• Starting Directory — optional root path (e.g., /public_html)
• Site URL — your live website URL (enables Live Preview)
• Protocol — FTP, FTPS, or SFTP

Choosing a Protocol

Where to Find Your Credentials

Your FTP/SFTP credentials are typically found in:

• cPanel: FTP Accounts section — your host, username, and password are listed there
• Hosting welcome email: Most providers send FTP details when you sign up
• Plesk: Websites & Domains → FTP Access
• Custom VPS: Use your SSH username/password with SFTP on port 22

Multiple Sites

PageWright saves all your site connections locally. Click the connection badge to see the dropdown list of saved sites and switch between them. Each site remembers its own host, credentials, starting directory, and URL.

You can also run multiple PageWright windows simultaneously — each opens on its own port (3000, 3001, etc.) so you can work on several sites at once.

Credential Security

Your passwords are encrypted with AES-256-GCM and stored in a local file. The encryption key is generated uniquely on your machine. No credentials are ever transmitted to any server other than your own FTP/SFTP host.

Opening Files

Click any file in the file tree (left sidebar) to open it in the editor. Files open in tabs — you can have multiple files open at once and switch between them. Double-click a file in the folder view to open it as well.

The Editor

PageWright uses the Monaco editor, the same engine that powers VS Code. You get:

• Syntax highlighting for HTML, CSS, JavaScript, PHP, JSON, XML, Markdown, Python, and 50+ other languages
• IntelliSense — auto-completion for HTML tags, CSS properties, and JavaScript
• Bracket matching — matching brackets and tags are highlighted
• Multi-cursor editing — hold Alt and click to add cursors
• Minimap — bird's-eye view of your file on the right edge
• Word wrap — long lines wrap to fit the window
• Find & Replace — Ctrl+H for in-file find and replace

Saving

Press Ctrl+S to save the current file. This uploads the file to your server immediately. A backup is created automatically before each save.

The save status indicator in the title bar shows:

• No dot — file is saved and up to date
• Yellow dot — unsaved changes

Find in Files

Press Ctrl+Shift+F to search across all files on your site. This is useful for finding where a class is used, tracking down a string, or preparing for a global replacement.

You can also right-click on a folder or selection in the file tree and choose Find in Selected to narrow the search scope.

Instant Preview

The preview pane on the right shows a live rendering of your HTML as you type. It updates automatically after a brief pause. CSS changes are reflected in real-time too — if your stylesheet is cached, PageWright inlines it into the preview.

For non-previewable files (JavaScript, JSON, text files, etc.), the preview pane automatically hides to give you full-width editing space. Use the 👁 Preview button in the toolbar to toggle it manually.

Live Server Preview

Click the 🌐 Live button to see your actual live site rendered in the preview pane. This is especially useful for PHP files — the Instant Preview can only show the HTML structure, but Live Preview shows the fully rendered page from your server.

HTML/CSS Validation

Click the Validate tab in the preview pane to see real-time validation results. Monaco checks for:

• Unclosed or mismatched HTML tags
• Invalid CSS properties or values
• JavaScript syntax errors
• Vendor prefix warnings and compatibility issues

Warnings and errors also appear as squiggly underlines directly in the editor.

Color Picker

The Colors tab extracts every color value from your file and displays them visually. Click any color to copy its hex value to your clipboard.

Image Preview

Click an image file in the file tree to see it rendered in the preview pane with its dimensions displayed.

Image Editor

Crop, resize, rotate, flip, and adjust brightness, contrast, and saturation — all without leaving PageWright. Remove background colors with the Color-to-Transparent tool. Save overwrites the original; Save As creates a copy and offers to update all <img src> references in your open HTML files automatically. The image opens full-pane with its own tab and unsaved-changes indicator.

File Tree

The left sidebar shows your site's file structure. Click folders to expand them. Click files to open them in the editor. The tree auto-sizes its width to fit your longest filename.

Folder View

Below the file tree, the main area shows a detailed folder view with columns for name, size, and modification date. Click column headers to sort. This view supports:

• Multi-select — hold Ctrl to select multiple files
• Drag & drop — drag files between folders to move them
• Upload — drag files from your desktop into the folder view
• Split pane — open two folder views side by side for easy file organization

Right-Click Menu

Right-click on any file or folder in the tree or folder view to access:

• New File — create a blank file in this directory
• New Folder — create a subdirectory
• Upload Here — upload files to this directory
• Rename — rename the selected item
• Duplicate — copy a file with a new name
• Delete — remove the file or folder (with confirmation)

Broken Link Checker

Click 🔗 Check Links in the toolbar to scan your site for broken internal links. PageWright crawls all HTML and PHP files, extracts links and image sources, and checks if the targets exist on your server. Results show each broken reference with the file it was found in.

How Backups Work

Every time you save a file, PageWright downloads the current server version and stores it locally before uploading your changes. This means you can always get back to any previously saved state.

Browsing Backups

Click 🗄 Backups in the toolbar to see all backups for the current file. Each entry shows the timestamp when the backup was created. You can:

• Preview — view the backed-up version in the preview pane
• Restore — upload the backed-up version back to your server, replacing the current file

Backup Storage

Backups are stored locally on your machine in the backups folder, organized by site name and file path. They take up minimal space (they're just text files), and you can delete old ones manually if needed.

Multiple Instances

You can open PageWright multiple times to work on different sites simultaneously. Use File → New Window or press Ctrl+Shift+N to launch a new instance. Each instance automatically finds an open port (3000, 3001, 3002, etc.). A built-in site lock system prevents two instances from connecting to the same FTP server at the same time, avoiding file conflicts.

Running from Node.js

If you prefer the browser-based version, you can run PageWright without the desktop wrapper:

cd pagewright
npm install      # first time only
npm start        # starts the server

Then open http://localhost:3000 in your browser. This works on Windows, macOS, and Linux.

Configuration Files

In the desktop app, these are stored in %APPDATA%\PageWright. In Node.js mode, they're in the pagewright folder.

Visual Editing

For HTML files, click the ✏️ Visual Edit button to make the preview pane content-editable. You can click and type directly in the rendered page, and your changes sync back to the code editor. Useful for quick text corrections.

Troubleshooting

Can't connect to my server

• Double-check your host, username, and password
• Try a different protocol — some hosts only support SFTP, not FTP
• Make sure your IP isn't blocked by your host's firewall
• Check that the port is correct (21 for FTP, 22 for SFTP, 990 for FTPS)

Preview shows broken images

• PageWright proxies images through the server — make sure you're connected
• Images using absolute URLs to external sites will work normally
• PHP-generated images won't appear in Instant Preview — use Live Preview instead

Live Preview shows a blank page

• Make sure you've set the Site URL in your connection settings
• The URL should start with https:// or http://
• Some sites block embedding — Live Preview strips X-Frame-Options headers, but very strict CSP headers may still block it

Keyboard Shortcuts

PageWright inherits all of Monaco's keyboard shortcuts. Press F1 to open the command palette and search for any action.