Technical Docs

Platform Architecture

Beyoneer IDE is architected as a suite of powerful IDE modules that share state through a common data layer. Each page is a self-contained module — no build steps, no bundler dependencies. The platform runs entirely in the browser.

The architecture follows three layers:

• Host: HTML/JS/CSS Each file is independently deployable to our static host.
• State Layer: IndexedDB (local state, prefixed beyoneer_v5) + Firebase Realtime Database (cloud state, user profiles, hosting metadata, collaboration).
• Service Layer: Firebase Authentication, Firebase Storage, WebContainer API, AI API integrations (Gemini, Claude, GPT-4o).

Tech Stack

Every technology choice in Beyoneer is deliberate — selected for browser-native compatibility, minimal overhead, and real capability.

• Editor: CodeMirror 6 — modular, extensible, high-performance syntax editing
• Runtime: StackBlitz WebContainers API — in-browser Node.js with full npm support
• Terminal: xterm.js — real terminal emulator in the browser
• Authentication: Firebase Auth (email/password + Google OAuth)
• Database: Firebase Realtime Database
• Storage: Firebase Storage (hosted sites), IndexedDB idb-keyval (local projects)
• AI Integrations: Google Gemini API, Anthropic Claude API, OpenAI API
• GitHub Integration: Github native client
• Icons: RemixIcon 3.5.0
• Fonts: Syne (UI), JetBrains Mono (code)
• Offline: Service Worker + Cache API (PWA)
• Beyoneer Programming Interface: BPI plugin learning Github Docs .
• Seo Checker: seo checker, with advance features, keywords suggestions,SERP preview,SEO Gap,LSI cloud check

Platform File Structure

StackBlitz WebContainers

WebContainers is the technology powering full Node.js execution inside the browser tab. It runs a complete Linux virtual environment — including a real virtual filesystem, npm package manager, shell process runner, and network layer — entirely within a Web Worker context with no server involvement.

How it's used in Beyoneer

• Beyoneer's file tree syncs to the WebContainer virtual filesystem via webcontainerInstance.fs
• npm install runs real dependency resolution against the NPM registry
• Dev servers (e.g., Vite, webpack-dev-server) run inside the container and output is proxied to an iframe preview
• The xterm.js terminal is connected to a WebContainer shell process for full CLI interaction

Base64 Redirection Engine

The Redirection Engine is Beyoneer's proprietary solution to the most common mobile web development problem: local asset references (images, fonts, scripts) that break inside an HTML preview iframe because relative paths are not resolved in a blob: or srcdoc context.

How it works

1. Before rendering a preview, the engine scans the HTML source for asset references: src="...", href="...", url(...)
2. Each referenced path is matched against the project's IndexedDB file tree
3. Matched binary assets are read from IndexedDB, converted to Base64 data URIs
4. All references in the source are replaced with the corresponding data URI
5. The modified source is rendered in the preview iframe — all assets resolve correctly

IndexedDB Storage

All local project state is stored in the browser's IndexedDB using the idb-keyval library, namespaced under the beyoneer_v5 key prefix.

Key Namespace

CodeMirror 6 Editor

The editor is built on CodeMirror 6 — the modular, composable code editor framework. Beyoneer uses a custom CM6 configuration optimized for mobile.

Extensions Used

• @codemirror/lang-html, @codemirror/lang-css, @codemirror/lang-javascript — Language support packages
• @codemirror/autocomplete — IntelliSense with ~80 custom built-in completions + snippets
• @codemirror/lint — Real-time error linting
• Custom keymaps for mobile — bracket auto-close, touch gestures
• Custom theme matching the Beyoneer dark palette

GitHub native client

Github native client. Beyoneer integrates it into the IDE layer to enable direct repository operations from within the IDE.

Supported Operations

• Fetch repository contents (GET /repos/{owner}/{repo}/contents/{path})
• Read individual files and decode Base64 content
• Create or update files (PUT /repos/{owner}/{repo}/contents/{path})
• List repositories for authenticated user

BeyoAgent — Overview

BeyoAgent is the multi-model AI coding pipeline built into Beyoneer IDE. It is not a single-model chatbot — it is a 5-stage sequential pipeline where each AI model performs a specific, specialized role, passing a structured context payload to the next stage.

The pipeline is designed to produce production-quality code by separating concerns: intent classification, architecture planning, code generation, auditing, and quality validation each use the model best suited for that task.

