Running the App

To run a Foldkit application, create a runtime with makeProgram, then call Runtime.run.

makeProgram creates a Foldkit runtime. It handles both standalone components and full applications with routing. The difference is whether you provide a routing config.

Without a routing config, the program doesn't manage the URL bar. This is the default for most programs.

import { Runtime } from 'foldkit'

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

Runtime.run(program)

With a routing config, the program manages the URL bar. The init function receives the current URL so it can set the initial route.

import { Runtime } from 'foldkit'

const program = Runtime.makeProgram({
  Model,
  init,
  update,
  view,
  title: model => routeTitle(model.route),
  container: document.getElementById('root')!,
  routing: {
    onUrlRequest: request => ClickedLink({ request }),
    onUrlChange: url => ChangedUrl({ url }),
  },
})

Runtime.run(program)

The routing config has two handlers: onUrlRequest is called when a link is clicked (giving you a chance to handle internal vs external links), and onUrlChange is called when the URL changes (so you can update your model with the new route). See the Routing & Navigation guide for a full walkthrough.

The optional title function sets document.title after every render. It receives the current Model, so the browser tab title stays in sync as you navigate.

Most apps can start with just these runtime options. The next page covers Resources: long-lived browser singletons like AudioContext or CanvasRenderingContext2D that are shared across Commands.