Skip to main content
Foldkit
Foldkit

Beautifully boring frontend applications.

No surprises. No magic. Just a framework that does exactly what you describe.

npx create-foldkit-app@latest --wizard
Dive InView on GitHub

Declare behavior. Ship. Repeat.

Most frameworks ask you to make architectural decisions instead of empowering you to build great applications. Foldkit gives you a principled, cohesive architecture so you can focus on shipping.

Predictable state

One immutable model holds your entire application state. Every change flows through a single update function. No hidden mutations, no stale closures, no surprises.

Explicit effects

Side effects are values you return, not callbacks you fire. Commands declare what should happen. The runtime handles when and how.

Scales with grace

The architecture scales without complexity creep. A 50-file app follows the same patterns as a 5-file app. New team members read the code and understand it.

Peek inside.

Watch a message flow through update into the model. The code highlights in real time to show you what's happening at each step.

// MODEL

const Model = S.Struct({
  count: S.Number,
  isResetting: S.Boolean,
  resetDuration: S.Number,
})

// MESSAGE

const ClickedIncrement = m('ClickedIncrement')
const ChangedResetDuration = m('ChangedResetDuration', {
  seconds: S.Number,
})
const ClickedReset = m('ClickedReset')
const CompletedReset = m('CompletedReset')

// UPDATE

M.tagsExhaustive({
  ClickedIncrement: () => [
    evo(model, { count: count => count + 1 }),
    [],
  ],
  ChangedResetDuration: ({ seconds }) => [
    evo(model, { resetDuration: () => seconds }),
    [],
  ],
  ClickedReset: () => [
    evo(model, { isResetting: () => true }),
    [Task.delay(`${model.resetDuration} seconds`).pipe(
      Effect.as(CompletedReset()),
    )],
  ],
  CompletedReset: () => [
    evo(model, { count: () => 0, isResetting: () => false }),
    [],
  ],
})

0

Model State

count: 0
isResetting: false
resetDuration: 2

Phase

Idle

Message Log

Powered by Effect. Inside and out.

  • Every Foldkit application is an Effect
  • All state is a single Schema
  • Side effects are modeled as Effects that never fail

(Yeah. We like Effect.)

Batteries included.

Most frameworks ask you to bring your own routing library, state manager, UI kit, and form validator. Foldkit ships them as one coherent system.

Routing

Type-safe bidirectional routing. URLs parse into typed routes and routes build back into URLs. No string matching, no mismatches between parsing and building.

UI ComponentsIn Development

Accessible primitives — dialog, menu, tabs, listbox, disclosure, and more — built for the Elm Architecture. Easy to style and customize.

See the docs

Virtual DOM

Built on Snabbdom. Fast, keyed diffing with declarative views that are plain functions of your Model.

Subscriptions

Declare which streams your app needs as a function of the Model. The runtime diffs and switches them when the Model changes.

Field Validation

Per-field validation with sync and async support. Define rules as predicates, apply them in update, and the Model tracks every field state.

Commands

Side effects live safely in Commands: Effects that return Messages. Retry, timeout, race, parallel, yield from services — use any combinator you want. You write the Effect, the runtime runs it.

Your favorite LLM has a crush on Foldkit.

Foldkit apps are explicit and predictable. This makes LLMs particularly good at generating Foldkit code. And it makes generated Foldkit code exceptionally easy for humans to review.

Set up AI-assisted development

What's the catch?

Foldkit asks you to think about frontend development differently. It uses The Elm Architecture, so there are no components, no hooks, no local state. Everything is declarative and structured. You'll need to shift how you think about state, effects, and views.

It's a discipline. It pays off, but it's a real ask.

See how it works

Who it's for

  • Developers who value correctness

    You want your architecture to prevent bugs, not just catch them.

  • Teams that need to stay aligned

    One pattern for state, effects, and views means less disagreement and faster onboarding.

  • Projects with complex state

    Auth flows, real-time data, multi-step forms — the architecture handles complexity without losing clarity.

Who it's not for

  • Large existing React codebases

    Foldkit isn't an incremental adoption — it's a different architecture. Migration means a rewrite.

  • Teams not ready to invest in Effect

    Foldkit leans on pipe, discriminated unions, and Effect throughout. There's no escape hatch — you're all in or you're not.

  • Projects that need the React ecosystem

    No React component libraries, no Next.js, no existing middleware. You're building on different foundations.

How does Foldkit compare to React?

It's a different architecture. See where the approaches diverge and where they don't.

Read the full comparison

Proof of life.

Ready to be bored?

Describe your app. Let the runtime handle the rest.

Dive InView on GitHub