Overview

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

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

• Visual editor — point-and-click element editing
• Talking to Archie — using the chat for code edits
• Components — working with the generated component library
• Theming — branding, colors, fonts, dark mode
• Routing — pages, dynamic routes, navigation
• Connecting to the backend — API client, auth tokens, real-time
• Deployment — publishing to Archie’s hosting or self-deploy

​

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.