Skip to content

Realtime Database

Reactive node

firekitNode subscribes to a single RTDB path and keeps data in sync.

<script lang="ts">
  import { firekitNode } from 'svelte-firekit';

  const counter = firekitNode<number>('counters/page-views');
</script>

{#if counter.loading}
  <p>Loading…</p>
{:else}
  <p>Page views: {counter.data}</p>
{/if}

Write operations

// Replace value at path
await counter.set(42);

// Merge partial object (for object nodes)
await counter.update({ count: 10 });

// One-time fetch (no listener)
const value = await counter.fetchOnce();

Reactive list

firekitNodeList subscribes to an RTDB path as an ordered list. Each item in list includes a key property (the RTDB push key).

<script lang="ts">
  import { firekitNodeList } from 'svelte-firekit';

  interface Message {
    key: string;
    text: string;
    userId: string;
    createdAt: number;
  }

  const messages = firekitNodeList<Message>('chat/messages');
</script>

{#if messages.loading}
  <p>Loading…</p>
{:else}
  {#each messages.list as msg (msg.key)}
    <p><strong>{msg.userId}</strong>: {msg.text}</p>
  {/each}
{/if}

List operations

// Push a new item (generates a push key)
await messages.push({ text: 'Hello!', userId: uid, createdAt: Date.now() });

// Set the entire list node
await messages.set({ /* … */ });

// Update specific children
await messages.update({ 'msg-key/text': 'Updated' });

// Remove the entire node
await messages.remove();

// One-time fetch
const items = await messages.fetchOnce();

RTDB field value helpers

import { rtdbServerTimestamp, rtdbIncrement } from 'svelte-firekit';

await counter.set(rtdbIncrement(1));
await node.update({ lastSeen: rtdbServerTimestamp() });

Helper	Description
`rtdbServerTimestamp()`	Server-side timestamp
`rtdbIncrement(delta)`	Atomic numeric increment / decrement

`<Node>` component

<script lang="ts">
  import { Node } from 'svelte-firekit';
</script>

<Node path="chat/messages">
  {#snippet data(messages)}
    {#each Object.values(messages) as msg}
      <p>{msg.text}</p>
    {/each}
  {/snippet}

  {#snippet loading()}
    <p>Loading…</p>
  {/snippet}
</Node>

`<Node>` props

Prop	Type	Required	Description
`path`	`string`	Yes	RTDB path to subscribe to

`<Node>` snippets

Snippet	Arguments	Description
`data`	Raw RTDB value	Rendered when data is available
`loading`	—	Rendered while loading
`error`	`Error`	Rendered on failure