Client API Reference

You can access various APIs meant to be used inside stories from the histoire/client module.

logEvent

Logs an event in the Events sidepane.

import { logEvent } from 'histoire/client'

logEvent('click', { some: 'data' })

isCollecting

Returns true if the story is executing through the NodeJS server.

import { isCollecting } from 'histoire/client'

if (!isCollecting()) {
  // do something only in the browser
}

isDark

Returns true if dark mode is enabled.

import { isDark } from 'histoire/client'

if (isDark()) {
  // do something only in dark mode
}

toggleDark

toggleDark(value?: boolean): boolean

Toggles dark mode. If value is provided, it will be used instead of toggling. Returns the new value.

import { toggleDark } from 'histoire/client'

toggleDark(true)

onTest 1.0-beta.2+

Registers story-scoped Vitest cases for the current variant.

import { onTest } from 'histoire/client'
import { describe, expect, it } from 'vitest'

onTest(({ canvas }) => {
  describe('my component', () => {
    it('renders', () => {
      expect(canvas.textContent).toContain('Hello')
    })
  })
})

Tests execute in browser runtime and support Vitest suites, modifiers, standard lifecycle hooks, onTestFinished, and onTestFailed. See browser tests and runtime migration.