Installation

How to install and set up Honeycomb in your project.

Install the package

Install @hiveio/honeycomb-svelte via your preferred package manager:

npm install @hiveio/honeycomb-svelte

Wrap your app with HiveProvider

Wrap your app with HiveProvider:

+layout.svelte

<script lang="ts">
  import { HiveProvider } from "@hiveio/honeycomb-svelte";
  import "@hiveio/honeycomb-svelte/styles.css";
</script>

<HiveProvider>
  <slot />
</HiveProvider>

Use in your components

components/MyComponent.svelte

<script lang="ts">
  import { useHive } from "@hiveio/honeycomb-svelte";

  const hive = useHive();
</script>

{#if hive.is_loading}
  <p>Connecting...</p>
{:else if hive.error}
  <p>Error: {hive.error}</p>
{:else}
  <p>Connected!</p>
{/if}

API Nodes

By default, HiveProvider connects to public Hive API nodes with automatic fallback. You can customize the endpoint list — see HiveProvider and API Tracker for details.

Production

Public nodes may have rate limits. For production apps, consider running your own node or using a dedicated RPC provider.

Framework Guides

Configuration varies by meta-framework. Pick your setup below.

Vite

Standard SPA setup with Svelte plugin.

vite.config.ts

// vite.config.ts
import { defineConfig } from "vite";
import { svelte } from "@sveltejs/vite-plugin-svelte";

export default defineConfig({
  plugins: [svelte()],
});

SvelteKit

Full-stack meta-framework with SSR support.

svelte.config.js

// svelte.config.js
import adapter from "@sveltejs/adapter-auto";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";

export default {
  preprocess: vitePreprocess(),
  kit: { adapter: adapter() },
};

What's Next?

Now that you have Honeycomb set up, you can start adding components:

Browse Components HiveProvider docs