Enabling Selection Mode in Code Containers

If your code container was created before March 26, 2026, it does not support Selection Mode by default. To enable it, you must update the container with the required tooling and configuration.

Overview of Required Changes

Selection Mode support depends on three core updates:

1. Install the prototyping tooling package
2. Register the Vite plugin
3. Initialize the client in your app entry point

Prerequisite: Supernova CLI Version

Selection Mode requires a minimum version of the Supernova CLI.

• Required version: 2.0.44 or newer

Check your current version:

                                                        
                                                        
                                                            supernova --version
                                                        
                                                            

If your version is older, update it globally:

                                                        
                                                        
                                                            npm install -g @supernovaio/cli
                                                        
                                                            

Using an older CLI version will result in the container not being properly processed.

1. Install Required Dependency

Add the Supernova prototyping tooling package to your project:

                                                        
                                                        
                                                            npm install @supernovaio/prototyping-tooling
                                                        
                                                            

2. Update Vite Configuration

Modify your vite.config.ts to include the Supernova plugin.

Before

                                                        
                                                        
                                                            plugins: [errorMonitorPlugin(), react()],
                                                        
                                                            

After

                                                        
                                                        
                                                            import { supernovaDesignPlugin } from "@supernovaio/prototyping-tooling/build";
                                                        
                                                        export default defineConfig({  
                                                            base: "./",  
                                                            plugins: [supernovaDesignPlugin(), errorMonitorPlugin(), react()],
                                                            ...
                                                        });
                                                        
                                                        
                                                            

This plugin enables communication between the design tooling and your runtime.

3. Initialize the Client in main.tsx

• Go to /[your-code-container]/src/main.tsx

Import the client package in your entry file:

                                                        
                                                        
                                                            import "@supernovaio/prototyping-tooling/client";
                                                        
                                                            

Your file should look similar to this:

                                                        
                                                        
                                                            import "./index.css";
                                                        import App from "./app.tsx";
                                                        import { SnPrototype } from "../supernova/helpers/snPrototype";
                                                        import "@supernovaio/prototyping-tooling/client";
                                                        
                                                            

This step activates Selection Mode at runtime.

4. Rebuild and Publish the Container

After making the changes:

1. Upload the updated code container to Supernova
2. Update the prototyping context with the new version of the container
3. Publish the updated context to your workspace