Editor

The code editor in cdbx is powered by monaco editor (opens in a new tab), the same editor that powers vscode (opens in a new tab).

This means that out of the box you get rich intellisense, minimaps, code folding and so much more.

Editor Features

cdbx exposes the ability to configure the editor the way you want to code. We have also enriched the editor to provide:

If there is a feature you love missing, just let us know.

Breadcrumbs

Breadcrumbs show the current file's path above the editor — like VS Code — so you always know where you are in the project.

To toggle breadcrumbs, open Editor Settings (Shift + S) and flip the Breadcrumbs switch.

When enabled, the path bar appears between the tab strip and the code editor and shows each path segment separated by ›, with the filename highlighted at the end.

Live Lint (ESLint)

The editor can highlight code quality issues in JavaScript and JSX files as you type. Warnings appear as yellow squiggles in the gutter and inline, exactly like VS Code's ESLint extension.

Enabling ESLint

Open Editor Settings (Shift + S) → scroll to Live Lint (ESLint) → toggle ESLint on.

Per-rule control

Once ESLint is on, individual rules appear below the toggle so you can pick exactly which checks run:

Rule	What it catches
No unused variables	Variables declared but never used
No undeclared variables	Variables used without being declared
Require === (not ==)	Loose equality comparisons
Prefer let / const over var	`var` declarations
Prefer const when not reassigned	`let` that could be `const`
No debugger statements	Accidental `debugger` left in code
No console.log calls	`console.*` calls (off by default)

TypeScript and TSX files are already checked by Monaco's built-in TypeScript language service, so ESLint only runs on JS / JSX.

Editor themes

Overview

The cdbx editor can support any vscode theme, allowing you to customize your coding environment for however you work best.

Our theming system is built on Monaco Editor themes and supports both light and dark options.

Using Themes

Selecting a Theme

Open the editor settings panel
Click on the theme selector dropdown in the editor toolbar
Browse through available themes organized into "Dark Themes" and "Light Themes" categories and preview how code will look in each theme before selecting
Click on a theme to apply it to your editor

Default Themes

The editor comes with several built-in themes:

Dark+ (default) - Visual Studio Code's default dark theme
Light+ - Visual Studio Code's default light theme
hcBlack - High contrast black theme for better accessibility hcLight - High contrast light theme for better accessibility
Haycyon - A soft, pastel-themed light theme
synthwave-X-Fluoromachine - A vibrant, retro-inspired theme
Synthwave '84 - A retro-futuristic theme with neon colors

Theme Persistence

Your selected theme preference is saved and will persist between editor sessions.

Custom Themes

Coming soon: Advanced users can create custom themes.

Troubleshooting

Theme Not Applied on Initial Load

If a theme isn't properly applied when first opening the editor, try selecting another theme and then switch back
This is a known issue we're working to resolve

Syntax Highlighting Issues

Some language-specific syntax highlighting may require additional grammar definitions
If you notice incorrect highlighting, try changing themes or refreshing the editor

Future Plans

We're working to expand our theme collection and add features like:

Custom theme creation and sharing
More robust theme previews
Theme adjustments for better accessibility

For questions or feedback about themes, please submit an issue on our GitHub repository.

Editor Response Speed

You can adjust how quickly the editor responds to your changes with the Editor Response Speed preference. This controls how long the editor waits after you stop typing before updating your preview.

Fast: Updates quickly after brief pauses in typing
Normal: Balanced setting that works well for most users
Relaxed: Waits longer between updates

This setting helps you find the perfect balance between responsive feedback and preventing excessive updates while you're actively coding.

Emmet shortcuts

Emmet shortcuts are a powerful feature that allows developers to write HTML and CSS faster with abbreviation expansions.

Using Emmet Shortcuts

To use Emmet shortcuts in the editor, simply type an abbreviation and press the Tab key to expand it into full code.

HTML Examples

div>ul>li*5 expands to:

<div>
	<ul>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

nav>ul.menu>li.menu-item*3>a{Item $} expands to:

<nav>
	<ul class="menu">
		<li class="menu-item"><a href="#">Item 1</a></li>
		<li class="menu-item"><a href="#">Item 2</a></li>
		<li class="menu-item"><a href="#">Item 3</a></li>
	</ul>
</nav>

JSX Examples

Header>nav.menu>a*3{Link $} Should expand to:

<Header>
  <nav className="menu">
    <a href="">Link 1</a>
    <a href="">Link 2</a>
    <a href="">Link 3</a>
  </nav>
</Header>

Form>input:text+input:email+button:submit{Submit} Should expand to:

<Form>
	<input type="text" name="" id="" />
	<input type="email" name="" id="" />
	<button type="submit">Submit</button>