G-Codes Pipeline Stages

Stage Details

G0 — Intent Classifier (Gemini Flash)

Receives the raw user prompt. Classifies: task type, required tech stack, component scope, and builds a structured intent object that defines the boundaries of the task for all downstream stages.

G1 — Architect (Gemini 2.0 Flash)

Receives the G0 intent object. Plans the full file structure, component hierarchy, data flow, state management approach, and external dependencies. Outputs a structured blueprint JSON consumed by G2.

G2 — Code Generator (Claude Sonnet)

Receives the G1 blueprint. Generates all code files according to the architectural plan. Produces complete, working code — not stubs or pseudocode. Output is a file map: { path: string, content: string }[].

G3 — Auditor (GPT-4o)

Reviews G2 output for: runtime errors, security vulnerabilities, accessibility violations, performance issues, and code style. Returns an audit report with severity-tagged findings.

G4 — Validator (Gemini Flash)

Scores the final output (0–100) across dimensions: functionality, code quality, security, accessibility. If the score falls below the configured threshold (default: 75), G4 auto-patches the failing sections and re-scores.

Vibe Loop — Runtime Monitor

The Vibe Loop is a post-deployment runtime error monitor that closes the feedback cycle between BeyoAgent and live execution.

How it works

1. After BeyoAgent generates and deploys code, Vibe Loop injects a console override layer into the preview iframe
2. All console.error() and uncaught exceptions are captured and streamed to the Vibe Loop monitor panel
3. Errors that match known runtime patterns are automatically packaged as a mini-prompt
4. The mini-prompt is re-submitted through the G-Codes pipeline (starting at G1 with the error context)
5. The resulting patch is applied to the affected files and the preview is re-rendered

Firebase Realtime Database Schema

The cloud state layer uses Firebase Realtime Database with the following path structure:

Authentication System

Beyoneer uses Firebase Authentication with the following supported sign-in methods:

• Email / Password — Standard registration and login with email verification
• Google OAuth — One-tap sign in with Google account

Authentication state is managed via onAuthStateChanged listener. The Firebase SDK persists auth tokens in localStorage automatically. All platform pages share the same Firebase app instance initialized via the common config.

Hosting Service Architecture

When a user deploys a site via host.html:

1. The project file tree is read from IndexedDB
2. All files are uploaded to Firebase Storage under hosted/{uid}/{siteId}/
3. A metadata record is written to hosted/{siteId} in the Realtime Database
4. A public URL is generated (Firebase Storage download URL) and stored as the site's live address
5. Free tier sites get a 24-hour TTL job that marks them for deletion. Premium sites have no TTL.

The view.html page queries hosted/ and renders all public, non-expired sites in a browsable gallery organized by All/Premium/Latest/Codes categories.

Code Runners

Each language runner is an independent single-file HTML application with an embedded execution environment. Runners are accessed via searchrunners.html or directly.

DIS+ — Deep Intelligence System Plus

DIS+ is the browser-native TypeScript Language Service layer inside Beyoneer IDE. It runs entirely in the browser using window.ts (typescript.min.js, loaded at startup) via ts.createLanguageService() — zero WebContainer, zero server process, zero round-trips. The Language Service is synchronous and instantaneous from the user's perspective.

DIS+ is disabled by default (Settings.data.disPlus = false) and must be enabled by the user. Once enabled, it initialises the TS Language Service immediately and shows a confirmation pill (disPlusEnginePill) for 4 seconds.

Supported Languages

DIS+ is scoped exclusively to JS / TS / JSX / TSX. The isLangEnabled(lang) method returns false for any other language — DIS (regular) handles the rest. The user can toggle JS/TS support independently via the disPlusJS setting.

Modes

Two modes exist but both use the exact same browser-native TS engine. The only difference is the prefetch debounce delay:

• Instant (disPlusMode: 'instant') — 300 ms debounce before prefetching completions into cache
• Deep (disPlusMode: 'deep') — 150 ms debounce, slightly more aggressive prefetch

Completion Pipeline

Completions flow through fetchDeep(code, lang, prefix):

