foldkit-skills

The frontend framework for correctness.

Documentation · Manifesto · Examples · Getting Started · Discord

---

Built on Effect. Architected like Elm. Written in TypeScript. One Model, one update function, one way to do things. No hooks, no local state, no hidden mutations.

[!NOTE] Foldkit is pre-1.0. The core API is stable, but breaking changes may occur in minor releases. See the changelog for details.

Who It's For

Foldkit is for developers who want to build their product with confidence instead of fighting their architecture. If you want a single pattern that scales from a counter to a multiplayer game without complexity creep, this is it.

It's not incremental. Inside a Foldkit program there's no escape hatch from Effect, no way to "just use hooks for this one part." You're all in or you're not. The program doesn't have to own the whole page, though: Runtime.embed runs a Foldkit widget inside any existing app (React included), with Schema-typed Ports as the boundary.

Built on Effect

Every Foldkit application is an Effect program. Your Model is a Schema. Side effects are values you return, not callbacks you fire — the runtime handles when and how. If you already know Effect, Foldkit feels natural. If you're new to Effect, Foldkit is a great way to immerse yourself in it.

Coming from React?

Coming from React is a guided walk through the differences. Foldkit vs React: Side by Side implements the same pixel-art editor in both frameworks so you can read them line by line.

Get Started

create-foldkit-app is the recommended way to start a new project. It scaffolds a complete setup with Tailwind, TypeScript, ESLint, Prettier, and the Vite plugin for state-preserving HMR — and lets you choose from a set of examples as your starting point.

npx create-foldkit-app@latest

Counter

This is a complete Foldkit program. State lives in a single Model. Events become Messages. A pure function handles every transition.

src/main.ts defines the program. src/entry.ts boots the runtime. The split keeps main.ts importable from tests without booting a runtime as a side effect.

// src/main.ts
import { Match as M, Schema as S } from 'effect'
import { Command, Runtime } from 'foldkit'
import { Document, html } from 'foldkit/html'
import { m } from 'foldkit/message'

// MODEL

export const Model = S.Struct({ count: S.Number })
export type Model = typeof Model.Type

// MESSAGE

const ClickedDecrement = m('ClickedDecrement')
const ClickedIncrement = m('ClickedIncrement')
const ClickedReset = m('ClickedReset')

export const Message = S.Union([
  ClickedDecrement,
  ClickedIncrement,
  ClickedReset,
])
export type Message = typeof Message.Type

// UPDATE

export const update = (
  model: Model,
  message: Message,
): readonly [Model, ReadonlyArray<Command.Command<Message>>] =>
  M.value(message).pipe(
    M.withReturnType<
      readonly [Model, ReadonlyArray<Command.Command<Message>>]
    >(),
    M.tagsExhaustive({
      ClickedDecrement: () => [{ count: model.count - 1 }, []],
      ClickedIncrement: () => [{ count: model.count + 1 }, []],
      ClickedReset: () => [{ count: 0 }, []],
    }),
  )

// INIT

export const init: Runtime.ApplicationInit<Model, Message> = () => [
  { count: 0 },
  [],
]

// VIEW

export const view = (model: Model): Document => {
  const h = html<Message>()