Fragment - Collaborative IDE

A high-performance, real-time collaborative coding environment built with Go, Templ + HTMX, and WebAssembly.

Features

• Real-time Collaboration: Multi-user coding with live cursor tracking and presence.
• WebAssembly Runtime: Secure client-side execution of Go code.
• Integrated Terminal: Browser-based terminal with command history.
• File Explorer: Full file tree management for multi-file projects.
• Live Chat: Integrated team chat for session participants.
• Session Persistence: Automatic saving of code, file tree, and chat history.
• Shareable Sessions: One-click link sharing with "live" status indicators.

Tech Stack

• Backend: Go 1.21+ (Gorilla Mux)
• Database: PostgreSQL with GORM
• Frontend: Templ (Server-Side Rendering) + Tailwind CSS v4
• Real-time: Gorilla WebSocket
• Runtime: WebAssembly (WASM)
• Dev Tools: Air (Hot Reload), Docker (Sandboxed Compilation)

Prerequisites

• Go 1.21+
• Bun (for Tailwind CSS)
• PostgreSQL
• Docker (for secure compilation)

Setup

1. Install dependencies:

go mod download
go install github.com/a-h/templ/cmd/templ@latest
go install github.com/air-verse/air@latest

2. Set up your environment variables:

cp .env.example .env
# Edit .env with your database credentials

Development

Available Commands

• make build - Build the complete application (CSS + Templ + Go binary)
• make start - Build and run the server (production-like)
• make dev - Start development server with hot reload (Air)
• make test - Run all tests
• make templ - Generate Templ files only
• make css - Build Tailwind CSS only
• make css-watch - Watch and rebuild CSS on changes
• make clean - Remove all build artifacts

Development Workflow

For the best development experience, use:

make dev

This will:

• Watch for changes in .go, .templ, and .html files
• Automatically regenerate Templ files
• Rebuild and restart the server
• Keep your development flow smooth

The server will be available at http://localhost:8080

Production Build

make build
make start

Project Structure

.
├── cmd/           # Application entry points
├── config/        # Configuration files
├── internal/      # Private application code
│   ├── handler/   # HTTP handlers (View, API, Compile)
│   ├── middleware/# HTTP middleware
│   ├── models/    # Database models
│   ├── repository/# Data access layer
│   └── websocket/ # Real-time hub and handlers
├── pkg/           # Public libraries (Storage, etc.)
├── public/        # Static assets (WASM runtime, JS)
├── views/         # Templ templates
│   ├── components/# Reusable UI components (Editor, Terminal, Chat)
│   └── layouts/   # Page layouts
└── main.go        # Application entry point