DevTools

Foldkit includes a built-in DevTools overlay that displays every Message flowing through your app and lets you inspect the Model, Message, and Commands at any point in time. It renders inside a shadow DOM so it won’t interfere with your styles or layout.

You can see it in action right now — look for the tab on the bottom right edge of this page.

DevTools are enabled by default in development. Pass a devTools object to makeProgram to configure behavior:

import { Runtime } from 'foldkit'

const program = Runtime.makeProgram({
  Model,
  init,
  update,
  view,
  container: document.getElementById('root')!,
  devTools: {
    position: 'BottomLeft',
  },
})

Runtime.run(program)

The devTools field accepts an object with the following optional properties, or false to disable DevTools entirely.

'Development' (the default) enables DevTools only in development. 'Always' enables them in all environments, including production.

Controls where the badge and panel appear on screen. One of 'BottomRight' (default), 'BottomLeft', 'TopRight', or 'TopLeft'.

'TimeTravel' (the default) enables full time-travel debugging — clicking a Message row pauses the app and re-renders it exactly as it looked at that point in time. User interaction is blocked while paused, but Subscriptions continue running in the background and new rows keep appearing in the panel. Click Resume to jump back to the live state.

'Inspect' lets you browse state snapshots without pausing the app, which is useful when showing DevTools to visitors in production or staging environments.

import { Runtime } from 'foldkit'

const program = Runtime.makeProgram({
  Model,
  init,
  update,
  view,
  container: document.getElementById('root')!,
  devTools: {
    show: 'Always',
    mode: 'Inspect',
    banner: 'Welcome to our app! Browse the state tree to see how it works.',
  },
})

Runtime.run(program)

An optional string displayed as a banner at the top of the panel. Useful for welcoming visitors or leaving a note for your team.