3x-ui can render your users' subscription pages from your own custom HTML templates.
- Go to the 3x-ui panel settings.
- Under Settings → Subscription → Information, locate the Sub Theme Directory field.
- Provide the absolute path to the folder containing your template (e.g.
/etc/3x-ui/sub_templates/my-theme/). - Save the settings.
Note: 3x-ui does not ship any templates by default. Create your own template folder anywhere on the server, put an
index.html(orsub.html) inside it, and point Sub Theme Directory at that absolute path. Leave the field empty to use the default built-in page.
A custom template must be an HTML file named index.html or sub.html located within the directory you specified in the settings.
The panel uses standard Go html/template to render the subscription page.
When rendering the template, the following variables are injected into the template context ({{ .variable }}):
{{ .sId }}: Subscription ID (UUID).{{ .enabled }}: Whether the subscription/client is enabled (boolean).{{ .download }}: Formatted download traffic (e.g. "2.5 GB").{{ .upload }}: Formatted upload traffic.{{ .total }}: Formatted total traffic limit.{{ .used }}: Formatted used traffic (download + upload).{{ .remained }}: Formatted remaining traffic.{{ .expire }}: Expiration time as an int64 Unix timestamp in seconds (0means never). Multiply by 1000 for a JavaScriptDate.{{ .lastOnline }}: Last online time as an int64 Unix timestamp in milliseconds (0means never seen).{{ .downloadByte }}: Download traffic in exact bytes (int64).{{ .uploadByte }}: Upload traffic in exact bytes (int64).{{ .totalByte }}: Total traffic limit in exact bytes (int64).{{ .subUrl }}: The URL of the subscription page.{{ .subJsonUrl }}: The URL for the JSON configuration of the subscription.{{ .subClashUrl }}: The URL for the Clash/Mihomo configuration.{{ .subTitle }}: The subscription title configured in the panel (Subscription → Information). Useful for page branding/headings. May be empty.{{ .subSupportUrl }}: The support URL configured in the panel. Useful for a "Contact support" link. May be empty.{{ .links }}: A list (slice) of string configurations (VMess, VLESS, etc. URLs). You can loop through them using{{ range .links }} ... {{ end }}.{{ .emails }}: A list (slice) of emails related to the subscription.{{ .datepicker }}: Current calendar format used by the panel (e.g. "gregorian" or "jalali").