Project Structure
A top-level overview of a typical PledgeJS project.
TL;DR
A PledgeJS project uses an app/ directory for file-based routing, pledge.config.ts for configuration, and supports framework-specific extensions like page.tsx (React), page.vue (Vue), and page.svelte (Svelte).
Last updated: August 22, 2026
The app directory
Routes are defined by folders, and each route segment maps to a folder in the app directory. Special files give each segment its behavior. PledgeJS supports framework-specific extensions: page.tsx (React), page.vue (Vue), page.svelte (Svelte).
page.tsx / page.vue / page.svelte — makes a route segment publicly accessiblelayout.* — shared UI wrapping a segment and its childrenloading.* — a Suspense fallback for a segmenterror.* — an error boundary for a segmentnot-found.* — 404 UI for a segmenttemplate.* — wrapper that re-renders on navigationhead.* — head metadata for a segmentroute.ts — a server-only API endpointopengraph-image.* / twitter-image.* — OG/Twitter card images
Colocation
Files can be colocated inside route folders without becoming routable, since only page.* and route.ts are publicly addressable. This keeps components, tests, and styles close to the routes that use them.
Configuration File
PledgeJS uses pledge.config.ts as its configuration file. It is validated at load time — invalid values produce clear error messages before the server starts.
import { defineConfig } from 'pledgestack';
export default defineConfig({
appDir: 'app',
framework: 'react', // 'react' | 'vue' | 'solid' | 'svelte'
bundler: 'pledgepack',
rsc: true, // React Server Components (React only)
ppr: false, // Partial Prerendering
tailwind: true,
});