> ## 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.

# Overview

> The Archie frontend — a generated React app with visual editing, chat-based code edits, and a full IDE for direct code work.

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

<CardGroup cols={3}>
  <Card title="Talk to Archie" icon="message" href="/features/frontend/talking-to-archie">
    Describe a change in plain language. The chat applies it across files.
  </Card>

  <Card title="Visual editor" icon="arrow-pointer" href="/features/frontend/visual-editor">
    Point and click for layout, copy, and styling.
  </Card>

  <Card title="IDE" icon="code">
    Direct code editing in the browser, with syntax highlighting, IntelliSense, and search.
  </Card>
</CardGroup>

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](/features/frontend/visual-editor)** — point-and-click element editing
* **[Talking to Archie](/features/frontend/talking-to-archie)** — using the chat for code edits
* **[Components](/features/frontend/components)** — working with the generated component library
* **[Theming](/features/frontend/theming)** — branding, colors, fonts, dark mode
* **[Routing](/features/frontend/routing)** — pages, dynamic routes, navigation
* **[Connecting to the backend](/features/frontend/connecting-to-the-backend)** — API client, auth tokens, real-time
* **[Deployment](/features/frontend/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](/features/backend/app-services/authentication-providers/overview)
* 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](/features/backend/overview) 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](/features/specifications/specifications-and-code-generation) for the regeneration semantics.