On this pageQuick Start
Getting Started
Foldkit is a frontend framework for TypeScript, built on Effect, using The Elm Architecture. 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 and Concepts.
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 --wizard
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/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 is the entry point for your application. Some starter examples keep everything 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 and Concepts to understand how the pieces fit together.
Using AI?
Foldkit’s architecture makes AI-assisted development uniquely effective. See AI for setup.