SimuliX Web Editor

A modern, browser-based code editor for the SimuliX language with multi-file support, syntax highlighting, and integrated execution environment.

Overview

SimuliX Web Editor is a specialized code editor designed for the SimuliX programming language, which is used for financial modeling and simulation. The editor provides a complete development environment in the browser with features similar to desktop IDEs.

Features

• Multi-File Editor: Tab-based interface for managing multiple SimuliX files
• Syntax Highlighting: Custom syntax highlighting for SimuliX language constructs
• Auto-Completion: Intelligent code completion for keywords and functions
• Integrated Execution: Compile and run SimuliX code directly in the browser
• Responsive Design: Works on desktop and mobile devices
• File Management: Create, rename, and delete files within the editor

Technology Stack

Frontend

• Monaco Editor: Core editing component providing VS Code-like editing experience
• JavaScript: Client-side logic for editor functionality
• HTML/CSS: User interface and styling
• Responsive Design: Mobile-first approach with media queries

Backend

• Flask: Python web framework for backend services
• Nginx: Reverse proxy and static file serving
• Docker: Containerization for consistent deployment

Infrastructure

• Docker Compose: Multi-container application orchestration
• REST API: Communication between frontend and backend

Architecture

graph TB
    A[Browser] --> B[Nginx Proxy]
    B --> C[Static Files]
    B --> D[Flask App]
    D --> E[SimuliX Compiler]

The application follows a client-server architecture where:

1. Nginx serves as a reverse proxy and static file server
2. Static assets (HTML, CSS, JS) are served directly by Nginx for performance
3. Dynamic requests are proxied to the Flask backend
4. The Flask application handles code compilation and execution

Getting Started

Prerequisites

• Docker and Docker Compose
• Modern web browser

Installation

1. Clone the repository:

   git clone https://github.com/your-username/simulix-web.git

2. Navigate to the project directory:

   cd simulix-web

3. Start the application using Docker Compose:

   docker-compose up -d

4. Access the application at http://localhost

Usage

1. Write SimuliX code in the editor
2. Use the tab interface to manage multiple files
3. Click "RUN" or press Ctrl+Enter to compile and execute
4. View output in the right panel

Keyboard Shortcuts

Shortcut	Action
Ctrl+N	Create new file
Ctrl+Enter	Run code
F2	Rename current file
Escape	Close modals and menus

SimuliX Language Features

The editor supports the following SimuliX language constructs:

• Variable declarations (var)
• Data types (Integer, real)
• Control structures (for, if, while)
• I/O operations (read, write)
• Special functions (heston model for options pricing)

Example code:

var i,n: Integer
var S0, Snew: real
var H: heston(S, t, V, a, b, c, d, rho)
read(S0)
for i = 1, 100
  S0 = Snew
end for
write(S0)

Project Structure

simulix-web/
├── nginx/              # Nginx configuration
│   └── nginx.conf
├── static/             # Frontend assets
│   ├── index.html      # Main HTML file
│   ├── script.js       # Editor logic
│   └── style.css       # Styling
├── docker-compose.yml  # Docker configuration
├── Dockerfile          # Application container
├── requirements.txt    # Python dependencies
└── README.md           # This file

Configuration

Nginx Configuration

The Nginx configuration is optimized for:

• Static file caching with long expiration times
• Reverse proxy to Flask backend
• Security headers and request limiting
• MIME type enforcement

Editor Configuration

The Monaco editor is configured with:

• Custom language definition for SimuliX
• Syntax highlighting rules
• Auto-completion providers
• Custom color theme

Development

Backend Development

The Flask backend handles:

• Code compilation requests
• File management
• Execution environment

Frontend Development

To modify the frontend:

1. Edit files in the static/ directory
2. Changes are immediately visible (no build step required)
3. The editor supports hot reloading

Deployment

The application is designed for containerized deployment using Docker. The included Docker Compose file sets up:

1. Nginx Service: Serves static files and proxies dynamic requests
2. Flask Service: Handles code execution and API requests
3. Network Configuration: Internal networking between services

Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push to the branch
5. Create a Pull Request

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

Popa Andrian

Acknowledgments

• Monaco Editor team for the excellent code editing component
• Financial modeling community for the SimuliX language specification