Skip to main content
Build a production-ready browser-based code editor that runs entirely in the browser with a backend API. This cookbook demonstrates how to create a platform similar to StackBlitz or CodeSandbox using HopX.

Overview

Browser-based code editors provide a full IDE experience in the browser. The frontend handles editing, and the backend manages file operations, code execution, and package management through APIs.

Prerequisites

  • HopX API key (Get one here)
  • Python 3.8+ or Node.js 16+
  • Understanding of client-server architecture
  • Basic knowledge of web APIs

Architecture

┌──────────────┐
│  Browser     │ Editor UI
└──────┬───────┘
       │ HTTP/WebSocket

┌─────────────────┐
│  Editor Backend │ File ops, execution
└──────┬──────────┘


┌─────────────────┐
│  HopX Sandbox   │ Secure execution
└─────────────────┘

Implementation

Step 1: File Operations API

Provide file operations via API:
from hopx_ai import Sandbox
import os
from typing import Dict, Any

class EditorBackend:
    def __init__(self, api_key: str):
        self.api_key = api_key
        self.sandbox = None
    
    def initialize_project(self, project_id: str) -> Dict[str, Any]:
        """Initialize editor project"""
        self.sandbox = Sandbox.create(
            template="code-interpreter",
            api_key=self.api_key,
            timeout_seconds=3600
        )
        
        self.sandbox.files.mkdir("/workspace/project")
        
        return {
            "success": True,
            "project_id": project_id,
            "sandbox_id": self.sandbox.sandbox_id
        }
    
    def handle_file_request(self, method: str, path: str, content: str = None) -> Dict[str, Any]:
        """Handle file operation requests"""
        full_path = f"/workspace/project{path}"
        
        if method == "GET":
            # Read file
            try:
                content = self.sandbox.files.read(full_path)
                return {"success": True, "content": content}
            except Exception as e:
                return {"success": False, "error": str(e)}
        
        elif method == "PUT":
            # Write file
            try:
                self.sandbox.files.write(full_path, content)
                return {"success": True, "path": path}
            except Exception as e:
                return {"success": False, "error": str(e)}
        
        elif method == "DELETE":
            # Delete file
            try:
                self.sandbox.files.remove(full_path)
                return {"success": True, "path": path}
            except Exception as e:
                return {"success": False, "error": str(e)}
        
        elif method == "LIST":
            # List directory
            try:
                files = self.sandbox.files.list(full_path)
                return {
                    "success": True,
                    "files": [
                        {
                            "name": f.name,
                            "path": f.path,
                            "is_dir": f.is_dir,
                            "size": f.size
                        }
                        for f in files
                    ]
                }
            except Exception as e:
                return {"success": False, "error": str(e)}
        
        return {"success": False, "error": f"Unknown method: {method}"}
    
    def cleanup(self):
        """Clean up editor resources"""
        if self.sandbox:
            self.sandbox.kill()
            self.sandbox = None

# Usage
backend = EditorBackend(api_key=os.getenv("HOPX_API_KEY"))
backend.initialize_project("my-project")

# File operations
result = backend.handle_file_request("PUT", "/app.js", "console.log('Hello');")
print(result)

result = backend.handle_file_request("GET", "/app.js")
print(result)

backend.cleanup()

Best Practices

  1. API Design: Design RESTful APIs for file operations
  2. Hot Reload: Implement file watching for live updates
  3. Package Management: Support npm, pip, etc.
  4. Error Handling: Provide clear error messages

Next Steps

  1. Implement WebSocket for real-time updates
  2. Add package installation support
  3. Create frontend editor interface
  4. Implement hot reload functionality
  5. Add collaboration features