Code Pen Clone App: A Real-Time Collaborative Web Development Environment
Bibliographic record
Abstract
ABSTRACT This paper presents the development of a CodePen clone—an interactive, real-time online code editor designed to support HTML, CSS, and JavaScript with live preview capabilities. Online IDEs such as CodePen, JSFiddle, and StackBlitz have revolutionized how developers write, share, and experiment with code snippets. However, most platforms offer limited collaboration features or impose commercial restrictions. This research introduces a custom-built platform using React.js, Node.js, WebSockets, and CodeMirror that facilitates real-time collaboration and automatic preview rendering. Users can sign up, create pens (code snippets), preview results live, and invite others for collaborative editing. The tool addresses accessibility, flexibility, and interactivity in modern coding education and showcases potential as a viable open-source alternative for individual learning, classroom demonstrations, and real-time team projects. Keywords—Code Editor, Online IDE, Real-time Collaboration, HTML/CSS/JS Preview, React.js, WebSockets, CodeMirror
Fetched live from OpenAlex and de-inverted. Abstracts are not stored in this database: the inverted indexes are 8.6 GB of the frame’s 9.3 GB of text, and the host has 13 GB free.
How this classification was reachedexpand
Full frame machine prediction
Teacher imitationNot calibrated prevalence, not ground truth. Human validation pending. The Gemma side is a direct model label for every work in the frame, read from the title-only record. The Codex side is a classifier learned from the 10,348 direct Codex labels and calibrated to design-weighted sample rates; fields without enough sample support carry no Codex call. Candidate is the union of the two sides; consensus is their intersection. These outputs are machine_predicted_unvalidated and are not human labels.
Distilled classifier scores by category (both heads)
| Category | Codex | Gemma |
|---|---|---|
| Metaresearch | 0.001 | 0.004 |
| Meta-epidemiology (narrow) | 0.001 | 0.000 |
| Meta-epidemiology (broad) | 0.000 | 0.000 |
| Bibliometrics | 0.001 | 0.000 |
| Science and technology studies | 0.000 | 0.000 |
| Scholarly communication | 0.001 | 0.002 |
| Open science | 0.002 | 0.002 |
| Research integrity | 0.001 | 0.001 |
| Insufficient payload (model declined to judge) | 0.014 | 0.005 |
Machine scores (provisional)
The two teacher heads of the student model, read on this work. A score orders the frame for review; it never asserts a category, and the validation status ships verbatim with every row.
Baseline scores from an immature model (maturity gate not passed, 7 training rounds). Scores rank; they never assert a category.
score_only:v0-immature-baseline · verbatim from the scoring run: score_only means the number may rank works, and no category label ships from itClassification
machine, unvalidatedMachine predicted; a candidate call from one source (direct Gemma or distilled Codex), not a consensus.
How this classification was reached, model by model and score by score, is at the end of the page under "How this classification was reached".