(READ ONLY) Margin is an open annotation layer for the internet. Powered by the AT Protocol.
margin.at
extension
web
atproto
comments
1# Margin
2
3_Write in the margins of the web_
4
5A web annotation layer built on [AT Protocol](https://atproto.com) that lets you annotate, highlight, and bookmark any URL on the internet.
6
7## Project Structure
8
9```
10margin/
11├── lexicons/ # AT Protocol lexicon schemas
12│ └── at/margin/
13│ ├── annotation.json
14│ ├── bookmark.json
15│ ├── collection.json
16│ ├── collectionItem.json
17│ ├── highlight.json
18│ ├── like.json
19│ ├── reply.json
20│ ├── apikey.json
21│ ├── preferences.json
22│ └── profile.json
23├── backend/ # Go API server
24│ ├── cmd/server/
25│ └── internal/
26├── web/ # Astro SSR + React web app
27│ └── src/
28├── extension/ # Browser extension (WXT)
29│ └── src/
30└── avatar/ # Cloudflare Worker for avatar proxying
31```
32
33## Getting Started
34
35### Docker (Recommended)
36
37Run the full stack with Docker:
38
39```bash
40docker compose up -d --build
41```
42
43This builds both the Go backend and the Astro frontend into a single container. The Astro SSR server handles all frontend routing, static assets, and OG image generation, while the Go backend serves the API internally.
44
45### Development
46
47#### Backend
48
49```bash
50cd backend
51go mod tidy
52go run ./cmd/server
53```
54
55API server runs on http://localhost:8081
56
57#### Web App
58
59```bash
60cd web
61bun install
62bun run dev
63```
64
65Dev server runs on http://localhost:4321 and proxies API requests to the backend.
66
67#### Browser Extension
68
69Built with [WXT](https://wxt.dev):
70
71```bash
72cd extension
73bun install
74bun run dev # Chrome dev mode
75bun run dev:firefox # Firefox dev mode
76```
77
78## Architecture
79
80In production, a single Docker container runs both services:
81
82- **Astro SSR** (port 8080, public) — serves the web app, handles SSR for OG meta tags, generates dynamic OG images via satori, and proxies API/auth requests to the backend.
83- **Go API** (port 8081, internal) — handles all API endpoints, OAuth, firehose ingestion, and data storage.
84
85## Domain
86
87**Domain**: `margin.at`
88**Lexicon Namespace**: `at.margin.*`
89
90## Tech Stack
91
92- **Backend**: Go + Chi + SQLite
93- **Frontend**: Astro 5 (SSR) + React 19 + Tailwind CSS
94- **OG Images**: satori + @resvg/resvg-js
95- **Extension**: WXT + React + Tailwind CSS
96- **Protocol**: AT Protocol (Bluesky)
97
98## Sponsors
99
100Thank you for making Margin possible!
101
102### Infrastructure Sponsor
103
104**Bryan**
105[@chaosgreml.in](https://bsky.app/profile/chaosgreml.in)
106
107### GitHub Sponsors
108
109<!-- sponsors --><!-- sponsors -->
110
111## Translations
112
113Help translate Margin at [translate.margin.at](https://translate.margin.at/engage/margin/).
114
115<a href="https://translate.margin.at/engage/margin/"><img src="https://translate.margin.at/widget/margin/svg-badge.svg" alt="Translation status"></a>
116
117## License
118
119MIT