Skip to main content

File Explorer & Code Editing Guide

For developers and power users, Radian Studio provides a Files Tab that mounts a fully fledged, browser-virtualized IDE. You can open files, directly edit code, create new directories, and prune files that are no longer needed.

This guide details how to work with the virtual file tree safely and productively.

📂 Navigating the Virtual File Tree​

When you open the Files Tab inside your Studio, you are looking at the live virtual React project directory structure (powered by Nodebox).

  • Folder Nodes: Click on folders like src, components, or pages to expand and view their children files.
  • Opening Files: Double-click any file (such as src/components/Hero.tsx or src/index.css) to mount it in an active editor tab.

✍️ Editing Code Directly​

Radian Studio's built-in code editor supports full syntax highlighting, auto-completions, and hot-reload hooks:

  1. Double-click a component file to open it in the editor.
  2. Edit the JSX code, Tailwind classes, or state parameters directly.
  3. Save your changes (Ctrl + S or Cmd + S).
  4. The virtual Vite compiler running in the background will re-compile the bundle instantly, and the Canvas Preview tab will hot-reload to show your new changes!

➕ Creating New Files and Folders​

To expand your site's codebase with new layouts or utils:

  1. Right-click anywhere in the virtual file explorer tree, or click the New File / New Folder icons at the top of the sidebar.
  2. Enter the file path (e.g., src/components/Banner.tsx or src/utils/math.ts).
  3. Press Enter. The file is created instantly, initialized with empty space, and ready for you to code!

🗑️ Safely Deleting Files (Crucial Step)​

If there are sections or generated components that you no longer want on your landing page, you can delete them from the file explorer. However, because Radian AI runs on a standard production-grade React build pipeline (Vite), you must follow these safety steps to prevent compiling errors:

⚠️ The Vite Import Trap​

If you delete a component file (e.g., deleting src/components/Logos.tsx), but App.tsx or src/pages/Generate.jsx is still trying to import and render that component, Vite's dev server will crash with a ModuleNotFoundError: Cannot resolve 'src/components/Logos.tsx' and your preview canvas will go blank!

🛡️ How to Safely Delete a Redundant Section:​

Step 1: Remove the Component from the Layout Code​

Before deleting the file, open the main parent component where it is rendered (usually src/pages/Generate.jsx or src/App.tsx depending on your template layout).

  • Find the import statement at the top: 
    import Logos from '../components/Logos';
    Delete this line.
  • Find the React element inside the page render block: 
    <Logos />
    Delete this JSX element (or comment it out).
  • Save the file (Ctrl + S).

Step 2: Delete the File​

Once the code references are removed and the compiler is stable:

  1. Find the file in the Files Tab tree (e.g., src/components/Logos.tsx).
  2. Right-click the file and select Delete File (or click the trash icon next to it).
  3. Confirm the action.

The file is now completely pruned from your project space, and your preview compilation remains 100% stable and error-free!