Code Editor

​

Accessing the Code

​

Open the code view

1. Click Settings in the top toolbar
2. Choose View code
3. Select a file from the file browser

• All project files
• Folder structure
• File types (astro, tsx, css, etc.)

​

Viewing Files

• Syntax highlighting
• Line numbers
• Code formatting

​

File Structure

├── src/
│   ├── pages/            # Pages and routes (.astro)
│   │   └── index.astro   # Homepage
│   ├── layouts/          # Shared layouts
│   │   └── Base.astro    # Root layout (header, footer)
│   ├── components/       # Reusable components (.astro + .tsx islands)
│   └── styles/
│       └── global.css    # Global styles (Tailwind v4)
├── public/               # Static assets
├── astro.config.mjs      # Astro config (managed by Kleap)
└── package.json          # Dependencies

​

Understanding the Code

​

Technologies Used

​

Key Files

• src/pages/index.astro - Your homepage
• src/layouts/Base.astro - Root layout (header, footer)
• src/components/ - Your custom components
• src/styles/global.css - Global styling

​

Editing Code

​

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

Look at src/pages/index.astro and move the hero section
above the features section

In src/components/Header.astro, change the logo size

Update the color scheme in src/styles/global.css

​

Exporting Code

​

Push to GitHub

1. Go to Settings > Project settings > Integrations
2. Choose GitHub and click Connect
3. Connect your GitHub account
4. Create or connect a repository
5. Push your code

​

Download Files

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

​

Best Practices

​

Code Quality

• TypeScript for type safety
• Component-based architecture
• Responsive design patterns
• Accessibility standards
• Performance optimization