ashnehete/beautiful-http

Create and share beautiful screenshots of your HTTP request and response.

โ˜… 0Forks 0CSSGitHub โ†—Compare

README

Beautiful HTTP

Create stunning, presentation-ready images of your HTTP requests.

Beautiful HTTP is a simple web tool that allows you to draft HTTP requests (Method, Path, Headers, Body) in a beautiful, macOS-inspired window and export them as high-quality PNG images. Perfect for documentation, slides, and technical demos.

โœจ Features

  • Premium Aesthetics: Dark mode, mesh gradients, glassmorphism, and polished typography.
  • Dynamic Method Coloring: Automatically color-codes HTTP methods (GET, POST, PUT, DELETE).
  • Syntax Highlighting: Real-time JSON syntax highlighting for the request body.
  • Instant Export: Download your request as a crisp PNG with a single click.
  • Edit Anywhere: Fully editable path, headers, and body areas.

๐Ÿš€ Usage

  1. Open index.html in your web browser.
  2. Edit the request details:
    • Select the HTTP Method.
    • Type the API path.
    • Add your Headers.
    • Paste or type your JSON Body.
  3. Download: Click the "Download PNG" button to save the image.

๐Ÿ›  Technologies

  • Vanilla HTML/CSS/JS: Lightweight and fast.
  • html2canvas: For generating the screenshot.
  • PrismJS: For beautiful JSON syntax highlighting.
  • CodeJar: For the lightweight micro-code editor.
  • Google Fonts: Using 'Roboto Mono' for that developer aesthetic.

License

MIT

Disclaimer

This project contains code generated by an AI assistant.

Contributors

ashnehete

Issues