https://github.com/juev/preview
Modern single-page application for viewing formatted source code of web pages
https://github.com/juev/preview
javascript nodejs web
Last synced: 5 months ago
JSON representation
Modern single-page application for viewing formatted source code of web pages
- Host: GitHub
- URL: https://github.com/juev/preview
- Owner: juev
- Created: 2025-08-13T07:45:03.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2026-01-02T00:03:02.000Z (6 months ago)
- Last Synced: 2026-01-07T12:34:33.641Z (6 months ago)
- Topics: javascript, nodejs, web
- Language: JavaScript
- Homepage: https://denis.evsyukov.org
- Size: 34.2 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Web Page Source Viewer
Modern single-page application for viewing formatted source code of web pages.
## Features
- ✨ Clean architecture with vanilla JS without unnecessary dependencies
- 🎨 Modern responsive design
- 🔍 Automatic programming language detection
- 🖼️ Syntax highlighting with Prism.js
- 🔄 SPA routing via History API
- 🛡️ Security with Helmet and URL validation
- 📱 Fully responsive interface
## Installation and Launch
```bash
npm install
npm start
```
The application will be available at:
## Project Structure
```
web-page-preview/
├── server/
│ └── app.js # Express server with API
├── public/
│ ├── index.html # Main HTML page
│ ├── app.js # Frontend logic and routing
│ └── styles.css # Application styles
└── package.json # Dependencies and scripts
```
## How to Use
1. Open the main page
2. Enter a web page URL (e.g., )
3. Click "View Source" or press Enter
4. View the formatted source code with syntax highlighting
## Technologies
- **Backend**: Node.js + Express
- **Frontend**: Vanilla JavaScript (ES6+)
- **Code highlighting**: Prism.js
- **Security**: Helmet, CORS
- **Styles**: CSS3 with Flexbox/Grid
## API Endpoints
### GET /api/fetch-source?url=
Fetches and formats the source code of the specified page.
**Parameters:**
- `url` - Web page URL for analysis
**Response:**
```json
{
"url": "https://example.com",
"language": "html",
"content": "...",
"formattedCode": "...",
"size": 1234,
"contentType": "text/html"
}
```