Skip to main content

Developer Setup & Local Run

Radian AI generates clean, fully-optimized Vite + React + Tailwind CSS projects. Unlike other page builders that lock you into rigid platforms, you can download your site's complete source code and open it in VS Code, run it locally, and deploy it to your own server or git pipeline in minutes.

📥 Downloading Your Site Code​

Inside the Radian Studio UI:

  1. Click the Export or Download Code button in the top header.
  2. A .zip archive containing the entire web application will be generated and saved to your device.
  3. Unzip the file to reveal a standard, clean React directory structure:
my-radian-site/
├── src/
│   ├── components/       # All generated components (Hero, Features, etc.)
│   ├── pages/            # Page layouts
│   ├── main.tsx          # React application mount point
│   ├── App.tsx           # Route controllers
│   └── index.css         # Styling, tailwind direct imports, and HSL variables
├── public/               # Static assets, fonts, icons
├── package.json          # Standard package manifest
├── tailwind.config.js    # Customizable Tailwind configuration
├── tsconfig.json         # TypeScript configuration (if TS layout chosen)
└── vite.config.ts        # Vite development and compile settings

⚡ Running Locally in 3 Steps​

To launch your site locally, ensure you have Node.js (v20 or higher) installed, and run these three commands inside your terminal:

1. Open Directory​

Navigate to your extracted folder:

cd my-radian-site

2. Install Dependencies​

Install all structural libraries (React, Vite, Tailwind CSS, Lucide Icons, and animation layers) in a single run:

npm install

3. Start Development Server​

Launch the super-fast Vite local compiler:

npm run dev

Your terminal will print the local preview link:

  VITE v5.x.x  ready in 250 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose

Cmd-click or ctrl-click the URL to open your generated site in your browser with instant Hot Module Replacement (HMR)!

🚀 Pro Customizations​

Once running locally, your developer team has absolute freedom to customize:

Customize Theme Colors​

To fine-tune your color schema globally, edit :root inside src/index.css. The tailwind JIT compiler will instantly reflect your changes across the entire app:

/* Change your primary branding color to high-end purple */
--primary: 270 70% 50%;

Add Custom Components​

Because it's a standard React workspace, you can install any library (Framer Motion, Chart.js, Three.js) via npm install and import them directly inside your generated files.