Skip to main content

Documentation Index

Fetch the complete documentation index at: https://archie.com/docs/llms.txt

Use this file to discover all available pages before exploring further.

The Archie frontend is the user-facing layer of every app you build. Archie generates a modern web application — typically React-based with a component library, routing, and state management — from your blueprint and specifications. You customize it with three modalities that work together.

​
Three editing modalities

Talk to Archie

Describe a change in plain language. The chat applies it across files.

Visual editor

Point and click for layout, copy, and styling.

IDE

Direct code editing in the browser, with syntax highlighting, IntelliSense, and search.
Each modality fits a different kind of work. The chat is the primary path for most edits. The visual editor is for layout and copy tweaks. The IDE is for logic-heavy changes and custom code.

​
What’s in this section

​
What the frontend includes

A generated Archie frontend ships with:
  • A page router with route definitions for every feature in your blueprint
  • A component library based on shadcn/ui with your branding applied
  • Authentication wired to your chosen auth provider
  • A typed API client for your project’s GraphQL and REST endpoints
  • Real-time subscriptions for live data
  • Form handling with validation matching your spec rules
  • Internationalization, with at least your primary locale populated
The frontend talks to Archie Core for everything backend — data, auth, file storage, integrations.

​
Stack

The default stack is Next.js with TypeScript, Tailwind, and shadcn/ui. You can override the stack in the blueprint’s tech stack section. Stacks Archie supports out of the box include Next.js, Vite + React, and SvelteKit. The frontend connects to Archie Core regardless of the chosen stack.

​
Customizing further

For changes the chat and visual editor cannot express — custom hooks, complex state management, third-party libraries — open the IDE and edit the code directly. Hand edits are preserved across rebuilds; see Specifications and code generation for the regeneration semantics.