Code Editor
Frontend includes a powerful built-in code editor that gives you full control over your project’s source code. Whether you want to make quick tweaks, implement custom functionality, or dive deep into the code structure, our editor provides everything you need.
Features
Section titled “Features”File Browser
Section titled “File Browser”Navigate through your entire project structure with our intuitive file browser. Browse folders, open files, and understand your project’s organization at a glance.
Direct Code Editing
Section titled “Direct Code Editing”Edit any file in your project directly within the browser. Our editor includes:
- Syntax highlighting for all major languages
- Auto-completion and IntelliSense
- Error detection and warnings
- Code formatting and indentation
Instant Results
Section titled “Instant Results”See your changes come to life immediately. The editor is connected to your live preview, so modifications are reflected in real-time without manual deployment.
Getting Started
Section titled “Getting Started”To access the code editor:
- Open any project in Frontend
- Click on the Code Editor tab or button
- Browse your project files in the sidebar
- Click on any file to start editing
Locked Files
Section titled “Locked Files”Some files in your project are protected and indicated by a lock icon in the file browser. These locked files cannot be edited by the Code Editor or AI.
Locked files are special configuration files necessary for the browser environment to work correctly, including:
- Vite configuration files: Control the build and development server settings
- TypeScript configuration files (
tsconfig.json): Define TypeScript compiler options - Package.json files: Manage project dependencies and scripts
These files are locked to prevent accidental modifications that could break your development environment or cause your project to stop working. The system manages these configuration files automatically to ensure a stable and reliable development experience.
Use Cases
Section titled “Use Cases”The code editor is perfect for:
- Fine-tuning AI-generated code: Polish and customize what the AI has created
- Adding custom functionality: Implement specific features that require manual coding
- Debugging: Identify and fix issues in your application
- Learning: Understand how your application works under the hood
- Integration: Add custom APIs, third-party services, or advanced features
Best Practices
Section titled “Best Practices”- Test changes: Use the live preview to verify your modifications work as expected
- Combine with AI: Use the code editor alongside AI prompts for the best development experience
The code editor seamlessly integrates with Frontend’s AI capabilities, giving you the flexibility to work however you prefer - whether that’s through natural language prompts, direct code editing, or a combination of both.