Runtime context

Use useHoneydeck() when custom components or custom layouts need to know where they are in the deck.

import { useHoneydeck } from "@honeydeck/honeydeck"

export function SlideStatus() {
  const honeydeck = useHoneydeck()

  return (
    <div>
      Slide {honeydeck.currentSlide.index}, step {honeydeck.currentSlide.step}/
      {honeydeck.currentSlide.maxSteps} · {honeydeck.mode}
    </div>
  )
}

Returned value

const honeydeck = useHoneydeck()

honeydeck.config
honeydeck.currentSlide.index
honeydeck.currentSlide.step
honeydeck.currentSlide.maxSteps
honeydeck.currentSlide.layout
honeydeck.currentSlide.layoutProps
honeydeck.slideWidth
honeydeck.slideHeight
honeydeck.mode

• config is the resolved deck configuration with Honeydeck defaults applied.
• currentSlide.index is 1-based and matches the slide number in the URL.
• currentSlide.step is 0-based and matches the step number in the URL.
• currentSlide.maxSteps is the number of steps on the current slide.
• currentSlide.layout is the current slide layout name.
• currentSlide.layoutProps is the parsed slide frontmatter passed to the layout as frontmatter.
• slideWidth and slideHeight are the logical slide canvas dimensions after resolving aspectRatio.
• mode is the effective color mode: "light" or "dark".

Slide scale

Honeydeck renders each slide at logical canvas dimensions, then scales the full slide with CSS transforms to fit the current viewport or preview surface. Normal HTML and CSS content does not need to account for this scale.

Use useSlideScale() only when a component or layout needs the current CSS scale applied to the logical slide canvas.

Transform-aware canvas and WebGL components

Some canvas and WebGL libraries measure their container with getBoundingClientRect() and write that measured size back into the canvas style. Because getBoundingClientRect() includes CSS transforms, those libraries can accidentally apply Honeydeck's slide scale twice and render smaller than their wrapper.

Wrap those components with an inverse-sized frame using slideWidth, slideHeight, and useSlideScale():

import { useHoneydeck, useSlideScale } from "@honeydeck/honeydeck"

export function FullCanvasEffect() {
  const { slideWidth, slideHeight } = useHoneydeck()
  const slideScale = useSlideScale()

  return (
    <div className="absolute inset-0 overflow-hidden">
      <div
        className="absolute left-0 top-0"
        style={{
          width: slideWidth / slideScale,
          height: slideHeight / slideScale,
        }}
      >
        <CanvasOrWebGlEffect />
      </div>
    </div>
  )
}

In custom layouts

import type { ReactNode } from "react"
import { useHoneydeck } from "@honeydeck/honeydeck"

type FancyLayoutProps = {
  children: ReactNode
  frontmatter: Record<string, unknown>
}

export function FancyLayout({ children }: FancyLayoutProps) {
  const honeydeck = useHoneydeck()

  return (
    <section data-mode={honeydeck.mode}>
      <p>Layout: {honeydeck.currentSlide.layout}</p>
      {children}
    </section>
  )
}

useHoneydeck() must run inside a Honeydeck presentation runtime. Outside Honeydeck it throws a clear error.