Importing an existing project

Bringing your own code

If you already have a product, you don't need to start from scratch. Iterel's Improve Intake path lets you import an existing GitHub repository and automatically reverse-engineers it into the visual canvas, strategy, and research contexts.

How it works

When you choose Improve an existing product during project creation:

1. Connect your repository: Provide access to your GitHub repo.
2. Analysis phase: Iterel scans your codebase, identifying React components, routing structures, and data models.
3. Component translation: Structural components are mapped into editable blocks on the Iterel Design Canvas.
4. Context synthesis: Iterel reads your code to deduce the product's function, target audience, and current strategic direction. This populates your Research and Strategy phases automatically.

Requirements

• Your project must use React (Next.js is preferred but vanilla React works).
• Your components should ideally be cleanly separated so the analyzer can parse them accurately.

After importing

Once the import is complete, your project behaves exactly like a native Iterel project:

• You can edit the imported screens visually on the Design Canvas.
• You can ask the Conductor to redesign specific components.
• You can generate new features that seamlessly integrate with your existing code architecture.

If the translation misses specific styling nuances, you can use the Conductor to adjust the design tokens to match your original brand closer.