Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.hopx.ai/llms.txt

Use this file to discover all available pages before exploring further.

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