CodeX User Manual

CodeX User Manual

Getting Started

Accessing CodeX

CodeX is a web-based application that requires no installation. To access CodeX:

Open your web browser
Navigate to https://codex.dulapahv.dev/.
The platform will load automatically in your browser

Creating a Room

To create a new coding session:

On the homepage, locate the Create a Room section
Enter your preferred display name in the Name field
Click + Create Room to start a new session
You'll be automatically redirected to your coding room

Joining a Room

A valid room ID must be in a XXXX-XXXX format where X is an alphanumeric character.

There are three ways to join an existing room:

Using a Room ID

On the homepage, find the Join a Room section
Input the room ID provided by the room creator in the Room ID field.

When inputting the room ID, no need to include the hyphen - as it will be added automatically.
Enter your display name in the Name field
Click Join Room →

Using an Invite Link

Click the invite link shared with you
Enter your display name in the Name field when prompted
Click Join Room →

Scanning QR Code

Use your mobile device to scan the QR code shared by the room creator
Enter your display name in the Name field when prompted
Click Join Room →

User Interface Overview

Once you enter a room, you'll see several key interface elements. The interface is divided into several sections, each section contains multiple panels.

Panels can be resized by dragging the dividers
Panels can be hidden/shown using toolbar buttons (view > panel name)

Top Bar

Menu Bar
- Contains File, Edit, Selection, View, and Help menus
Run Code Button
- Execute your code directly from the editor
- For list of supported execution languages, refer to the Supported Execution Languages section
User List
- Displays the list of users in the room
Share Button
- Share your room with others via a link or QR code
Follow User
- Opens a dropdown to follow another user's actions
Settings
- Connect to GitHub, and adjust editor settings

Main Work Area (Split into Panels)

Left Most Panel - Notepad
- Rich text formatting toolbar (Bold, Italic, Underline, etc.)
- Block type selector for different content types
- Collaborative note-taking area
- Table and media insertion tools
Center Left Panel - Code Editor
- Main coding area with syntax highlighting
- Line numbers
- Real-time collaboration
- Multi-cursor support
Right Right Panel - Live Preview
- Live preview of code output
- UI rendering for web development
- Real-time updates
Right Most Panel - Video & Voice Communication
- Video and voice communication controls
- Toggle camera, microphone, and audio settings
- See and hear other participants

Bottom Panel

Terminal

Shared terminal with welcome message
Command output display
Download and clear outputs options
Color-coded text output

Status Bar

Language Selector:
- Shows current programming language (e.g., "HTML")
- For list of supported editor languages, refer to the Supported Editor Languages section
Line and Column Indicator:
- Shows cursor position in the editor

Room Sharing

CodeX allows you to share your room with others using multiple methods:

Room ID

Click the Share button in the top bar
Copy the room ID from the Room ID field

Invite Link

Click the Share button in the top bar
Click the Copy Invite Link button

QR Code

Click the Share button in the top bar

Code Editor

The Monaco Editor forms the core of CodeX's collaborative coding environment, enabling multiple users to code together in real-time. Key features include:

Real-time synchronization of code changes across all participants
Multi-cursor support showing everyone's positions
Syntax highlighting for over 90 programming languages (For a list of supported editor languages, refer to the Supported Editor Languages section)
Intellisense for code completion
Error detection and linting
You can configure, import and export editor settings to customize your coding environment. Learn more in the Code Editor Settings section
The editor supports multiple shortcuts for common actions. Refer to the Keyboard Shortcuts in Menu Bar section for a list of supported shortcuts

Cursor

Each participant's cursor is displayed with a unique color. The color is generated from user name and is consistent across all participants

Cursor labels show usernames and colors
Cursor positions are updated in real-time as users type or move
Cursor labels appear above the text by default, and appear below when at the first line of the editor

Text Selection

Active selections are highlighted for all participants
Selection highlights appear in both the main editor and minimap
Multiple concurrent selections from different users are supported
Selection information (character count) is displayed in the lower right corner of the status bar

Code Editor Settings

You can configure the code editor as well as its theme to suit your preferences by going to Settings in the upper right corner of the top bar.

To import settings, click on the Import Settings button and upload a JSON file
To export settings, click on the Export Settings button to download a JSON file

The settings are persisted across sessions and are stored in your browser's local storage.

