Building applications on Hive blockchain means writing the same things from scratch every time - connecting to the API, displaying user data, rendering posts, handling endpoints. Honeycomb is a component library that solves this problem - ready-made building blocks for Hive applications, working with four of the most popular frontend frameworks.
| Link | |
|---|---|
| Documentation | honeycomb.bard-dev.com |
| GitHub | github.com/KKocot/honeycomb |
| npm (React) | @hiveio/honeycomb-react |
| npm (Solid) | @hiveio/honeycomb-solid |
| npm (Vue) | @hiveio/honeycomb-vue |
| npm (Svelte) | @hiveio/honeycomb-svelte |
Anyone who has built a frontend for Hive knows the pattern: connect to the API, write fallback logic between endpoints, format account data, render Markdown from posts, handle media embedded in content. And every time, you write it all over again.
Honeycomb gathers these repetitive patterns into one place - as an npm package you install and use. No need to copy code between projects or write your own wrappers around @hiveio/wax.
Honeycomb supports:
@hiveio/honeycomb-react)@hiveio/honeycomb-solid)@hiveio/honeycomb-vue)@hiveio/honeycomb-svelte)Each package has an identical API adapted to the conventions of its framework - hooks in React, composables in Vue, runes in Svelte. The logic underneath is shared (core package), so behavior is identical regardless of your technology choice.
User display:
HiveAvatar - Hive user avatar with automatic fetchingUserCard - profile card with reputation, join date, post countWallet:
BalanceCard - HIVE, HBD, HP balances in a readable formatHiveManabar - Resource Credits and Voting Power bar with percentage visualizationPosts:
HivePostCard - single post card with thumbnail, author, payoutHivePostList - post list with sorting (trending, hot, created, promoted)HiveContentRenderer - Markdown content rendering with embed support (YouTube, 3Speak, Twitter) and XSS sanitizationEditor:
MdEditor - Markdown editor with live preview, toolbar, and draft supportInfrastructure:
HiveProvider - configuration wrapper for the entire applicationApiTracker - API connection status visualizationHealthChecker - API endpoint monitoring and management with automatic fallbackuseHiveAccount("username") // account data
useHivePost("author", "permlink") // single post
useHivePostList("trending") // post list
useHiveStatus() // connection status
Data is fetched directly from the blockchain via @hiveio/wax. No intermediaries, no custom backend.
import { useHiveAccount } from "@hiveio/honeycomb-react";
function UserProfile({ username }: { username: string }) {
const { account, is_loading, error, refetch } = useHiveAccount(username);
if (is_loading) return <p>Loading account...</p>;
if (error) return <p>Error: {error.message}</p>;
if (!account) return <p>Account not found</p>;
return (
<div>
<h2>{account.name}</h2>
<p>Balance: {account.balance}</p>
<p>HBD: {account.hbd_balance}</p>
<p>Posts: {account.post_count}</p>
<p>Joined: {account.created}</p>
<button onClick={refetch}>Refresh</button>
</div>
);
}
One of the bigger challenges when working with the Hive API is the instability of individual nodes. Honeycomb solves this with a built-in mechanism:
No need to write your own retry logic - the library handles it for you.
Installation (React example):
npm install @hiveio/honeycomb-react @hiveio/wax
Usage:
import { HiveProvider, UserCard, BalanceCard } from "@hiveio/honeycomb-react";
function App() {
return (
<HiveProvider>
<UserCard username="gtg" />
<BalanceCard username="gtg" />
</HiveProvider>
);
}
For other frameworks, only the import changes - the API stays the same.
Documentation is available at honeycomb.bard-dev.com - it contains a description of every component, code examples for all four frameworks, and interactive previews.
The project includes 13 demo applications showcasing integrations with various tech stacks:
| Framework | Integrations |
|---|---|
| React | Next.js, Vite, Astro, React Router 7 |
| Solid.js | Vite, Astro, SolidStart |
| Svelte 5 | Vite, SvelteKit, Astro |
| Vue 3 | Vite, Nuxt, Astro |
No matter which stack you choose - there's a demo showing how to plug it in.
anySource code: https://github.com/KKocot/honeycomb
The project is actively developed. More components and features are planned - including potentially active components (not just displaying data, but also allowing interaction with the blockchain).
If you're building something on Hive and have ideas for what should be in the library - let me know in the comments or open an issue on GitHub.