Use this article to import a supported codebase into Mode so you can open your real product on the canvas.
Mode can import a project from GitHub or from a local codebase folder. After import, Mode runs auto setup to prepare a managed development environment, inspect the project, and make product context available for canvas work.
Mode currently supports Next.js React codebases.
Support for Vue, static HTML, and other frameworks is planned for the future based on user needs and requests. For now, if you try to import an unsupported framework, Mode may show an unsupported framework message during setup.
Method: Upload a folder; Use when: You have the codebase files on your machine.
Method: Import from GitHub; Use when: Your project is stored in a GitHub repository.
Both methods start the same auto setup process after Mode receives the project.
Use folder upload when you have the project available locally.
Open the project import flow in Mode.
Drag and drop your codebase folder into the upload area, or click the upload button and select the folder manually.
Wait for the folder to upload.
Continue into auto setup.
Expected result: Mode uploads the codebase and starts preparing the project.
Use GitHub import when your project lives in a GitHub repository.
Click Import your GitHub repo.
Follow the prompt to install Mode on your GitHub workspace.
Choose which repositories Mode can access.
Select all repositories if you want Mode to access every repo in the workspace.
Select only specific repositories if you want to limit access.
Click Install.
Return to Mode.
Select the repository you want to import from the repository dropdown.
Continue into auto setup.
After Mode is installed on GitHub, the connect button changes into a repository dropdown. The dropdown shows the repositories you authorized Mode to access.
Expected result: Mode starts preparing the selected repository.
Auto setup creates a managed development environment for your project.
This means you do not need to clone the repository locally, install dependencies, configure the development environment, or keep the project running on your own machine just to work with it in Mode. Mode prepares and maintains the project environment for you.
During setup, Mode scans the codebase to understand what the project needs. It looks at things like:
project structure
dependencies
framework and setup requirements
existing UI patterns
design-system context
reusable components
product surfaces that can be opened on the canvas
This helps Mode make the imported project usable inside the visual canvas, so you can work with real product UI instead of starting from a blank design file.
Auto setup usually takes about 5 to 10 minutes.
The exact time depends on the size and complexity of the codebase. Larger projects, more dependencies, or more complex setup requirements can take longer.
When setup is complete, Mode will tell you the project is ready. You can then open the project and start designing on the canvas.
Mode currently supports Next.js React codebases. If your project uses Vue, static HTML, or another framework, Mode may not be able to import it yet.
Framework support will expand over time based on user needs and requests.
Make sure the repository was included when you installed Mode on your GitHub workspace.
If you selected only specific repositories during installation, Mode can only show the repositories you authorized. You may need to update the GitHub installation and grant access to the missing repository.
Auto setup usually takes 5 to 10 minutes, but complex projects can take longer.
If setup appears stuck or fails, wait for the setup status or error message in Mode. The error message should explain whether the issue is related to framework support, repository access, or project setup.
Next: Understand the canvas and portal.
