Skip to main content
While AI handles most code generation, you can view and understand the source code of your app at any time.

​
Accessing the Code

​
File Browser

Click the Files tab in the left sidebar to see:
  • All project files
  • Folder structure
  • File types (tsx, css, json, etc.)

​
Viewing Files

Click any file to view its contents:
  • Syntax highlighting
  • Line numbers
  • Code formatting

​
File Structure

A typical Kleap app follows Next.js conventions: 
├── app/                  # Pages and routes
│   ├── page.tsx         # Homepage
│   ├── layout.tsx       # Root layout
│   └── [routes]/        # Other pages
├── components/          # Reusable components
│   ├── ui/             # UI primitives (shadcn)
│   └── [custom]/       # Your components
├── lib/                 # Utilities
├── public/              # Static assets
├── styles/              # Global styles
└── package.json         # Dependencies

​
Understanding the Code

​
Technologies Used

TechnologyPurpose
Next.js 16React framework, routing
TypeScriptType-safe JavaScript
Tailwind CSSUtility-first styling
shadcn/uiUI component library

​
Key Files

  • app/page.tsx - Your homepage
  • app/layout.tsx - Root layout (header, footer)
  • components/ - Your custom components
  • tailwind.config.ts - Styling configuration

​
Editing Code

Direct code editing is for advanced users. For most changes, use the AI chat instead.

​
When to Edit Directly

  • Fixing typos in text
  • Minor CSS adjustments
  • Understanding how something works
  • Debugging issues

​
How to Edit

  1. Open the file in the editor
  2. Make your changes
  3. Save (Ctrl/Cmd + S)
  4. Preview updates automatically

​
Working with AI

The AI can reference specific files: 
Look at app/page.tsx and move the hero section
above the features section

In components/Header.tsx, change the logo size

Update the color scheme in tailwind.config.ts

​
Exporting Code

​
Push to GitHub

  1. Go to Settings > GitHub
  2. Connect your GitHub account
  3. Create or connect a repository
  4. Push your code

​
Download Files

  1. Go to Settings > Export
  2. Click Download ZIP
  3. Get all source files locally

​
Best Practices

For anything beyond simple text edits, describe what you want in chat. AI understands the full context.
If you break something, use version history to roll back.
Review AI-generated code to learn Next.js and React patterns.

​
Code Quality

AI-generated code follows best practices:
  • TypeScript for type safety
  • Component-based architecture
  • Responsive design patterns
  • Accessibility standards
  • Performance optimization

Export to GitHub

Push your code to version control