A Serverless URL Shortener in a Single CloudFormation Script

Michael Fleck — Thu, 02 Apr 2026 11:31:21 +0000

Most URL shorteners are managed SaaS products that require you to send your data to third-party servers. If you want to maintain data sovereignty without the overhead of managing a complex application, we’ve condensed a full serverless stack into a single template.yaml script.

The "One Script" USP

There are no external dependencies, no complex CI/CD pipelines, and no multi-file microservices to coordinate. You upload one file to AWS CloudFormation, and the stack handles the rest—from the API ingress to the frontend UI.

The Architecture: S3 Metadata Redirection

The core "hack" of this stack is that it doesn't use a database (no RDS, no DynamoDB) for redirections. Instead, it leverages S3 Object Metadata.
When a URL is shortened, the Lambda function creates an empty object in S3 with the shortened "slug" as the key and attaches the x-amz-website-redirect-location metadata. S3 static website hosting then handles the redirect natively. This results in:

0ms logic latency on the redirect.
Near-zero cost (you only pay for S3 storage and CloudFront data transfer).
Infinite scaling without provisioning database throughput.

Feature Comparison

Feature	Community (GPL-3.0)	Paid IaaS	Managed SaaS
Deployment	us-east-1 only	Single Script	No Setup (API)
Deployment	Single Script	Single Script	No Setup (API)
Region	Single Script	Global	Global
URL Customization	Random Slugs	Custom Slugs	Custom Slugs
Expiration	None	Time & Click limits	Time & Click limits
Analytics	None	Click Tracking	Click Tracking
License	Non-Commercial	Commercial/Enterprise	Commercial/Enterprise
Support	Community	Live Chat / Email	Live Chat / Email

How to Deploy (Community Edition)

The Community Edition is open-sourced on GitHub. It is a functional baseline for non-commercial projects in us-east-1.

Download/Clone the Repo: silverlining-cloud/aws-self-hosted-url-shortener
Upload the template:

aws s3 cp template.yaml s3://<YOUR_BUCKET_NAME>/

Execute the Stack:

aws cloudformation create-stack --stack-name url-shortener \
--template-url https://<YOUR_BUCKET_NAME>.s3.amazonaws.com/template.yaml \
--capabilities CAPABILITY_NAMED_IAM \
--region us-east-1

Commercial & Enterprise Tiers

If you are deploying this for a client, a company, or need to run it outside of us-east-1, we offer two professional paths:

Paid IaaS (AWS Marketplace): Purchase a commercial license and unlock multi-region support, custom slugs, and link expiration. Everything still runs in your own VPC.
Managed SaaS (Marketplace API): Skip the infrastructure entirely. Use our API and pay $0.004 per link directly through your existing AWS/Azure bill.

Links
GitHub: Community Edition
Marketplace: Commercial Version
Documentation: API Playground

Quick Note: If you’re a Dev Lead looking to "burn down" remaining quarterly cloud credits, the Marketplace version is a pre-approved way to add this utility to your stack without a new procurement cycle.

How I built a Safari-style Browser Frame for Website Screenshots (Python + Pillow)

Michael Fleck — Thu, 19 Mar 2026 11:28:48 +0000

Ever taken a screenshot with Playwright or Selenium and felt like it looked a bit... empty?

When you automate screenshots, the browser engine captures exactly what’s in the viewport. It’s perfect for data, but if you’re using those images for a portfolio, a landing page, or a marketing report, they often look "naked" without the browser UI around them.

Recently, a customer of my Screenshot API asked for exactly this: "Can you make the screenshot look like it was actually taken in a browser?"

Since Playwright doesn't have a draw_browser_border=True flag, I had to build it myself using Python and the Pillow library. Here’s how I did it.

The Challenge: No Stretching Allowed

You can't just use a static background image of a browser and "stretch" it to fit. If your screenshot is 4K, a static UI image will look pixelated. If the aspect ratio changes, the buttons will look squashed.

The solution was to draw the browser UI programmatically so it stays pixel-perfect at any resolution.

The Implementation

We use ImageDraw to render the "traffic lights," the URL bar, and the icons. We also use a Gaussian blur to create a subtle shadow under the toolbar for that modern "layered" look.

