Skip to main content
The whole point of Design Mode is that designs don’t end as pretty mockups. React export turns any design on the canvas into a real React + TypeScript + Tailwind project — components, routes, design tokens, the whole thing — in one click.

​
How to export

Two ways: Build (recommended) — Right-click any design → Build. Vibely:
  1. Converts the design’s HTML into a React component tree
  2. Creates a fresh Web App project
  3. Drops you into the project with a live preview running
You’re now in Web App Mode, iterating on real code, with the design as your starting point. Export to GitHub — Right-click → Export → GitHub. Vibely creates a repo (or commits to one you choose) with the React project. bun install && bun dev runs it locally without ever touching Vibely.

​
What you get

A complete project structured around Atomic Design: 
src/
├── components/
│   ├── ui/
│   │   ├── Button.tsx          (atom)
│   │   ├── Input.tsx           (atom)
│   │   └── Badge.tsx           (atom)
│   ├── FeatureCard.tsx         (molecule)
│   ├── PricingCard.tsx         (molecule)
│   ├── Navbar.tsx              (organism)
│   ├── HeroSection.tsx         (organism)
│   └── Footer.tsx              (organism)
├── pages/
│   ├── HomePage.tsx
│   └── PricingPage.tsx
├── App.tsx                     (routes)
└── index.css                   (design tokens — colours, fonts)
The atomic hierarchy:
LevelExamplesWhat it is
AtomButton, Badge, Input, IconSmallest UI elements
MoleculeCard, FormField, SearchBarGroups of atoms with a purpose
OrganismNavbar, HeroSection, FooterBig sections of a page
TemplateDashboardLayout, MarketingLayoutPage-level layouts
PageHomePage, DashboardPageFull pages, wired with data
Components are small, named for what they do, and ready to be edited.

​
Design tokens, not hardcoded values

Every colour, font, and spacing value from your design becomes a CSS custom property in index.css: 
:root {
  --color-primary: #6366f1;
  --color-background: #0a0a0a;
  --color-surface: #0f172a;
  --color-text-primary: #ffffff;
  --color-text-secondary: #94a3b8;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
}
Components reference these via Tailwind classes (text-primary, bg-surface) — change the token and every component picks up the new value. No hunt-and-replace.

​
TypeScript out of the box

Every component is fully typed. Props get explicit interfaces: 
interface PricingCardProps {
  tier: "starter" | "pro" | "enterprise"
  price: number
  features: string[]
  highlighted?: boolean
}

export function PricingCard({ tier, price, features, highlighted }: PricingCardProps) {
  // …
}
No any, no // @ts-ignore. You can pass the project to a strict TypeScript codebase and it’ll fit.

​
What ships with the project

Everything a normal Vite + React project would have — and everything Vibely’s Web App template ships with:
  • Vite + React 19 + Tailwind v4 + shadcn/ui primitives
  • TanStack Router for navigation between pages (type-safe, file-based)
  • DESIGN.md at the project root, documenting the system
  • A working bun dev / bun build setup
The React project is identical in structure to what you’d get if you started in Web App Mode directly — meaning everything in Web App Mode works the same from here: iterate, add a backend, publish, custom domain.

​
What gets reviewed before code lands

The export pipeline checks for common issues before handing you the project:
  • Hardcoded hex values (e.g. bg-[#6366f1]) — flagged and replaced with token classes (bg-primary)
  • Missing TypeScript interfaces — added for every component
  • Broken imports — fixed
  • Accessibility regressions — focus states and ARIA preserved from the design
You’ll see a short summary at the top of the project — “Generated 7 components, 0 errors, 1 warning” — so you know what to look at first.

​
When to export vs. when to keep designing

Export when…Stay in Design Mode when…
The design feels right and you want it workingYou’re still exploring directions
You need to wire in data, auth, or paymentsYou haven’t decided which design to ship
You want to ship to a real URLYou’re presenting concepts to stakeholders
The next thing you need is code, not pixelsYou don’t have a developer (designs can ship as-is too)
You can re-export. Iterated on a design after exporting? Re-export — it creates a new project, or you can copy the new components into the existing one by hand.