📋 Table of Contents

• Live Demo
• Features
• Usage
• Tech Stack
• File Structure
• Protocol Parsing
• Contributing
• License

---

🔴 Live Demo

Experience SubStream live in your browser:

---

✨ Features

• 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, and TUIC.
• 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 .txt file.
• Enhanced UX: Features a Dark Mode toggle, CORS Proxy option for bypassing fetch restrictions, and saves the last used URL and configs via localStorage.

---

🚀 Usage

SubStream is a front-end application and requires only a web browser to run.

Local Setup

1. Clone the repository:

   git clone [https://github.com/WhoisNeon/Sub-Stream.git](https://github.com/WhoisNeon/Sub-Stream.git)
   cd Sub-Stream

2. Open index.html: Simply open the index.html file in your preferred web browser.

Application Workflow

1. Input URL: Paste your subscription URL into the input field.
2. Toggle CORS (Optional): Enable "Use CORS Proxy" if you encounter network errors when fetching the subscription, which routes the request through a public proxy.
3. Extract: Click the "Extract" button (or "Paste & Extract" if the field is empty, which uses clipboard detection).
4. Manage: Use the search bar to filter, or use the toolbar buttons (Copy All, Export, Sub QR) for batch actions.

---

🛠️ Tech Stack

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

---

📂 File Structure

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

---

🧠 Protocol Parsing

The core logic resides in the parseConfig function within script.js. It handles the complexity of identifying the protocol and extracting necessary connection parameters:

VMess Example

// ... 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 parsing

The application uses safeB64Decode to correctly handle Base64 decoding, ensuring support for URL-safe characters (-, _) and automatic padding.

---

🤝 Contributing

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.

1. Fork the Project.
2. Create your Feature Branch (git checkout -b feature/new-protocol).
3. Commit your Changes (git commit -m 'feat: added TUIC support').
4. Push to the Branch (git push origin feature/new-protocol).
5. Open a Pull Request.

---

📄 License

This project is licensed under the MIT License.