@hiveio/honeycomb-solid
Advanced tools
Solid.js components and hooks for Hive Blockchain applications. Read-only (passive) -- displays blockchain data without auth or transaction signing. SSR-compatible, works with SolidStart and Astro.
Documentation | GitHub | npm
| Dependency | Version | Required |
|---|---|---|
| solid-js | >= 1.8.0 | Yes |
| @hiveio/wax | >= 1.28.0 | Yes |
| tailwindcss | >= 4.0.0 | Recommended (for theme.css) |
| @kobalte/core | >= 0.13.0 | Only for ApiTracker |
npm install @hiveio/honeycomb-solid @hiveio/wax solid-js
# or
pnpm add @hiveio/honeycomb-solid @hiveio/wax solid-js
# or
yarn add @hiveio/honeycomb-solid @hiveio/wax solid-js
# or
bun add @hiveio/honeycomb-solid @hiveio/wax solid-js
The package exports 3 CSS files -- pick what fits your project:
| File | What it includes | When to use |
|---|---|---|
styles.css | CSS vars + component styles + Tailwind utilities + theme tokens | Quick start -- all-in-one, no Tailwind needed |
base.css | CSS vars + component styles only | You have your own Tailwind setup |
theme.css | @theme inline tokens only | Add hive-* utility classes to your Tailwind project |
Import styles.css in your entry file:
import "@hiveio/honeycomb-solid/styles.css";
base.css for component styles (without Tailwind utilities) in your entry file:import "@hiveio/honeycomb-solid/base.css";
theme.css in your global CSS to get hive-* utility classes:@import "tailwindcss";
@import "@hiveio/honeycomb-solid/theme.css";
@theme inline {
--color-background: hsl(var(--hive-background));
--color-foreground: hsl(var(--hive-foreground));
--color-border: hsl(var(--hive-border));
--color-muted: hsl(var(--hive-muted));
--color-muted-foreground: hsl(var(--hive-muted-foreground));
--color-card: hsl(var(--hive-card));
--color-card-foreground: hsl(var(--hive-card-foreground));
}
Add dark class to <html> and apply body classes:
<html lang="en" class="dark">
<body class="min-h-screen antialiased bg-hive-background text-hive-foreground">
Light mode works by default (no dark class needed).
// src/index.tsx
import { render } from "solid-js/web";
import { HiveProvider } from "@hiveio/honeycomb-solid";
import "@hiveio/honeycomb-solid/styles.css";
import App from "./App";
const root_element = document.getElementById("root");
if (!root_element) throw new Error("Root element not found");
render(
() => (
<HiveProvider>
<App />
</HiveProvider>
),
root_element,
);
// src/App.tsx
import { Show } from "solid-js";
import { useHive, HiveAvatar, UserCard } from "@hiveio/honeycomb-solid";
export default function App() {
const { is_loading, error, status } = useHive();
return (
<Show when={!is_loading()} fallback={<div>Connecting to Hive...</div>}>
<Show when={!error()} fallback={<div>Error: {error()}</div>}>
<p>Status: {status()}</p>
<HiveAvatar username="blocktrades" size="lg" />
<UserCard username="blocktrades" variant="expanded" />
</Show>
</Show>
);
}
// vite.config.ts
import { defineConfig } from "vite";
import solid from "vite-plugin-solid";
export default defineConfig({
plugins: [solid()],
});
Use client:only="solid-js" (NOT client:load) -- @hiveio/wax uses WASM which does not work in Node.js SSR.
---
// src/pages/index.astro
import DemoApp from "../components/DemoApp";
import "@hiveio/honeycomb-solid/styles.css";
import "../styles/global.css";
---
<html lang="en" class="dark">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hive App</title>
</head>
<body class="min-h-screen antialiased bg-hive-background text-hive-foreground">
<DemoApp client:only="solid-js" />
</body>
</html>
// astro.config.mjs
import { defineConfig } from "astro/config";
import solidJs from "@astrojs/solid-js";
export default defineConfig({
integrations: [solidJs()],
});
If you get WASM errors in dev, add the wasmUrlPlugin:
import { wasmUrlPlugin } from "@hiveio/honeycomb-solid/plugins";
export default defineConfig({
integrations: [solidJs()],
vite: {
plugins: [wasmUrlPlugin()],
},
});
Wrap Honeycomb components with clientOnly() -- WASM does not work during SSR.
// src/routes/index.tsx
import { clientOnly } from "@solidjs/start";
const ClientApp = clientOnly(() => import("../ClientApp"));
export default function Home() {
return <ClientApp fallback={<div class="min-h-screen bg-background" />} />;
}
// src/ClientApp.tsx
import { HiveProvider } from "@hiveio/honeycomb-solid";
import App from "./App";
export default function ClientApp() {
return (
<HiveProvider>
<App />
</HiveProvider>
);
}
// app.config.ts
import { defineConfig } from "@solidjs/start/config";
import { wasmUrlPlugin } from "@hiveio/honeycomb-solid/plugins";
export default defineConfig({
ssr: true,
vite: {
plugins: [wasmUrlPlugin()],
resolve: {
conditions: ["solid", "browser", "module"],
},
ssr: {
noExternal: ["@hiveio/honeycomb-solid"],
},
optimizeDeps: {
exclude: ["@hiveio/wax"],
},
},
});
Note:
wasmUrlPluginis required for projects outside the honeycomb monorepo. Demo apps in the repository may omit it due to Vite workspace resolution.
Components render without styles
styles.css or base.css in your entry file.theme.css is imported in your global CSS.White/blank page after adding Tailwind
class="dark" to <html> element.bg-hive-background text-hive-foreground to <body>.WASM error: Failed to fetch dynamically imported module
wasmUrlPlugin() from @hiveio/honeycomb-solid/plugins to your Vite config.SSR errors with SolidStart
clientOnly() from @solidjs/start.ssr: { noExternal: ["@hiveio/honeycomb-solid"] } to vite config.@kobalte/core)useHive() -- connection status, chain instance, error stateuseHiveChain() -- direct access to the Wax chain objectuseApiEndpoint() -- current API endpoint infouseHiveStatus() -- connection status signaluseHiveAccount(username) -- fetch account datauseHivePost(author, permlink) -- fetch a single postuseHivePostList(options) -- fetch paginated post listFull API reference, live examples, and guides:
honeycomb.bard-dev.com/docs/solid/introduction
MIT
FAQs
Solid.js components for Hive Blockchain applications
We found that @hiveio/honeycomb-solid demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 7 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A mini Shai-Hulud campaign compromised Red Hat Cloud Services npm packages to steal developer and CI/CD secrets during installation.
Research
/Security News
The North Korean malware loader hides in a Packagist-listed package and its GitHub branch to fetch and execute remote code in a likely Contagious Interview-style lure.
Security News
The Rust project is moving toward formal rules on LLM use in contributions after months of internal debate over maintainer burden, code quality, and contributor experience.