MHSanaei
8ee79cf447
Swap the Sparkline chart component (the only chart in the panel) from recharts to uPlot, keeping its public prop API identical so the three consumers (SystemHistoryModal, XrayMetricsModal, NodeHistoryPanel) are untouched. This drops recharts and 32 transitive deps (es-toolkit, victory-vendor, d3, redux, immer), shrinking the chart vendor chunk to ~51KB (22KB gzip). The uPlot port reimplements every recharts feature on canvas: gradient area fill, spline curves, up to three series, dashed horizontal grid, formatted axes, hover tooltip and marker, reference lines, and min/max extrema dots. Because canvas cannot read CSS variables, axis and ring colors are resolved via getComputedStyle and repainted on theme changes through a MutationObserver on the body class and documentElement data-theme. Also removes the es-toolkit/compat resolver shim from vite.config.js, which existed only for recharts, and swaps the manualChunks entry to vendor-uplot. Note: repaint with redraw(false); a bare uPlot redraw() re-runs _setScale and nulls the index-based x-scale, which collapsed the series to a flat, partial line.
3x-ui Documentation
The official documentation and product site for 3x-ui — an advanced web panel for managing Xray-core servers.
Overview
This directory (docs/ in the 3x-ui monorepo) contains
the source for docs.sanaei.dev — a static-first documentation and
marketing site built with Fumadocs on Next.js. It has no backend,
no database, and no auth: every page is prerendered and every tool runs entirely in the
browser.
What's inside
The documentation walks you through 3x-ui from first install to day-to-day operation:
- Getting Started — installation, first login, and updating or uninstalling the panel.
- Configuration — the panel, inbounds, REALITY, transports, clients, subscriptions, and share links.
- Operations — reverse proxy, multi-node setups, outbounds & routing, backup/restore, the Telegram bot, and security.
- Reference — environment variables, the database, ports & firewall, and the HTTP API.
- Help — troubleshooting, FAQ, migration, and how to contribute.
Interactive tools
The site ships with in-browser helpers that generate configuration for you — no data ever leaves your browser:
| Tool | What it does |
|---|---|
| REALITY Config Generator | Build a valid REALITY inbound configuration. |
| Share Link Inspector | Decode and inspect vless:// / vmess:// share links. |
| Install Command Builder | Assemble the right install command for your setup. |
| Reverse Proxy Generator | Generate reverse-proxy configs (Nginx / Caddy). |
| Protocol Wizard | Pick and configure the right protocol for your needs. |
| Firewall Rules Generator | Produce firewall rules for your ports. |
Tech stack
| Layer | Technology |
|---|---|
| Framework | Next.js 16 (App Router) · React 19 |
| Docs | Fumadocs (-ui / -core / -mdx) |
| Styling | Tailwind CSS v4 |
| Search | Orama static index |
| Language | TypeScript (strict) |
| Tests | Vitest for the pure lib/xray logic |
| Tooling | pnpm · ESLint 9 · Prettier |
Quick start
This project uses pnpm (npm lockfiles are gitignored). Run everything
from the docs/ directory:
cd docs
pnpm install
pnpm dev # http://localhost:3000
Useful scripts:
| Script | Description |
|---|---|
pnpm dev |
Start the dev server |
pnpm build |
Production build (also typechecks) |
pnpm typecheck |
Generate MDX/route types and tsc --noEmit |
pnpm lint |
Run ESLint |
pnpm test |
Run unit tests (Vitest) |
See CONTRIBUTING.md for the full list and project conventions.
Project structure
app/ # Next.js App Router — layouts, home, docs, OG images, search, llms.txt
components/ # React components — interactive tools, home sections, MDX bindings
content/docs/ # MDX documentation, one folder per locale (en · fa · ru · zh)
lib/ # source config, i18n, GitHub stats, and the unit-tested lib/xray logic
public/ # static assets — logos, favicon, openapi.json, CNAME
scripts/ # build-time scripts (API reference generation)
source.config.ts # Fumadocs MDX schema & collection config
next.config.mjs # Next.js config (static-export gating)
proxy.ts # i18n middleware
Internationalization
Documentation is authored in English. Persian (fa, RTL), Russian (ru), and
Chinese (zh) locales are wired up; untranslated pages fall back to English so they
never 404. English URLs are unprefixed; other locales live under /fa, /ru, /zh.
Deployment
The site builds for two targets:
- Vercel / Node —
pnpm build(static search index + prerendered OG images). - GitHub Pages (static export) —
DEPLOY_TARGET=static pnpm build→out/.
Contributing
Contributions are welcome! Setup, scripts, and project conventions live in
CONTRIBUTING.md.
License
Licensed under GPL-3.0.