Experience SubStream live in your browser:
- Client-Side Privacy: All extraction and parsing is performed locally in the browser, ensuring your subscription URL and config data never leave your device.
- Universal Protocol Support: Automatically detects and parses common VPN/proxy protocols, including
VMess,VLESS,Shadowsocks (SS),Trojan,Hysteria2, andTUIC. - Intelligent Parsing: Decodes Base64-encoded subscription content and individual configs (like VMess) for clear display of protocol type, server name, host, port, and additional tags (e.g.,
TLS,gRPC,WS). - Robust Management Tools:
- Filtering: Real-time search across all configuration details.
- QR Code Generation: Create QR codes for both individual raw configurations and the original subscription link.
- Batch Actions: Copy all configurations or export them into a single
.txtfile.
- Enhanced UX: Features a Dark Mode toggle, CORS Proxy option for bypassing fetch restrictions, and saves the last used URL and configs via
localStorage.
SubStream is a front-end application and requires only a web browser to run.
- Clone the repository:
git clone [https://github.com/WhoisNeon/Sub-Stream.git](https://github.com/WhoisNeon/Sub-Stream.git) cd Sub-Stream - Open
index.html: Simply open theindex.htmlfile in your preferred web browser.
- Input URL: Paste your subscription URL into the input field.
- Toggle CORS (Optional): Enable "Use CORS Proxy" if you encounter network errors when fetching the subscription, which routes the request through a public proxy.
- Extract: Click the "Extract" button (or "Paste & Extract" if the field is empty, which uses clipboard detection).
- Manage: Use the search bar to filter, or use the toolbar buttons (Copy All, Export, Sub QR) for batch actions.
| Technology | Purpose | Icon |
|---|---|---|
| HTML5 | Structure and Semantic Markup |  |
| Tailwind CSS 3.x | Utility-first, responsive styling, and theming |  |
| Pure JavaScript (ES Modules) | Core logic, fetching, parsing, and DOM manipulation |  |
| QRCode.js | Client-side QR code generation |  |
| Phosphor Icons | Clean and modern interface icons |  |
The project maintains a flat, modular structure:
src/
├── assets/ # favicon, and other media assets
├── css/ # Stylesheets
│ ├── notif.css # Styling for the animated notification system
│ └── style.css # Custom scrollbar, animations (fadeInUp), and utility styles
├── js/ # JavaScript files
│ ├── notif.js # Notification system module (showNotif export)
│ └── script.js # Main application logic, fetch handler, parser, and rendering
└── index.html # Main entry point and UI structure
The core logic resides in the parseConfig function within script.js. It handles the complexity of identifying the protocol and extracting necessary connection parameters:
// ... inside parseConfig(rawConfig)
if (protocol === 'vmess') {
const b64 = rawConfig.substring(8); // Remove "vmess://"
const json = JSON.parse(safeB64Decode(b64)); // Decode Base64 payload
name = json.ps || 'VMess';
address = json.add;
port = json.port;
if (json.tls === 'tls') tags.push('TLS');
if (json.net) tags.push(json.net.toUpperCase());
}
// ... other protocols use URL class for parsingThe application uses safeB64Decode to correctly handle Base64 decoding, ensuring support for URL-safe characters (-, _) and automatic padding.
We welcome contributions! If you have suggestions for new protocol support or logic improvements, please feel free to open an issue or submit a Pull Request.
- Fork the Project.
- Create your Feature Branch (
git checkout -b feature/new-protocol). - Commit your Changes (
git commit -m 'feat: added TUIC support'). - Push to the Branch (
git push origin feature/new-protocol). - Open a Pull Request.
This project is licensed under the MIT License.