·Five widgets.
One afternoon.
A living product.
Follow the real widgets below as they render inside a pretend journaling app called Fern — a reading companion where every meaningful action becomes coins, a streak, social momentum, and an earned badge. Every frame is the genuine bundle that ships to production.
A creature that keeps your user coming back.
Fern opens the app and sees a buddy that remembers the habit: stage, coin balance, wardrobe, and progress are already alive. This is the first return moment, where a routine stops feeling like an empty checklist.
Badge 01 is earned when Fern comes back and completes the first meaningful session.
Spend the coins. Dress the creature. Create the identity.
The session creates coins, and coins create choice. Fern uses that value in the marketplace to buy a visible identity signal, while item visibility still respects evolution stage, badge rules, and the product economy.
Badge 02 marks the first moment progress becomes personal expression.
Streaks make showing up feel like a score.
An admin-defined streak counts consecutive days the user fires any of a chosen set of events. The flame lights when today's period is alive; milestones (3, 7, 30 days) trigger a celebration. Multiple streaks can run on the same page — each mount carries its own key.
Badge 03 marks the first meaningful habit: seven days in a row without a miss.
Rankings without a backend to maintain.
Now Fern can compare progress with the community. Hatched computes the board server-side from the metrics you publish — pages read, minutes meditated, recipes cooked — so social motivation appears without another backend.
Badge 04 is earned when the user reaches a visible rank or beats a personal leaderboard goal.
Badges turn progress into visible proof.
The badge shelf closes the loop. It shows Fern what was earned in the previous moments and what is next, including coin rewards, locked badge hints, and progress bars from the same Hatched evaluation layer.
Badge 05 makes the journey cumulative: the user's history becomes something they can inspect and keep chasing.
Want to drive it instead of watch it?
The plates above read from a seeded buddy. The guided tour spins up your own visitor: you name the companion, hatch it, fire habit events, and watch the same widgets react to data you created.
Wire it up in
three files.
The SDK runs on your server to mint session tokens. The loader runs in the browser to render the widgets. That is the entire contract.
- Package
- @hatched/sdk-js
- Runtime
- Node 18+ · Browser
- Licence
- MIT
npm install @hatched/sdk-js
# or:
pnpm add @hatched/sdk-js
yarn add @hatched/sdk-jsimport { HatchedClient } from '@hatched/sdk-js';
const hatched = new HatchedClient({
apiKey: process.env.HATCHED_API_KEY!,
});
// Call this from your authenticated route for the
// logged-in user. Ship the returned token to the
// browser as an httpOnly cookie or template var.
const session = await hatched.widgetSessions.create({
user_id: currentUser.id,
ttl_seconds: 3600,
});
return session.token;<script
src="https://cdn.hatched.live/widget.js"
data-session-token="${SESSION_TOKEN}"
data-theme="light"
></script>
<div id="buddy-widget"></div>
<div id="buddy-badges"></div>
<div id="buddy-streak-daily"
data-streak-key="fern_daily_spark"></div>
<div id="buddy-marketplace"></div>
<div id="buddy-leaderboard"></div>