On this pageQuick Start
Getting Started
Built on Effect. Architected like Elm. Written in TypeScript. Let’s get your first application running.
New to Foldkit?
If you’d like to learn about Foldkit’s architecture before starting a project, head to Architecture.
Create Foldkit app is the recommended way to get started. You’ll select an example to start with and the package manager you’d like to use.
npx create-foldkit-app@latest
Once the project is created, navigate to the project directory and start the dev server:
pnpm dev
npm run dev
yarn dev
Coming from React?
If you’re familiar with React, check out the Coming from React guide to understand how your existing knowledge applies.
A new Foldkit project has the following structure:
| File | Description |
|---|---|
src/main.ts | Your application code |
src/entry.ts | Runtime bootstrap, referenced from index.html |
src/styles.css | Tailwind CSS entry point |
index.html | HTML entry point |
vite.config.ts | Vite configuration with Foldkit HMR plugin |
tsconfig.json | TypeScript configuration |
eslint.config.mjs | ESLint configuration |
.prettierrc | Prettier configuration |
AGENTS.md | AI coding assistant conventions |
src/main.ts holds the pure definitions for your application: Model, Messages, update, init, and view. src/entry.ts imports them and boots the runtime with Runtime.makeProgram and Runtime.run. Some starter examples keep main.ts in one file, while others split the Model, Messages, update, and view into separate modules.
When you’re ready to dig in, head to Architecture to understand how the pieces fit together.
Using AI?
Foldkit’s architecture makes AI-assisted development uniquely effective. See AI for setup.