Editing Projects
How to make changes to your generated projects through chat or direct code editing.
Editing Projects
After your initial generation, you can refine your app through chat or by editing code directly. Every edit creates a new version you can revert to.
Editing Through Chat
The most common way to edit is by describing what you want to change in the chat panel:
What You Can Say
| Intent | Example Prompts |
|---|---|
| Add features | "Add a dark mode toggle to the settings page" |
| Change styling | "Change the primary color to blue and use rounded corners" |
| Remove elements | "Remove the testimonials section from the homepage" |
| Restructure | "Move the sidebar navigation to a top navbar" |
| Add pages | "Add a new /about page with team bios" |
| Fix bugs | "The login form doesn't validate email format, fix it" |
| Add data | "Add 10 sample products to the product list" |
Tips for Better Edits
- Be specific — "Change the header background to #1a1a2e" works better than "make the header darker"
- Reference elements by name — "In the PricingCard component, change the CTA text"
- One change at a time for complex edits — multiple small changes are more reliable than one massive prompt
- Describe the end state — "The navbar should have logo left, links center, CTA button right"
Direct Code Editing
Click any file in the Files panel (right side) to open it in the code editor:
- Full syntax highlighting for TypeScript, JSX, CSS, JSON
- Changes are saved automatically
- The preview updates after you save
When to Use Direct Editing
- Quick CSS tweaks (colors, spacing, fonts)
- Fixing typos in text content
- Adjusting configuration values
- Small logic fixes you can spot in the code
When to Use Chat Instead
- Adding new components or pages
- Structural changes (routing, layouts)
- Features requiring multiple file changes
- Anything involving backend/database changes
How Edits Work Internally
When you describe an edit in chat:
- VULK analyzes your request and identifies which files need to change
- The AI generates updated versions of those files (surgical edits, not full regeneration)
- Changed files are written to your project
- The preview reloads to show the updated app
Each edit uses credits based on the number of tokens processed.
Edit Modes
| Mode | When It Happens | What Changes |
|---|---|---|
| Surgical edit | Small, targeted changes | Only the affected files are modified |
| Multi-file edit | Feature additions or structural changes | Multiple files updated in one pass |
| Regeneration | Major rewrites or "start over" requests | Complete project regeneration |
Common Edit Patterns
Adding Authentication
"Add user login and signup with email and password. Protect the dashboard route."
Changing the Design
"Redesign the homepage hero section — bigger headline, gradient background, floating mockup image on the right."
Adding Backend Functionality
"Add a contact form that saves submissions to the database and sends an email notification."
Responsive Fixes
"The cards on the features page overlap on mobile. Fix the grid to be single column on small screens."