</Form>

Power Mode ⚡️

Power Mode is a fun and engaging way to enhance your coding experience. It adds visual effects to your code editor, making it more dynamic and exciting.

Core Settings

Label: A name for your preset, shown in the UI when selecting presets.
Base Effect: The primary particle effect style:
- confetti: Colorful rectangular particles falling in various directions
- firework: Explosive burst of particles radiating outward
- fire: Warm-colored particles that rise upward
- magic: Mystical particles with random motion and glow effects
- snow: Gentle particles that drift downward with slight swaying
- dots: Small circular particles that move with trail effects
- hearts: Heart-shaped particles with floating motion
Motion Mode: Controls how particles are emitted:
- blast: Particles explode in all directions from the cursor
- fountain: Particles shoot upward and arc down like a fountain
- rain: Particles fall downward from the cursor position
Combo Enabled: When active, tracks continuous typing streaks, progressively intensifying effects as your streak grows.

Particle Settings

Basic Configuration

Particle Type: The visual style of particles:
- confetti: Colored rectangular shapes (default)
- emoji: Custom text characters or emoji symbols
- gif: Animated image particles
Colors: Array of color values used for particles (applies to confetti type)
Size Range: Minimum and maximum size for particles as [min, max] array

Physics Properties

Gravity: Downward force applied to particles (higher values make particles fall faster)
Drag: Air resistance that slows particles over time (higher values cause quicker deceleration)
Decay: How quickly particles fade out (higher values make particles disappear faster)
Rotation Speed: How fast particles rotate while moving

Particle Shape

Border Radius: CSS border-radius value for particles (e.g., '2px', '50%')
Glow: Whether particles emit a glow effect
Glow Color: Color of the glow effect (can be 'inherit' to match particle color)
Shape: Specific shape for particles:
- circle: Round particles
- square: Equal-width square particles
- rectangle: Wider rectangular particles
- star: Star-shaped particles
- heart: Heart-shaped particles

Animation Effects

Scale Effect: Whether particles shrink as they fade
Color Shift: Whether particles occasionally change colors
Sway: Whether particles drift side to side (especially for snow)
Pulse: Whether particles pulsate in size (mostly for magic effect)
Rotation Effect: Whether particles rotate while moving
Trail Effect: Whether particles leave trails behind them (for dots)
Float Effect: Whether particles have buoyancy (for hearts)
Exact Dot Trail: Enables precise code-blast style dot trails

Emission Settings

Particle Count: Number of particles generated per keystroke (1-50)
Particle Speed: How quickly particles move across the screen (1-10)
Particle Lifetime: How long particles remain visible before fading (1-10)
Particle Spread: How widely particles disperse from their origin point (1-10)

Custom Particles

Custom Emoji: Character(s) to use when particle type is set to emoji
Custom GIF URL: URL to animated GIF when particle type is set to gif

Shake Settings

Shake: Whether screen shaking is enabled
Shake Intensity: Magnitude of shake movement (1-10)
Shake Style: Pattern of movement:
- none: No shaking
- gentle: Smooth, subtle waves
- medium: Standard vibration
- hard: Sharp, pronounced movements
- crazy: Chaotic, unpredictable patterns
Shake Rotation: Whether shaking includes rotational movement
Shake Target: What element shakes:
- screen: The entire editor shakes
- text: Only text content shakes

Example Preset

const fireworkPreset: PowerModePreset = {
  label: "🎆 Fireworks",
  baseEffect: "firework",
  motionMode: "blast",
  comboEnabled: true,
  
  particleConfig: {
    particleType: "confetti",
    colors: ["#ff0000", "#ffff00", "#00ff00", "#00ffff", "#0000ff"],
    sizeRange: [3, 8],
    
    particleShape: {
      shape: "star",
      borderRadius: "0",
      glow: true,
      glowColor: "inherit"
    },
    
    physics: {
      gravity: 0.1,
      drag: 0.95,
      decay: 0.02,
      rotationSpeed: 0.3
    },
    
    animation: {
      scaleEffect: true,
      rotationEffect: true,
      colorShift: true
    },
    
    particleCount: 30,
    particleSpeed: 7,
    particleLifetime: 6,
    particleSpread: 8
  },
  
  shakeConfig: {
    shake: true,
    shakeIntensity: 5,
    shakeStyle: "medium",
    shakeRotation: true,
    shakeTarget: "screen"
  }
};

Performance Considerations

Higher particle counts, speeds, and lifetimes can impact performance on lower-end devices
The combo counter will progressively increase effect intensity, which can be resource-intensive at high combo levels
Consider using more restrained presets for extended coding sessions

Security Scanning Version History