A powerful JavaScript web application for optimizing HTML content for readability and print using various optimization libraries.
- Multi-Library Support: Choose from 7 different optimization libraries
- Side-by-Side Comparison: View original and optimized content simultaneously
- Ad Removal: Automatically removes advertisements and unwanted content
- Text Extraction: Preserves important content while removing clutter
- Image Optimization: Retains images with optimized sizing
- Print Optimization: Layouts optimized for printing
- Download & Copy: Save or copy optimized content
- Responsive Design: Works on desktop and mobile devices
- Cheerio - Server-side HTML parsing and manipulation
- Readability.js - Content extraction similar to Firefox Reader Mode
- Puppeteer - Browser automation with Chrome/Chromium
- Playwright - Cross-browser automation (Chrome, Firefox, Safari)
- Prettier - Code formatter with reading optimization
- JS-Beautify - HTML beautifier with style enhancement
- DOMParser - Native browser APIs for lightweight processing
- Clone the repository:
git clone <repository-url>
cd HTMLOptimization- Install dependencies:
npm install- Start the server:
npm start- Open your browser and navigate to:
http://localhost:3000
- Enter a website URL in the input field
- Select an optimization library from the dropdown
- Click "Optimize Content" to process the webpage
- Compare the original and optimized content side-by-side
- Use the action buttons to copy, print, or download the content
Optimizes HTML content using the specified library.
Request Body:
{
"url": "https://example.com",
"library": "cheerio"
}Response:
{
"success": true,
"originalContent": "<html>...",
"optimizedContent": "<html>...",
"library": "cheerio",
"url": "https://example.com"
}Health check endpoint.
| Library | Strength | Use Case |
|---|---|---|
| Cheerio | Fast server-side parsing | Basic content extraction |
| Readability.js | Article detection | News articles, blogs |
| Puppeteer | Full browser rendering | JavaScript-heavy sites |
| Playwright | Cross-browser compatibility | Modern web applications |
| Prettier | Code formatting | Clean HTML structure |
| JS-Beautify | HTML beautification | Code readability |
| DOMParser | Lightweight processing | Simple optimizations |
npm start- Start the production servernpm run dev- Start development server with auto-restartnpm run build- Install dependencies
HTMLOptimization/
├── public/
│ ├── index.html # Main UI
│ ├── styles.css # Styling
│ └── script.js # Frontend logic
├── services/
│ └── optimizationService.js # Backend optimization logic
├── server.js # Express server
├── package.json # Dependencies
└── README.md # Documentation
- Removes common ad selectors
- Eliminates promotional content
- Cleans navigation and sidebar elements
- Identifies main article content
- Preserves important text formatting
- Maintains semantic HTML structure
- Responsive image sizing
- Proper alt text preservation
- Print-friendly image placement
- Optimized typography for print
- Proper page breaks
- High contrast for readability
- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+
- express: Web server framework
- cors: Cross-origin resource sharing
- cheerio: Server-side HTML parsing
- jsdom: DOM implementation
- puppeteer: Browser automation
- playwright: Cross-browser automation
- js-beautify: HTML beautification
- prettier: Code formatting
- axios: HTTP client
- nodemon: Development server with auto-restart
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
MIT License - see LICENSE file for details
For issues and questions:
- Check the console for error messages
- Verify the URL is accessible
- Try different optimization libraries
- Check network connectivity
- Custom optimization rules
- Batch URL processing
- PDF export functionality
- More output formats
- API rate limiting
- Content caching
- User preferences storage