from PIL import Image, ImageDraw, ImageFilter, ImageFont

# --- helper functions ---
def prettify_url(url: str) -> str:
    for prefix in ("https://", "http://"):
        if url.startswith(prefix):
            url = url[len(prefix):]
            break
    return url.rstrip("/")

def add_safari_frame(input_path, output_path, url):
    screenshot = Image.open(input_path).convert("RGB")
    width, height = screenshot.size

    topbar_height = 78
    corner_radius = 16

    # Safari-style color palette
    outer_bg = (242, 242, 242)
    toolbar_bg = (246, 246, 246)
    border = (210, 210, 210)
    url_bg = (255, 255, 255)
    text_color = (95, 95, 95)
    icon_color = (120, 120, 120)

    total_height = height + topbar_height
    canvas = Image.new("RGBA", (width, total_height), (0, 0, 0, 0))

    # 1. Create the browser body with rounded top corners
    browser_layer = Image.new("RGBA", (width, total_height), (0, 0, 0, 0))
    browser_draw = ImageDraw.Draw(browser_layer)
    browser_draw.rounded_rectangle(
        (0, 0, width - 1, total_height - 1),
        radius=corner_radius,
        fill=outer_bg + (255,)
    )

    # 2. Add the Toolbar area and paste the screenshot
    browser_draw.rectangle((0, 0, width, topbar_height), fill=toolbar_bg + (255,))
    browser_draw.line((0, topbar_height - 1, width, topbar_height - 1), fill=border + (255,), width=1)
    browser_layer.paste(screenshot.convert("RGBA"), (0, topbar_height))

    # 3. Apply a subtle shadow under the toolbar
    shadow_layer = Image.new("RGBA", (width, total_height), (0, 0, 0, 0))
    shadow_draw = ImageDraw.Draw(shadow_layer)
    shadow_draw.rectangle((0, topbar_height - 1, width, topbar_height + 5), fill=(0, 0, 0, 35))
    shadow_layer = shadow_layer.filter(ImageFilter.GaussianBlur(radius=4))

    canvas.alpha_composite(browser_layer)
    canvas.alpha_composite(shadow_layer)

    draw = ImageDraw.Draw(canvas)

    # --- Custom Drawing Logic for UI Elements ---
    def draw_chevron(x, y, direction="left", size=7):
        if direction == "left":
            draw.line((x + size, y - size, x, y), fill=icon_color, width=2)
            draw.line((x, y, x + size, y + size), fill=icon_color, width=2)
        else:
            draw.line((x, y - size, x + size, y), fill=icon_color, width=2)
            draw.line((x + size, y, x, y + size), fill=icon_color, width=2)

    # (Add your other drawing functions like draw_plus, draw_share_icon here)

    # --- Draw the 'Traffic Lights' ---
    for i, c in enumerate([(255, 95, 86), (255, 189, 46), (39, 201, 63)]):
        x = 20 + i * 18
        draw.ellipse((x, 33, x + 12, 45), fill=c)

    # --- The URL Bar ---
    url_left, url_right = 145, width - 120
    draw.rounded_rectangle((url_left, 27, url_right, 51), radius=12, fill=url_bg, outline=border)

    # Add the URL text (using fit_text to handle long URLs)
    try:
        font = ImageFont.truetype("Arial.ttf", 16)
    except:
        font = ImageFont.load_default()

    clean_url = prettify_url(url)
    draw.text((url_left + 30, 31), clean_url, fill=text_color, font=font)

    # 4. Final Save
    canvas.convert("RGB").save(output_path, quality=95)

How it works

The Canvas: We create a new image that is slightly taller than the original to accommodate the 78px header.
The Toolbar: We draw a solid rectangle and a 1px border.
The Icons: Instead of using PNG icons, we use draw.line and draw.ellipse. This ensures the "back" button and "share" icons are perfectly sharp regardless of the image width.
The Text: We use a helper function to strip the https:// and trailing slashes to make the address bar look like a real browser.

Conclusion

This was a fun weekend project that turned into a core feature for my users. If you're building an image-based tool, don't settle for raw exports—adding a little bit of UI "chrome" makes the output feel much more premium.

If you want to see it in action, you can test the feature directly in our live demo playground.

DEV Community: Michael Fleck