Simple Web Editor

A web-based code editor built with Rust. Features a Yew WebAssembly frontend and Rocket backend API for real-time file editing, Git integration and site rendering.

Yew Documentation · Rocket Documentation · Report Bug · Request Feature

Table of Contents

1. About The Project
• Screenshots
• Built With
2. Architecture
   • Editor GUI
   • Site Renderer & API
3. Features
4. Deployment
• Using Docker
• Using Docker Compose
5. Contributing
6. License
7. Contact

About The Project

Simple Web Editor (SWE) is a lightweight, web-based code editor designed for static site development: a self-hosted alternative to GitHub Pages. It uses a two-part architecture optimized for real-time web editing, built with Rust technologies and containerized for easy deployment.

The editor provides an intuitive interface for managing files and editing code with syntax highlighting. Repositories can be pulled directly from the interface, making version control and collaboration effortless.

Screenshots

Login Interface	Code Editor
Git Configuration	Theme Customization

Example:

• 🌐 Static Site Output: aichan.moe - Example of a site built and served through SWE

Example of a personal website built and deployed using Simple Web Editor

(back to top)

Built With

(back to top)

Architecture

Simple Web Editor uses a two-part architecture that separates the editor interface from the site rendering and API services.

Editor GUI

Access: https://swe.example.com or http://127.0.0.1:80
Technology: Rust Yew (compiled to WebAssembly)

• Presents a file-browser sidebar and an in-browser code editor
• Allows you to create, rename, move, delete and edit any file that belongs to the site
• Features syntax highlighting and customizable themes
• Saves changes by calling the SWE API over HTTPS (JSON / WebSocket)

Site Renderer & API

Access: https://example.com or http://127.0.0.1:8000
Technology: Rust Rocket

• Exposes all API routes used by the GUI
• Renders the public site at the root domain
• Serves static assets from /public_site (e.g., images, CSS, JS)
• Handles authentication and file operations

(back to top)

Features

• 🎨 Customizable Syntax Highlighting - Create and manage custom themes with live preview
• 🔄 Git Integration - Built-in Git operations with automatic synchronization
• 💾 Persistent Theme Storage - Themes saved to server with localStorage fallback
• 🔐 Authentication - Secure token-based authentication system
• 📁 File Management - Complete file browser with create, edit, move, delete operations
• ⚡ Real-time Updates - WebSocket-based live updates and collaboration
• 🌐 WebAssembly Performance - Fast, native-speed execution in the browser

(back to top)

Deployment

You have multiple options to deploy Simple Web Editor:

Using Docker

Run the pre-built container:

docker run --rm -it \
  -p 80:80/tcp \
  -p 8000:8000/tcp \
  -p 8080:8080/tcp \
  -e ROCKET_ADDRESS=0.0.0.0 \
  -e ROCKET_PORT=8000 \
  -e API_URL=http://127.0.0.1:8000/ \
  -e EDITOR_URL=http://127.0.0.1:8080/ \
  -e ADMIN_PASSWORD=<YOUR_PASSWORD> \
  -e ROCKET_LOG_LEVEL=debug \
  git.prisma.moe/aichan/simple_web_editor:latest

Using Docker Compose

Create a docker-compose.yml file:

services:
  simple_web:
    container_name: simple_web_editor
    image: git.prisma.moe/aichan/simple_web_editor:latest
    ports:
      - <YOUR_PORT>:8000 # API and Renderer
      - <YOUR_PORT>:80   # Editor
    environment:
      - ROCKET_ADDRESS=0.0.0.0
      - ROCKET_PORT=8000
      - ADMIN_PASSWORD=<YOUR_PASSWORD>
      - API_URL=<YOUR_API_URL>
      - EDITOR_URL=<YOUR_EDITOR_URL>
    volumes:
      - ./simple_web_editor/public_site:/public_site
    restart: unless-stopped

Then run:

docker-compose up -d

Access Points:

• API will be served at http://127.0.0.1:8000/
• Editor will be served at http://127.0.0.1:80/

(back to top)

Contributing

Contributions are welcome! Please fork the repository, make your changes, and open a pull request.

1. Fork the Project on Forgejo
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the European Union Public License v1.2. See LICENSE for more information.

(back to top)

Contact

Aitor Astorga Saez de Vicuña - a.astorga.sdv@protonmail.com

Project Link: https://git.prisma.moe/aichan/simple_web_editor

(back to top)

Acknowledgments

Thanks to these amazing projects and technologies!

• Rust Yew - A modern Rust framework for creating multi-threaded front-end web apps with WebAssembly
• Rocket - A web framework for Rust that makes it simple to write fast, secure web applications
• WebAssembly - A binary instruction format for a stack-based virtual machine

(back to top)