How Raycast added link-sharing features to Ray.so with Dub.co's link infrastructure

Adding link-sharing features to your application is a great way to incentivize users to share your app with others, increasing product adoption.

Ray.so is one of those applications. It's one of the top code screenshot tools on Google, and is used by 100,000+ developers monthly to share beautiful images of their code.

When Raycast decided to add link-sharing features to Ray.so, they turned to Dub.co's link infrastructure, which allowed them to programmatically create short links and get world-class usage analytics on those links – all with a few lines of code.

The challenge: Long & ugly sharing URLs with no analytics

As a lightweight code screenshot tool, Ray.so stores the entire application state as a Base64 encoded string in the hashmark of the URL. This allows users to share their code screenshots with others by simply sharing the URL (without needing a database).

However, this resulted in long and ugly URLs, and there was no way to track how many people were clicking on them.

Instead of sharing long, gibberish URLs, we wanted to let our users share beautiful short links with the ray.so domain.

Pedro Duarte

Hype Lead

The solution: Dub.co's Link Management Infrastructure

To solve this issue, Pedro from Raycast leveraged the Dub.co TypeScript SDK to programmatically create short links every time a user clicks on the Copy URL button on Ray.so.

To do this, Pedro created a Next.js Route Handler that would use the dub SDK to take the long URL and create a short link. Here's how it looked:

import { Dub } from "dub";
import { NextRequest, NextResponse } from "next/server";
 
export const runtime = "edge";
 
const dub = new Dub();
 
export async function GET(req: NextRequest) {
  const searchParams = req.nextUrl.searchParams;
  const url = searchParams.get("url");
 
  const link = await dub.links.create({ url });
  return NextResponse.json({ link: `https://ray.so/${link.key}` });
}

Best part? By using Dub.co's subpath redirects feature, Pedro was able to set up the short links on the ray.so domain, so the links looked like they were part of their app.

Also, Ray.so's codebase is fully open-source, so you can see the full code for this feature – as well as the rest of the Ray.so ecosystem – on GitHub:

The results: Beautiful short links with world-class analytics

With Dub.co's link infrastructure, Raycast was able to create branded ray.so short links that were easy to share and looked native to their app.

On top of that, they were able to get world-class usage analytics on those links, including:

• Time-series analytics: Track how many people are clicking on their links over time.
• Geolocation data: Country & city breakdown of where people are clicking on their links.
• Device data: See what devices people are using to click on the links.
• Referrer data: See where the links are being shared from.

Dub's link infrastructure & analytics has helped us gain valuable insights into the link-sharing use case of Ray.so. And all of it with just a few lines of code.

Thomas Paul Mann

CEO & Co-Founder

Integrating with other Raycast applications

A few days later, Pedro also added link sharing to a few other Raycast applications:

• Snippet Explorer by Raycast (snippets.ray.so)
• Prompt Explorer by Raycast (prompts.ray.so)
• Theme Explorer by Raycast (themes.ray.so)

Build your own link-sharing features with the Dub SDK

Want to build your own link-sharing features with Dub.co's TypeScript SDK? We created a simple template – affectionately dubbed dublet – to help you get started:

Have any questions? Feel free to send us an email or tweet at us – we'd love to help!