Code Online
Visual block-based web editor to create, manage and export professional PHP/HTML sites — with a full authentication system, subscription plans and account management.
Introduction
Code Online is a Windows desktop app built with .NET 10, WPF and Microsoft WebView2. It lets you visually build web pages by drag & dropping blocks, edit source code live, generate PHP backend code, and now features a account sign-in and subscription features.
Core Features
System Requirements
- Windows 10 or Windows 11 (64-bit)
- Minimum 4 GB RAM recommended
- 500 MB available disk space
- Internet connection for sign-in, account services and update checks
- Optional: WampServer or XAMPP for local PHP projects and previews
Installation & Setup
Follow these steps to set up Code Online and your local development environment.
Register at online-corps.net/signup/ to get your credentials. A Free account gives immediate access.
Install WampServer or XAMPP only if your project needs a local PHP preview.
Open the app. The sign-in screen appears automatically. Enter your username or email and password.
Open Settings and choose the workspace folder you want to use.
Return to the home screen, click + New Project and give it a name. It appears in your Projects list.
Choose a workspace
Select the folder you want to work in from Settings. Code Online does not require a particular folder path.
Sign In
Sign in with your account to use account and subscription features. Guest access is available if you want to continue without signing in.
Keep your account safe
- Use a unique password and do not share it with anyone.
- Never send passwords or verification codes in screenshots, email, or support requests.
- Sign out when using a shared device.
- Some account features require an internet connection.
Account Page
Use the Account tab to review and manage your account and subscription options.
Account actions
- Open your account page from the sidebar.
- Use the account website to manage profile details or recover access.
- Sign out when you finish on a shared device.
Subscription Plans
Code Online offers three plans. Plan data is verified in real time against your account on online-corps.net every time the app launches.
Level Up Button
Free users see a Level Up button below the Docs entry in the sidebar. Clicking it opens the pricing modal with your current plan highlighted, current subscription information, and a direct link to online-corps.net/subscription/ to upgrade.
Plan Expiration
- If a paid plan expires, it automatically downgrades to Free
- Your current plan is reflected in the account page
- Lifetime subscriptions use the date
3000-01-01and display Lifetime ∞
Project Management
The Hub lists the projects available in the workspace you selected in Settings.
Create and open projects
- Choose + New Project and enter a name and description.
- Select a project in the Hub to open its files in the editor.
- Use Settings to select a different workspace when needed.
Delete a project
Use the project menu and choose Delete. Review the confirmation carefully; deletion removes the selected project and its contents.
Open an Existing Project
Choose an existing workspace or project from the Hub. Code Online will display supported projects that you can access.
Visual Editor
The editor has 3 real-time switchable views: Visual, Code and Preview. Changes in one view are automatically reflected in the others.
File Explorer
- Single click — select a file
- Double click — open the file in the editor
- Right-click on file — Open · Rename · Delete
- Right-click on folder — New file · PHP · Subfolder · Rename · Delete
- Right-click on empty area — New file · PHP · Folder
47 Available Blocks
Blocks are organized into 3 categories: Headers, Body and Footers. Click or drag a block from the right panel to add it to the canvas.
Block Customization
The customization panel opens via the button on each block or via right-click → Customize…. It has 3 tabs.
h1–h6, p, a,
button… in the block. Click → inline field. Enter to confirm, Escape to
cancel.
Available Theme Palettes
Code Editor
The built-in code editor supports HTML, PHP, CSS, JS, JSON, XML, SVG, TXT and Markdown.
- Line numbers synchronized with scroll
- Format (Alt+F) — automatic HTML indentation
- Copy — copies code to clipboard
- Tab — inserts 2 spaces
- Dynamic language badge at the top left
- Real-time sync to the canvas (debounce 600ms)
Backend Builder
The Backend Builder provides a visual workspace for assembling PHP features from reusable components.
Backend Templates
The Backend Builder includes starter templates for common site features.
Settings
Workspace
Choose the workspace folder you want to use. You can change this selection at any time.
Supported Languages
- English
- French
- Japanese
Keyboard Shortcuts
All shortcuts work within the editor window.
Editor — Global
| Shortcut | Action |
|---|---|
| Ctrl + S | Save the current file |
| Ctrl + 1 | Switch to Visual view |
| Ctrl + 2 | Switch to Code view |
| Ctrl + 3 | Switch to Preview view |
| Ctrl + B | Open the block library |
| Ctrl + P | Open the Backend Builder |
| Alt + F | Format HTML code |
| Escape | Close active modal / overlay |
File Explorer
| Action | Result |
|---|---|
| Single click | Select the file |
| Double click | Open the file in the editor |
| Right-click | Context menu (create · rename · delete) |
Style Library
Code Online provides shared styles for visual blocks, including reusable themes, layout helpers and component styles.
Using themes
Choose a theme in the editor or customize the generated styles for your project. Review the result at desktop and mobile widths before publishing.