Code Online

Introduction

Code Online is a desktop web editor built on Electron. It lets you visually build web pages by drag & dropping blocks, edit source code live, generate PHP backend code, and now features a complete authentication system tied to your online-corps.net account.

Core Features

System Requirements

• Windows 10/11 (or any Electron-compatible OS)
• Minimum 4 GB RAM recommended
• 500 MB available disk space
• Internet connection for authentication
• Local PHP server: WampServer or XAMPP

Installation & Setup

Follow these steps to set up Code Online and your local development environment.

Default Paths

• WampServer : C:\wamp64\www
• XAMPP : C:\xampp\htdocs

Sign In

Code Online v3.0 introduces a full authentication system. The app verifies your online-corps.net account on every launch and keeps a secure local JWT session.

Authentication Flow

If no valid session is found, the login screen is shown. If the API is unreachable (offline), the cached local session is accepted.

Login Options

Session Storage

• JWT token saved in %AppData%\CodeOnline\session.json
• Token valid for 30 days — automatic renewal on verify
• Session refreshed on every app launch with fresh subscription data
• Sign out clears the session file and redirects to the login screen

API Endpoints

POSThttps://online-corps.net/api/auth/
Body: { username: "...", password: "..." }
  or: { email: "...", password: "..." }

Returns: { token, user: { username, firstName, role, abonnement, expiration_abonnement, ... } }

POSThttps://online-corps.net/api/auth/?action=verify
Body: { token: "..." }

Returns: { user: { ... }, subscription: { plan, name, price, version, days_left, ... } }

Account Page

The Account tab in the sidebar gives you a complete view of your profile and subscription, always showing live data fetched from the API.

Profile Information

• Avatar — loaded from online-corps.net profile (fallback to initials)
• Full name, username, title, company
• Email & Pro Email — both displayed if set
• Role badge — User shown for User accounts

Subscription Block

• Current plan badge with color coding (Free / Pro / Premium)
• Expiration date with countdown — color turns orange under 30 days, red under 7
• Lifetime ∞ shown for permanent subscriptions
• Upgrade banner shown automatically for Free accounts

Quick Actions

• Edit profile → opens online-corps.net/account in browser
• Manage on website → same destination
• Change password → opens the forgot-password page
• Sign out → clears session, returns to login screen

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, live subscription data fetched from the API, and a direct link to online-corps.net/subscription/ to upgrade.

Plan Expiration

• If a paid plan expires, it automatically downgrades to Free
• The API handles expiry detection server-side — client always gets the correct active plan
• Lifetime subscriptions use the date 3000-01-01 and display Lifetime ∞

Project Management

The Hub screen centralizes all your projects. Each project is a folder in your local server containing a Code_Online.config.

Create a Project

• Click + New Project in the Projects tab
• Fill in the name, description, keywords and optionally a logo
• The project is created with a pre-filled index.php and configured Open Graph meta tags
• The project card appears immediately in the grid

Open a Project

Click on a project card to open the Loader which lists the project files, then click Open in Editor. The last opened time is updated automatically.

Delete a Project

Access project details (⋮ icon or secondary click) and click Delete. This action permanently deletes the folder and its contents.

Import an Existing Project

You can import any existing web project into Code Online by manually adding a config file.

Code_Online.config File

{
  "name": "MyProject",
  "description": "Project description",
  "createdAt": "2025-01-01T00:00:00.000Z",
  "lastOpenedAt": null,
  "path": "C:\\wamp64\\www\\MyProject",
  "favicon": "assets/img/favicon.png"
}

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 · Copy path · 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.

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 (CtrlP or 🧱 Backend button) is a visual tool for generating PHP backend code by assembling bricks. 4-column layout: palette / canvas / properties / generated code.

21 Available PHP Bricks

Pre-built PHP Pages

The 📄 PHP Pages button in the Backend Builder topbar gives access to 7 complete, styled PHP pages that are immediately functional.

Save to Project

The generated code can be saved directly into your Electron project, in an organized structure under assets/back-end/.

StructureMyProject/
  assets/
    back-end/
      login/
        login.php     ← saved here

Settings

Project Folder

• Click Browse… and select your server directory
• Configuration saved in %AppData%\CodeOnline\config.json
• You can change this path at any time without data loss

Supported Languages

• 🇬🇧 English
• 🇫🇷 Français
• 🇯🇵 日本語 (Japanese)

Keyboard Shortcuts

All shortcuts work within the editor window.

Editor — Global

File Explorer

CSS API — Style Library

All blocks use the CSS library hosted at https://studio.online-corps.net/api-css/. It defines a complete design system of 1187+ lines.

Include the library

HTML<link rel="stylesheet" href="https://studio.online-corps.net/api-css/">

Apply a Theme

HTML<body class="theme-sunset">
  <!-- --primary, --secondary, --accent replaced by theme values -->
</body>

Changelog

Frequently Asked Questions