Code Editor
Variation code editor
Variations are not separate pages you upload. They are snippets that run on top of the live site. In everyday language, the code editor is where you write “change this headline” and “make this button green.” In CROForge that editor is a full-screen route using Monaco (the same engine as VS Code). You edit JS and CSS per variation, switch tabs with vIndex, and preview widths with VIEW_MODE. The shipping UX is code-centric. EDITOR_MODE includes Code and Visual, but Visual may not be fully available yet.
Words used on this page
| Word | Everyday meaning | Meaning in CROForge |
|---|---|---|
| Code editor | The screen where you type JS and CSS. | Route /workspace/{workspaceId}/ab-test/{experimentId}/edit?vIndex={n}. Saves names and codes onto variations. |
| JS (JavaScript) | Code that changes content and behavior in the browser. | The JS tab writes jsCode. Smart Code evals it after injecting CSS. Uncaught errors can break the page. |
| CSS | Rules that change appearance. | The CSS tab writes cssCode. Smart Code appends a <style> tag in head. |
| Monaco | A professional in-browser code editor (VS Code’s engine). | CROForge uses @monaco-editor/react for the JS and CSS tabs. |
| EDITOR_MODE | Code versus point-and-click visual editing. | Values: Code / Visual. Shipping UX is Code. Visual may not be fully available yet — “Create variations using Code Editor.” |
| VIEW_MODE | How wide the preview looks (computer, tablet, phone). | Values: Desktop / Tablet / Mobile. Preview chrome width hints only; they do not change live assignment. |
| Editor URL | The page shown beside or behind the editor. | Set this to a real targeted page so you edit against the actual DOM and CSS of that surface. |
| vIndex | Which tab is selected. | Query param that selects which variation tab is active in the editor. |
| Flicker | A flash of the original page before the change appears. | Late-applied JS/CSS can paint Control first. Keep snippets small, prefer CSS for visuals, and QA on the real URL. |
| Control | The original experience. | Often protected from delete. Usually empty JS/CSS so the live site is the baseline. |
Screenshot
Filename: variation-code-editor.png (Monaco JS/CSS tabs, variation tabs, view mode). Place the file under docs/assets/placeholders/. Paste the screenshot into WordPress after you copy this article; do not add an image tag here.
Where the editor lives
From a campaign, open Edit / the code editor. The route is:
/workspace/{workspaceId}/ab-test/{experimentId}/edit?vIndex={n}vIndex selects which variation tab is active. The campaign hub itself remains /workspace/{id}/ab-test/{experimentId}.
Features
| Feature | What it does |
|---|---|
| Variation tabs | Switch Control and variants without leaving the editor. |
| JS tab | JavaScript applied at runtime (jsCode). |
| CSS tab | Styles injected into <head> as a <style> tag. |
| Add variation | Creates a new blank variant. |
| Rename / duplicate / delete | Manage variants. Control is often protected. |
| Save | Persists codes and names on the experiment. |
| Editor URL + VIEW_MODE | Preview chrome for Desktop, Tablet, or Mobile against the real page. |
Product mode enums
| Enum | Values | Meaning in CROForge |
|---|---|---|
EDITOR_MODE | Code / Visual | Code vs visual editing when visual is available. Treat Code as the supported path. |
VIEW_MODE | Desktop / Tablet / Mobile | Preview chrome width hints only. |
Writing safe variation JS and CSS
Always check that the element exists. Pages load widgets asynchronously; a missing node should be a no-op, not an exception.
// Prefer defensive DOM access
var el = document.querySelector('h1.hero-title');
if (el) {
el.textContent = 'New headline';
}h1.hero-title {
color: #0a7;
}What happens at runtime
When a Running campaign assigns this variation, Smart Code:
- Adds a marker class on
document.head. - Appends a
<style>tag withcssCode. - Evals / runs
jsCode. - Sends an impression event.
If you edit JS or CSS on a Running campaign, some sticky visitors already saw the old snippet. Prefer pause → edit → resume. Watch for flicker on first paint, and never ship uncaught JS errors.