1. If disPlusDeep is on, calls ts.getCompletionsAtPosition(file, pos) — returns up to 80 entries, filtered by prefix (startsWith or includes), sorted by sortText
2. For each entry, getCompletionEntryDetails() fetches the full type signature (truncated to 120 chars), mapped to CM6 kind labels (function, method, property, class, interface, variable, keyword, namespace, constant, enum)
3. If the TS service is unavailable or disPlusDeep is off, falls back to _localScan() — a regex-based pass over the document extracting const/let/var, function, arrow functions, class, and import {…} named exports (up to 60 results)

Results are cached against a key of lang:prefix:code.length. The cache is injected into the main disCompletion pipeline via getCached(prefix), de-duplicating against DIS completions by label. DIS+ items carry the ⬡ prefix in their detail field.

Independently Toggleable Features

CM6 Integration

DIS+ installs its features into a dedicated CodeMirror 6 compartment (lspClientCompartment). On enable() or setFeature(), _installCM6Extensions() reconfigures the compartment with a hover tooltip extension (CM6 hoverTooltip) and attaches a keydown listener for F12 and a click listener for Ctrl+Click go-to-definition. On disable(), the compartment is cleared and all listeners are removed.

Settings Keys Reference

Autocompletion — DIS Engine

The Deep Intelligence System (DIS) is Beyoneer's primary autocompletion layer — a context-aware, multi-language completion engine built on top of CodeMirror 6's @codemirror/autocomplete extension. It is registered as the sole override handler: autocompletion({ override: [disCompletion], activateOnTyping: true, maxRenderedOptions: 30 }).

Language Coverage

DIS ships static completion arrays for every supported language, each with per-language context rules:

LSP Document Scanner

On every completion request, the LSP object scans the active document with LSP.completions(docText, lang) to surface locally defined symbols. Results are cached against lang:docLength:first120chars. Scanned symbol types per language:

• JS/TS — const/let/var declarations, function declarations, arrow functions, class names, named and default import bindings
• Python — def functions, class names, top-level assignments, import and from…import
• C / C++ / Rust / Go / Java — functions, structs/classes, enums, traits, typedefs, #define constants, short-variable declarations

Cross-File Project Scanner

LSP.projectCompletions(lang, activePath) extends completions across the entire active project. It iterates up to 140 other files of the same language, extracts the same symbol types, and labels each result with the source file path (e.g. project fn • src/utils.js) for traceability. The 140-file cap keeps completion latency bounded on large workspaces.

Sort & Deduplication

After filtering by the typed prefix (startsWith, includes, or detail-includes), results are sorted by: exact match → startsWith → boost score → alphabetical. A final deduplication pass removes identical labels before the list is returned to CM6.

DIS+ Merge

At the end of every disCompletion call, DISPLUS cached items are injected: window.DISPLUS?.getCached(prefix) appends any cached TypeScript LS results that aren't already in the DIS list. DIS+ items are identifiable by the ⬡ prefix in their detail field. Simultaneously, DISPLUS.prefetch() is triggered in the background to warm the cache for the next keystroke.

Mobile Keys & Gesture Engine

Beyoneer ships two complementary systems for touch-first code editing: a scrollable symbol toolbar that appears above the soft keyboard, and a SwipeEngine for panel navigation via touch gestures. Both are implemented entirely in editor_core.js.

Mobile Keyboard Toolbar (mobileKbToolbar)

A horizontally scrollable bar rendered into the #mobileKbToolbar element. Enabled by the mobileKeys setting (default: true). Buttons are built dynamically from a SYMBOLS array at startup. Each button requires a long-press of ≥ 120 ms to fire — horizontal scroll cancels the tap, preventing accidental inserts while the user scrolls through symbols.

Symbol Groups

All inserts dispatch directly to window.editorView via CM6 view.dispatch(). The Enter action carries the current line's leading whitespace to preserve indentation. A 12 ms haptic pulse (navigator.vibrate(12)) is fired on every successful insert.

SwipeEngine

A self-contained touch gesture handler (window.SwipeEngine) mounted on document via touchstart / touchend listeners (both passive: true). Gesture thresholds:

• Minimum distance — 52 px along primary axis
• Maximum perpendicular drift — 60 px
• Maximum duration — 400 ms

Gesture Actions

All successful gesture actions trigger an 18 ms haptic pulse. Inside the code editor, horizontal swipes are restricted to the left-edge zone (≤ 28 px) and vertical swipes to the bottom-edge zone (≥ vh − 100 px) to avoid conflicting with normal text selection and scrolling. Swipes are suppressed entirely while any modal, plugin panel, or settings panel is open.