Follow Mode

Follow Mode allows users to track another participant's actions in real-time by syncing their view with the followed user's view.

Enabling Follow Mode

Click on the Follow User button in the upper right corner of the top bar
Select or search for the user you want to follow
Your editor view will now sync with the selected user's actions

Limitations

You cannot follow a user who is already following you
You cannot follow a user who is already following another user

Code Execution

You can execute code directly from the editor using the Run Code button in the top bar. The output will be displayed in the Shared Terminal.

For a list of supported execution languages, refer to the Supported Execution Languages section.

Passing Arguments and Input (stdin)

You can pass arguments to your code by:

Click on the arrow down icon next to the Run Code button
Enter your arguments or input in the text area

Arguments and Input must be separated by a newline. For example:

input1
42 Bangkok
1 2 3

Empty lines are ignored. You can also use ' and " in your arguments and input.

Shared Terminal

The Shared Terminal allows you to execute commands and view the output in real-time. The terminal is shared among all participants in the room.

At the upper right corner of the terminal panel, you can Download Output or Clear Output.

Download Output

File name will be codex-terminal-<date>--<time>.txt, for example codex-terminal-06-01-2025--17-37-28.txt

Terminal output will not contain CodeX welcome message

Example output file:

[18:35:33.060]
🚀 Executing code...

[18:35:33.760] - python v3.10.0 (700ms)
Hello World

Clear Output

Clear the terminal output

GitHub Integration

CodeX allows you to connect your GitHub account to open and save files directly from your repositories.

Authentication

CodeX requires repo access scope to read and write to your repositories. For more information, refer to the GitHub Access Permissions section.

To connect your GitHub account:

Click on the Settings button in the top bar
Click on the Connect to GitHub button
Follow the prompts to authenticate your GitHub account
Once connected, you can open and save files from your GitHub repositories

Disconnecting GitHub Account

To disconnect your GitHub account:

Click on the Settings button in the top bar
Click on the Disconnect button

Opening Files from GitHub

Click on the File menu in the top bar
Click on Open from GitHub
- If you are not connected to GitHub, you will be prompted to connect your account
- If the current code editor is not empty, a confirmation dialog will appear asking if you want to replace the current code with the file from GitHub
Select the repository, branch, and file you want to open
The file will be loaded into the editor

CodeX will automatically detect the language of the file and switch the editor's language mode accordingly. Other users' editors will also automatically switch to the same language mode.

Saving Files to GitHub

Click on the File menu in the top bar

Click on Save to GitHub
- If you are not connected to GitHub, you will be prompted to connect your account
Enter the file name and commit message
Click Save

Upon saving, an alert will appear at the bottom right corner of the screen indicating the success or failure of the save operation. From there, you can click on the link to view the commit on GitHub.

Live Preview

The Live Preview panel allows you to see real-time updates of your code output. It is particularly useful for web development to see how your code renders in a browser.

Tailwind CSS utility classes are available
Add custom styles with <style> tags
Add custom scripts with <script> tags
Add external libraries in <head> tags

For a list of pre-installed libraries, refer to the Pre-Installed Libraries for Live Preview section.

Enabling/Disabling Live Preview

Click on the View menu in the top bar
Click on Live Preview

Limitations of Live Preview

Only HTML code is supported

Live Preview Example

Example 1: HTML with Tailwind CSS

<style>
  .test {
    background-color: blue;
  }
</style>

<p class="test text-5xl text-white font-bold">
  Hello World
</p>

Example 2: HTML with Alpine.js, GSAP, and Chart.js

