Web Screenshot

A single-page application for capturing pixel-perfect screenshots of any webpage, powered by scr-api.tbdh.app.

Features

• URL form with client-side validation (protocol, hostname, format)
• Configurable options — viewport dimensions, image format, full-page capture, ad blocking, timeout, device scale factor
• Live preview of the captured screenshot directly in the browser
• One-click download of the resulting image
• Copy API URL to reuse the exact request
• Built with Vue 3 + shadcn-vue + Tailwind CSS v4

Tech Stack

Framework	Vue 3 (Composition API, <script setup>)
Language	TypeScript
Build	Vite 8
UI	shadcn-vue (reka-ui), Tailwind CSS v4
Icons	Lucide Vue
Font	JetBrains Mono

Getting Started

# Install dependencies
bun install

# Start dev server
bun run dev

# Build for production
bun run build

# Preview production build
bun run preview

The dev server runs at http://localhost:5173.

Usage

1. Enter a website URL (must start with http:// or https://)
2. Configure options as needed
3. Click Take Screenshot
4. View, download, or open the result in a new tab

Screenshot Options

Option	Type	Default	Description
width	number	1920	Viewport width in pixels
height	number	1080	Viewport height in pixels
imageType	select	png	Image format: png, jpeg, or webp
waitTimeout	number	5	Seconds to wait for page load
fullPage	toggle	false	Capture the full scrollable page
useAdblock	toggle	false	Block ads before capturing
deviceScaleFactor	select	1	Device pixel ratio: 0, 1, 2, or 3

API

The app calls GET https://scr-api.tbdh.app/s with query parameters for each option. The response is the image binary with the appropriate Content-Type header.

Example request:

https://scr-api.tbdh.app/s?url=https%3A%2F%2Fexample.com&width=1920&height=1080&fullPage=false&imageType=png&waitTimeout=5&useAdblock=false&deviceScaleFactor=1

Project Structure

src/
├── main.ts                      # App entry point
├── App.vue                      # Root component
├── style.css                    # Tailwind + shadcn-vue theme
├── components/
│   ├── ScreenshotTool.vue       # Main screenshot form + result
│   ├── EmptyScreenshot.vue      # Empty state illustration
│   └── ui/                      # shadcn-vue components
│       ├── button/
│       ├── input/
│       ├── select/
│       └── switch/
└── lib/
    └── utils.ts                 # cn() utility for class merging

License

© 2026