XCode Editor — Integration Guide

Step 1

Link the Editor

Paste one <script> tag inside your <head>. That's the entire installation — no npm, no build step, no dependencies.

index.html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>My Website</title>

  <!-- ✦ XCode Editor — add this line -->

  <script src="https://phinex-org.github.io/X-Code/XCode.js"></script>

</head>

<body>

  <!-- your page content -->

</body>

</html>

Step 2

Style the Editor

The editor lives inside any <div> you choose. Control its size with regular CSS and override any colour with --xce-* custom properties.

A

Set the container size

Give your div any width and height. The editor fills it completely.

style.css

#my-editor {

     width:  100%;         
/* or 800px, 50vw, etc. */

     height: 480px;        
/* total editor height   */

     border-radius: 8px;   
/* optional rounding     */

}

/* Viewer panel height (inside the editor) */

#my-editor .xce-viewer {

     height: 180px;

}

B

Override colours with CSS variables

Set any --xce-* token on the container. They cascade down so only your editor is affected.

style.css — theme tokens

#my-editor {

  /* ── Backgrounds ── */

  --xce-bg:      #1e1e1e;   
/* main editor background  */

  --xce-bg2:     #252526;   
/* control bar / gutter    */

  --xce-bg3:     #2d2d30;   
/* viewer background       */

  /* ── Borders & text ── */

  --xce-border:  #3c3c3c;   
/* divider / border lines  */

  --xce-text:    #d4d4d4;   
/* default code colour     */

  --xce-muted:   #858585;   
/* gutter numbers / labels */

  /* ── Accent (cursor, buttons, AI pulse) ── */

  --xce-accent:  #39ff14;   
/* neon green (default)    */

  /* ── Syntax token colours ── */

  --xce-kw:      #569cd6;   
/* keywords                */

  --xce-str:     #ce9178;   
/* strings                 */

  --xce-cmt:     #6a9955;   
/* comments                */

  --xce-fn:      #dcdcaa;   
/* function names          */

  --xce-num:     #b5cea8;   
/* numbers                 */

  --xce-type:    #4ec9b0;   
/* types / builtins        */

  --xce-prop:    #9cdcfe;   
/* properties              */

  /* ── Typography ── */

  --xce-font:      'JetBrains Mono', monospace;

  --xce-font-size: 13px;

  --xce-line-h:    20px;

}

Built-in theme presets

const x = "hello";
// default theme
console.log(x);

const x = "ocean";
// material ocean
console.log(x);

const x = "night";
// midnight
console.log(x);

const x = "light";
// light theme
console.log(x);

const x = "dracula";
// dracula theme
console.log(x);

const x = "monokai";
// monokai
console.log(x);

VS Dark — CSS

Step 3

Use the Editor

Pass a config object when initialising. Pick a viewer mode, choose your language, and optionally enable aiEnabled for Tab-to-complete ghost text.

script.js — full initialisation

const editor = new XCodeEditor({

  // ── Required ──────────────────────────────

  container:    '#my-editor',   
  // CSS selector or DOM element

  // ── Language ──────────────────────────────

  language:     'javascript',    // javascript | typescript | html | css
                                      // python | json | markdown | shell

  // ── Viewer ────────────────────────────────

  viewer:       'console',     // 'console' | 'page' | 'none'

  viewerHeight: '180px',          // initial viewer panel height

  // ── AI Suggestions ────────────────────────

  aiEnabled:    true,             // show AI toggle button

  apiKey:       'sk-ant-...',     // Anthropic key (Tab to accept)

  // ── Starting code ─────────────────────────

  initialCode:  `console.log("Hello!")`,

  // ── Callbacks ─────────────────────────────

  onChange: code => autoSave(code),

  onRun:    code => console.log('running'),

});

JavaScript + Console console

HTML + Page Viewer page

Editor Only (no viewer) none

CSS + Page Viewer page

Step 4

Merge Into Your Website

Below is a realistic website mockup with XCode Editor embedded inside a dashboard layout — complete, copy-ready code below the preview.

https://mywebsite.com/editor

My App

DashboardDocsSettings

my-page.html — complete integration example

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>My Website</title>

  <!-- 1. Link the editor -->

  <script src="https://phinex-org.github.io/X-Code/XCode.js"></script>

  <style>

    /* 2. Size the editor container */

    #code-editor {

      width:  100%;

      height: 500px;

      /* Optional: custom theme */

      --xce-accent: #39ff14;

      --xce-bg:     #1e1e1e;

    }

    /* Viewer panel height (inside the editor) */

    #code-editor .xce-viewer {

      height: 200px;

    }

  </style>

</head>

<body>

  <header>My Website Header</header>

  <main>

    <h1>Code Playground</h1>

    <!-- 3. Place the editor div -->

    <div id="code-editor"></div>

    <!-- Result area your page can control -->

    <div id="output"></div>

  </main>

  <script>

    // 4. Initialise

    const editor = new XCodeEditor({

      container:    '#code-editor',

      language:     'javascript',

      viewer:       'console',

      viewerHeight: '200px',

      aiEnabled:    true,

      apiKey:       'sk-ant-...',

      initialCode:  'console.log("Hello World!")',

      // Callbacks

      onChange: code => {

        localStorage.setItem('saved-code', code);

      },

      onRun: code => {

        document.getElementById('output').textContent = 'Running...';

      }

    });

    // Use the API anywhere in your page

    document.getElementById('save-btn')

      .addEventListener('click', () => {

        const code = editor.getValue();

        fetch('/api/save', { method: 'POST', body: code });

      });

  </script>

</body>

</html>

Reference

API Quick Reference

Everything you can call on the editor instance after initialisation.

Read / Write

editor.getValue()→ returns current code as string

editor.setValue(code)→ replace editor content

editor.getLanguage()→ active language string

editor.setLanguage(lang)→ switch language + re-highlight

Viewer

editor.getViewerMode()→ 'page' | 'console' | 'none'

editor.setViewerMode(m)→ switch viewer at runtime

editor.run()→ execute code (same as ▶ Run)

editor.log(text, type)→ add line to console viewer

Appearance

editor.setTheme(tokens)→ apply CSS tokens at runtime

editor.focus()→ focus the textarea

Events

editor.on('change', fn)→ fires on every keystroke

editor.on('run', fn)→ fires when ▶ Run is clicked

editor.off(event, fn)→ remove listener

editor.destroy()→ remove editor, clear container

Keyboard shortcuts

Tab Accept AI suggestion (or indent)
Esc Dismiss AI suggestion
Ctrl + Enter Run code
( [ { " ' Auto-close bracket/quote

XCode WindowPreviewer