Add screenshots API docs + blog

src/routes/blog/post/announcing-screenshots-api/+page.markdoc

@@ -0,0 +1,103 @@
+---
+layout: post
+title: "Announcing Screenshots API: Generate pixel-perfect webpage screenshots on demand"
+description: Appwrite's new Screenshots API lets you generate screenshots of any public webpage with a single API call. Control browser environment, device settings, locale, and more without needing to configure your own headless browser infrastructure.
+date: 2026-01-21
+cover: /images/blog/announcing-screenshots-api/cover.png
+timeToRead: 5
+author: aditya-oberai
+category: announcement
+featured: false
+callToAction: true
+---
+
+Capturing consistent, high-quality screenshots of web pages is harder than it should be.
+
+What starts as a simple requirement, “render this page as an image,” quickly turns into a fragile setup of headless browsers, custom scripts, and environment-specific workarounds. Fonts render differently across machines. Animations race your screenshot timer. Cookie banners and permission prompts block content. Pages behave one way locally and another in CI. Keeping screenshots reliable across devices, locales, and time zones often means babysitting a complex Playwright or Puppeteer pipeline that breaks the moment a browser update lands.
+
+Most teams do not want to run their own headless browser infrastructure. They just want the result.
+
+Today, we are excited to announce the **Screenshots API**, a new addition to **Appwrite Avatars**, that lets you generate fully customizable webpage screenshots with a single API call, without maintaining any headless browser infrastructure.
+
+# Capture webpages exactly as users see them
+
+The Screenshots API allows you to capture screenshots of any public webpage while controlling the browser environment in which it is rendered.
+
+With one request, you can customize:
+
+- Browser viewport size and device scale
+- Light or dark theme rendering
+- Full-page or viewport-only screenshots
+- Custom headers, user agents and locales
+- Timezone and geolocation simulation
+- Touch support and browser permissions
+- Output format, dimensions, and quality
+
+This means your screenshots are no longer best guesses. They are accurate representations of real user experiences.
+
+# Built for real-world developer workflows
+
+Screenshots are not just images. They are an essential building block for modern developer workflows.
+
+The Screenshots API is designed for use cases like:
+
+- Generating visual documentation automatically
+- Creating rich link previews for apps and dashboards
+- Running QA checks across devices and browsers
+- Validating responsive and localized layouts
+- Archiving web pages for compliance and records
+- Powering automated reports and visual dashboards
+
+Instead of maintaining your own headless browser infrastructure, you can rely on a managed, consistent API that scales with your application.
+
+# Simple API, powerful customization
+
+Getting started with the Screenshots API is as simple as providing a URL.
+
+```js
+import { Client, Avatars } from "appwrite";
+
+const client = new Client()
+  .setEndpoint("https://<REGION>.cloud.appwrite.io/v1")
+  .setProject("<PROJECT_ID>");
+
+const avatars = new Avatars(client);
+
+const screenshot = avatars.getScreenshot({
+  url: "https://appwrite.io"
+});
+
+console.log(screenshot);
+```
+
+From there, you can dial in exactly how the page should be rendered.
+
+Capture mobile, tablet, or desktop views. Enable full-page scrolling. Render pages in dark mode. Simulate a specific country, language, or timezone. Even pre-grant browser permissions to avoid blocked or degraded states.
+
+# Simulate browsers, devices, and locations
+
+Modern web apps behave differently depending on where and how they are accessed. The Screenshots API lets you reflect that reality.
+
+You can:
+
+- Test responsive layouts across viewport sizes
+- Verify localized content using different locales and timezones
+- Capture region-specific content with geolocation simulation
+- Render pages as touch devices or desktop browsers
+- Validate pages that depend on browser permissions
+
+This makes it easier to test, document, and ship with confidence.
+
+# Part of Appwrite Avatars
+
+The Screenshots API lives alongside other Avatars endpoints, making it easy to integrate into existing Appwrite projects. Whether you are generating previews, reports, or automated documentation, screenshots become just another API resource you can depend on.
+
+# Available now
+
+The Screenshots API is available today as part of Appwrite Avatars. You can start generating screenshots immediately using the Appwrite SDKs and REST API.
+
+This API is already being used in production by [Imagine](https://imagine.dev) to generate real-time preview screenshots for projects built on the platform, validating it against real user traffic.
+
+To get started, head over to the [documentation](/docs/products/avatars/screenshots) and try it out in your next project.
+
+As always, we would love to see what you build with it.

src/routes/changelog/(entries)/2026-01-20.markdoc

@@ -0,0 +1,27 @@
+---
+layout: changelog
+title: "Announcing Screenshots API: Generate pixel-perfect webpage screenshots on demand"
+date: 2026-01-21
+cover: /images/blog/announcing-screenshots-api/cover.png
+---
+
+We're excited to announce the **Screenshots API**, a new addition to Appwrite Avatars that lets you generate fully customizable webpage screenshots with a single API call.
+
+No more headless browser infrastructure to maintain. No more environment-specific workarounds. Just simple, reliable screenshot generation.
+
+# What you can do
+
+- Capture any public webpage as an image
+- Simulate an authenticated experience via custom request headers
+- Control browser viewport size and device scale
+- Render in light or dark theme
+- Simulate different locales, timezones, and geolocation
+- Pre-grant browser permissions
+- Generate full-page or viewport-only screenshots
+- Customize output format, dimensions, and quality
+
+The Screenshots API is available today as part of Appwrite Avatars and is already being used in production by [Imagine](https://imagine.dev).
+
+{% arrow_link href="/docs/products/avatars/screenshots" %}
+Get started with Screenshots API
+{% /arrow_link %}

src/routes/docs/products/avatars/+layout.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
     import Docs from '$lib/layouts/Docs.svelte';
     import Sidebar, { type NavParent, type NavTree } from '$lib/layouts/Sidebar.svelte';
+    import { isNewUntil } from '$lib/utils/date';
 
     const parent: NavParent = {
         href: '/docs',
@@ -48,6 +49,11 @@
                     label: 'Favicons',
                     href: '/docs/products/avatars/favicons'
                 },
+                {
+                    label: 'Screenshots',
+                    new: isNewUntil('28 Feb 2026'),
+                    href: '/docs/products/avatars/screenshots'
+                },
                 {
                     label: 'Image proxy',
                     href: '/docs/products/avatars/image-manipulation'

src/routes/docs/products/avatars/+page.markdoc

@@ -36,6 +36,9 @@ Get payment method logos for checkout flows and transaction displays.
 {% cards_item href="/docs/products/avatars/favicons" title="Favicons" %}
 Fetch favicons from remote websites for link previews and bookmark displays.
 {% /cards_item %}
+{% cards_item href="/docs/products/avatars/screenshots" title="Screenshots" %}
+Capture webpage screenshots with customizable viewport, theme, and browser settings.
+{% /cards_item %}
 {% cards_item href="/docs/products/avatars/image-manipulation" title="Image proxy" %}
 Transform remote images with resizing, cropping, and quality adjustments.
 {% /cards_item %}