ATProto for Frontend Developers: Build on the Open Social Web in 2026
Why ATProto — the protocol powering Bluesky — is the most exciting new build surface for frontend engineers, and how to start building decentralized social apps with TypeScript today.
The Open Social Web Is Here — Are You Building On It?
Bluesky crossed 30 million users in 2025. Twitter/X keeps losing developer trust. Mastodon never reached mainstream adoption. But underneath Bluesky sits something more interesting than just another social platform: ATProto — a protocol for building decentralized social applications where users actually own their data.
For frontend engineers, ATProto is a genuinely new surface to build on. Here's what you need to know to get started.
What Makes ATProto Different from ActivityPub
Unlike ActivityPub (Mastodon's protocol), ATProto is designed for portability and global discoverability at scale. Key concepts to understand:
- DIDs (Decentralized Identifiers): Identity isn't tied to a server. You own
did:plc:xyz123and can migrate it to any PDS provider. - Lexicons: Typed schemas for social data — posts, likes, follows, and custom record types your app defines.
- AppViews: Query layers that aggregate network data for specific use cases. Bluesky is one AppView. You can build others.
- PDS (Personal Data Server): Where user data actually lives — self-hostable, portable, not locked in your app.
Building a Simple ATProto Client in TypeScript
Start with the official SDK:
npm install @atproto/api
Fetch a user's recent posts and engagement data:
import { BskyAgent } from '@atproto/api'
const agent = new BskyAgent({ service: 'https://bsky.social' })
await agent.login({
identifier: 'your-handle.bsky.social',
password: process.env.BSKY_APP_PASSWORD!, // Use app passwords, not your main password
})
const { data } = await agent.getAuthorFeed({
actor: 'did:plc:your-did-here',
limit: 20,
})
data.feed.forEach(({ post }) => {
const record = post.record as { text: string }
console.log({
text: record.text,
likes: post.likeCount,
reposts: post.repostCount,
replies: post.replyCount,
})
})
Generate app passwords at bsky.app/settings/app-passwords — never expose your main account password in code.
Creating Custom Record Types
This is where ATProto gets exciting. You're not limited to posts and likes — define your own Lexicon schemas and store custom data on the network that travels with the user:
// Write a custom bookmark record to the user's PDS
await agent.api.com.atproto.repo.createRecord({
repo: agent.session!.did,
collection: 'io.nextfuture.bookmark',
record: {
$type: 'io.nextfuture.bookmark',
url: 'https://nextfuture.io.vn',
title: 'NextFuture - AI and Frontend',
tags: ['frontend', 'ai', 'nextjs'],
createdAt: new Date().toISOString(),
},
})
// Query all bookmarks for this user
const bookmarks = await agent.api.com.atproto.repo.listRecords({
repo: agent.session!.did,
collection: 'io.nextfuture.bookmark',
})
The user's bookmarks live in their PDS — if they switch to a different client that supports the same Lexicon, their data follows them. That's the paradigm shift.
Managing ATProto App Links with Dub.co
As you build on ATProto, you'll accumulate deep links, shareable profile URLs, and content links. Dub.co is an open-source link management platform built for developers — custom short domains, click analytics, and programmatic link creation via API. It's ideal for tracking which ATProto content drives engagement back to your app, especially when sharing posts across platforms.
Real Use Cases to Build Today
- Social bookmark manager: Store bookmarks as custom ATProto records — they follow the user, not your database.
- Developer portfolio feed: Aggregate GitHub activity + blog posts + Bluesky posts into a unified public feed.
- Community moderation tools: Build and publish moderation lists or starter packs that anyone on ATProto can subscribe to.
- Alternative clients: Apps like Skeet and Graysky prove the market for specialized Bluesky clients is real and growing.
Should You Bet on ATProto in 2026?
The honest answer: it depends on your risk tolerance. ATProto is maturing fast but isn't Next.js-level polished yet. Some APIs will change. Tooling gaps exist.
That said, the fundamentals are sound. The protocol is well-designed, the Bluesky team ships at an impressive pace, and the user base is growing with real network effects. For indie developers who want to build social features without building a social network from scratch, ATProto is the most interesting open protocol to emerge since RSS.
Start small: build a read-only feed integration, deploy it, learn the model. Then go deeper. The developers who understand ATProto now will have a significant head start when the ecosystem matures.
Admin
Dub.co
Short links & analytics for developers — track clicks, create branded links, manage affiliate URLs with ease.
Cal.com
Open source scheduling — self-host your booking system, replace Calendly. Free & privacy-first.
Comments (0)
Sign in to comment
No comments yet. Be the first to comment!