About 5 min read

Developer Mode

Karma One's Developer Mode transforms the right panel of the desktop interface into a full-featured development environment with 10 specialized tabs, live code execution, and direct sandbox access. It is designed for engineers, data scientists, and power users who want to go beyond conversation.

Overview

Developer Mode is available on the Karma One web and desktop applications. When activated, the right panel expands to reveal a tabbed workspace where you can view, edit, and execute code alongside your AI conversation.

The 10 Tabs

| Tab | Icon | Purpose | |-----|------|---------| | Code Editor | </> | View and edit source files with syntax highlighting | | Terminal | >_ | Execute shell commands in your sandbox environment | | Browser Preview | Globe | Preview web pages and test URLs in an embedded browser | | SVG Preview | Image | Render and inspect SVG graphics generated by the AI | | Markdown Preview | Doc | Live-render Markdown documents | | Mermaid Diagrams | Flow | Visualize Mermaid diagram code as rendered diagrams | | HTML Preview | Layout | Preview raw HTML output with full rendering | | React Preview | React | Live preview of React components with hot reload | | CSV Viewer | Table | View and explore CSV/tabular data with sorting and filtering | | Maps | Pin | Display geographic data and location-based visualizations |

Code Editor

The built-in code editor supports syntax highlighting for all major programming languages. When the AI generates or modifies code, it appears here automatically.

  • Syntax highlighting for Python, JavaScript, TypeScript, HTML, CSS, SQL, and more
  • Line numbers and word wrap
  • Copy-to-clipboard for any file
  • Files generated by the sandbox are browsable in the file tree

Terminal

A live terminal connected to your sandbox environment. You can run commands directly or watch the AI execute its plan step by step.

"Run the Python script you just created."
"Install numpy and pandas in the sandbox."
"Show me the output of ls -la in the working directory."
  • Full shell access within the sandbox
  • Command history
  • Real-time output streaming
  • Supports long-running processes

Browser Preview

An embedded browser for previewing web pages, testing generated HTML/CSS/JS, or inspecting any URL.

  • Navigate to any URL
  • Interact with the page (click, scroll, type)
  • View the AI-generated web applications in real time
  • Useful for verifying web scraping results or UI output

SVG Preview

Renders SVG code as visual graphics. When the AI generates charts, diagrams, icons, or illustrations in SVG format, they display here instantly.

Markdown Preview

Live rendering of Markdown content with support for tables, code blocks, headings, lists, and images. Ideal for reviewing generated documentation or reports.

Mermaid Diagrams

Visualizes Mermaid diagram syntax as rendered flowcharts, sequence diagrams, Gantt charts, class diagrams, and more.

"Create a flowchart showing our user registration process."
"Draw a sequence diagram for the API authentication flow."

HTML Preview

Full HTML rendering with CSS and JavaScript support. Preview complete web pages, email templates, or any HTML output.

React Preview

Live preview of React components with hot reload. When the AI generates React code, you can see the rendered output immediately and interact with it.

  • Supports JSX/TSX
  • Hot reload on code changes
  • Tailwind CSS support built in
  • Interactive component state

CSV Viewer

A structured data viewer for CSV files and tabular data. Features include:

  • Column sorting (ascending/descending)
  • Search and filter across all columns
  • Pagination for large datasets
  • Column resizing

Maps

Display geographic coordinates, routes, and location-based data on an interactive map. Useful for logistics, travel planning, or any location-aware analysis.

Sandbox Management

The sandbox is an isolated cloud environment where code executes safely. Developer Mode gives you direct visibility and control over the sandbox.

  • File Browser: Navigate the sandbox file system, open files in the editor
  • Environment: Pre-installed tools include Node.js, Python, Chromium, and common libraries
  • Persistence: Files persist within a session but are cleaned up when the sandbox is released
  • Resource Tiers: Choose sandbox size (S/M/L/XL) based on your workload
"Create a new Python file called analysis.py and run it."
"Upload this CSV to the sandbox and process it."
"Show me all files in the /home/user/workspace directory."

Live Code Execution

Code generated by the AI runs in real time inside the sandbox. You can:

  • Watch execution output stream into the terminal
  • See generated files appear in the file browser
  • Preview visual output (charts, HTML, diagrams) in the appropriate tab
  • Interrupt long-running processes

Developer Shortcuts

| Shortcut | Action | |----------|--------| | Cmd/Ctrl + \`` | Toggle Developer Mode panel | | Cmd/Ctrl + 1-9| Switch between tabs (1 = Code, 2 = Terminal, etc.) | |Cmd/Ctrl + S| Save current file in editor | |Cmd/Ctrl + Enter| Execute current file in terminal | |Cmd/Ctrl + Shift + C| Copy selected code block | |Cmd/Ctrl + K` | Clear terminal output |

Who Should Use This

Developer Mode is ideal for:

  • Software Engineers who want to write, test, and debug code with AI assistance
  • Data Scientists who need to explore datasets, run analysis scripts, and visualize results
  • DevOps Engineers who want to test infrastructure scripts and configurations
  • Technical Writers who need to preview Markdown, HTML, and diagram output
  • Designers who want to see SVG, HTML, and React component previews in real time
  • Students and Learners who want an interactive coding environment with AI guidance

Developer Mode is available on Karma One Pro and Enterprise plans. The sandbox environment requires an active internet connection and consumes compute energy based on the selected resource tier.