Skip to main content

Radian Studio Interface & Tabs

Radian Studio features a state-of-the-art multi-pane workspace manager designed to give you both low-code visual controls and full developer power. This guide details the workspace layout, how to configure your view, and how to use the dynamic + button to mount specialized tabs.

⚡ The Dynamic Pane Layout​

Radian Studio is split into two primary areas:

  • The Control Panel (Left): Where you chat with the AI, select templates, and manage your workspace tabs.
  • The Active Viewports (Right): The dynamic canvas areas where active tabs (such as the interactive Live Preview or Code Editor) are mounted.

By default, the Studio loads with the Live Canvas Preview mounted in the main viewport. However, you can completely customize this layout.

➕ Mounting Workspace Tabs with the + Button​

At the top of the viewport section, you will see a tab bar with a dynamic + (Plus) Button. Clicking this button opens the Tab Mount Panel, allowing you to add, split, or rearrange different views inside your active session!

Here are the modular tabs you can add to your workspace:

1. 🖼️ Canvas Preview Tab (Default)​

The real-time interactive browser preview of your React site.

  • Purpose: Test links, click animations, verify responsive styling on mobile/tablet views, and activate Inspect Mode for surgical edits.
  • Hot Reloading: Any change made to the code, data, or theme updates the canvas instantly in under 100ms.

2. 📊 Data Tab (Structured Content)​

Manage the text, metrics, and content copy of your site through a clean spreadsheet-style interface.

  • Purpose: If you want to change a heading or team member's bio, you don't need to look at raw HTML code. The Data Tab parses all generated React templates and extracts content inputs (such as service lists, logo titles, and price points) into simple text fields.
  • Synchronized updates: Changing a value in the Data Tab automatically modifies the virtual JSON state of the component.

3. 📂 Assets Tab (Media Library)​

Control all graphics, images, SVGs, and brand assets used across your site.

  • Purpose: Upload custom images, view generated placeholders, and copy base64 data URIs.
  • CORS Prevention: Radian AI processes uploads through an encrypted edge delivery network, meaning your custom assets load immediately in the sandbox environment without network errors.

4. 🗂️ Files Tab (Virtual File Explorer)​

A fully fledged developer file explorer showing the actual project codebase.

  • Purpose: Explore files, open the built-in IDE code editor, and manage scripts like App.tsx, stylesheets, and Tailwind configurations.

5. ⚙️ Settings Tab (Project Config & Publishing)​

Manage your site's metadata, custom CSS overrides, and deployment endpoints.

  • Purpose: Set your site's SEO title and description, choose typography Google Fonts, connect your custom domains, and click Publish to push your code live on our high-performance Netlify/Vercel edge pipelines.

📐 Splitting and Arranging Views​

To maximize productivity, you can drag and drop mounted tabs or split the screen:

  • Horizontal Split: Run the Code Editor (Files) on the left, and the Live Preview (Canvas) on the right. Any code edits you save will automatically trigger hot-reload preview compiles side-by-side!
  • Multi-Tab Workspace: Open the Canvas, Data, and Assets tabs concurrently and switch between them using the top tab bar.