<div class="bg-black p-4 h-full">
  <div class="mx-auto max-w-4xl space-y-4">
    <!-- Alpine.js example -->
    <div
      x-data="{ count: 0 }"
      class="rounded-lg bg-neutral-900 p-6 shadow-lg"
    >
      <div class="mb-4 flex items-center gap-2">
        <i data-lucide="plus-circle" class="size-5 text-blue-500"></i>
        <h2 class="text-xl font-semibold text-neutral-50">
          Interactive Counter
        </h2>
      </div>
      <button
        @click="count++"
        class="rounded bg-blue-500 px-4 py-2 text-white transition-colors hover:bg-blue-600"
        data-tippy-content="Click me to increment!"
      >
        Count: <span x-text="count" class="font-bold"></span>
      </button>
    </div>

    <!-- GSAP example -->
    <div id="gsap-box" class="rounded-lg bg-neutral-900 p-6 shadow-lg">
      <div class="mb-4 flex items-center gap-2">
        <i data-lucide="move-3d" class="size-5 text-blue-500"></i>
        <h2 class="text-xl font-semibold text-neutral-50">GSAP Animation</h2>
      </div>
      <div id="animated-box" class="size-16 rounded bg-blue-500"></div>
    </div>

    <!-- Chart Container -->
    <div class="rounded-lg bg-neutral-900 p-6 shadow-lg">
      <div class="mb-4 flex items-center gap-2">
        <i data-lucide="line-chart" class="size-5 text-blue-500"></i>
        <h2 class="text-xl font-semibold text-neutral-50">Monthly Sales</h2>
      </div>
      <div class="relative">
        <canvas id="myChart"></canvas>
      </div>
    </div>
  </div>

  <script>
    // Initialize libraries
    lucide.createIcons();
    tippy('[data-tippy-content]');

    // GSAP animation
    gsap.to('#animated-box', {
      rotation: 360,
      x: 100,
      duration: 2,
      repeat: -1,
      yoyo: true,
      ease: 'power1.inOut',
    });

    // Chart.js setup
    const data = {
      labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
      datasets: [
        {
          label: 'Sales',
          data: [4000, 3000, 2000, 2780, 1890, 2390],
          borderColor: '#3b82f6', // blue-500
          backgroundColor: '#3b82f680',
          tension: 0.4,
          pointRadius: 6,
          pointHoverRadius: 8,
        },
        {
          label: 'Profit',
          data: [2400, 1398, 9800, 3908, 4800, 3800],
          borderColor: '#10b981', // emerald-500
          backgroundColor: '#10b98180',
          tension: 0.4,
          pointRadius: 6,
          pointHoverRadius: 8,
        },
      ],
    };

    // Chart configuration
    const config = {
      type: 'line',
      data: data,
      options: {
        responsive: true,
        maintainAspectRatio: false,
        scales: {
          y: {
            beginAtZero: true,
            grid: {
              color: '#404040',
            },
            ticks: {
              color: '#e5e5e5',
            },
          },
          x: {
            grid: {
              color: '#404040',
            },
            ticks: {
              color: '#e5e5e5',
            },
          },
        },
        plugins: {
          legend: {
            labels: {
              color: '#e5e5e5',
            },
          },
          tooltip: {
            backgroundColor: '#262626',
            titleColor: '#e5e5e5',
            bodyColor: '#e5e5e5',
            borderColor: '#525252',
            borderWidth: 1,
            padding: 10,
            displayColors: true,
          },
        },
      },
    };

    // Create chart
    const ctx = document.getElementById('myChart');
    new Chart(ctx, config);
  </script>
</div>

Notepad

The Notepad panel allows you to take notes in a rich text format. It supports markdown syntax for text formatting and organization.

Notepad Features

For a list of supported notepad features, markdown syntax, and shortcuts, refer to the Notepad Features and Markdown Syntax section.

Markdown Support

You can switch between rich text and source modes in the Notepad to view and edit markdown syntax.

In case of an error parsing markdown, you can switch to source mode to fix the error. Refer to the Error parsing markdown section.

Limitations of Notepad

Notepad, unlike the code editor, is not optimized for real-time updates and may be slow on low-end devices when handling large amounts of text.

Saving and Opening Notes

You can save notes to your local device or open existing notes in the Notepad.

Saving Notes

Click on the Save note button in the Notepad
Enter the note name and click Save

Notes are saved in markdown format with the .md extension.

Opening Notes

Click on the Open note button in the Notepad
Select the note you want to open

For a list of supported file formats, refer to the Notepad Features section.

Video & Voice Communication

CodeX supports video and voice communication between participants in a room. You can toggle your camera, microphone, and audio settings in the Video & Voice Communication panel.

Upon joining the room, CodeX will prompt you to grant permissions to access your media devices (camera, microphone, audio).

To turn on camera, microphone, or audio, simply click on the respective buttons in the Video & Voice Communication panel.
To change devices, click on the dropdown menu next to the respective button and select the desired device.

For troubleshooting video and audio issues, refer to the Troubleshooting section.