Migrate studio deployment from GitHub Pages to standalone Vercel at play.objectstack.ai

.github/workflows/deploy-docs.yml

@@ -6,7 +6,6 @@ on:
       - main
     paths:
       - 'docs/**'
-      - 'apps/playground/**'
       - 'packages/**'
       - '.github/workflows/deploy-docs.yml'
   workflow_dispatch:
@@ -58,16 +57,6 @@ jobs:
       - name: Build documentation
         run: pnpm docs:build
 
-      - name: Build Studio (Playground)
-        run: pnpm --filter @apps/playground... build
-        env:
-          NODE_ENV: production
-
-      - name: Copy Studio to docs dist
-        run: |
-          mkdir -p docs/.vitepress/dist/studio
-          cp -r apps/playground/dist/* docs/.vitepress/dist/studio/
-
       - name: Setup Pages
         uses: actions/configure-pages@v4
 

README.md

@@ -11,7 +11,7 @@
 [![React](https://img.shields.io/badge/React-18+-61dafb.svg)](https://reactjs.org/)
 [![Tailwind CSS](https://img.shields.io/badge/Tailwind-3.0+-38bdf8.svg)](https://tailwindcss.com/)
 
-[**Documentation**](https://www.objectui.org) | [**Quick Start**](#quick-start) | [**Examples**](#examples) | [**Studio**](https://www.objectui.org/studio/)
+[**Documentation**](https://www.objectui.org) | [**Quick Start**](#quick-start) | [**Examples**](#examples) | [**Studio**](https://play.objectstack.ai)
 
 </div>
 
@@ -159,7 +159,7 @@ export default App
 
 Explore our interactive drag-and-drop designer:
 
-🚀 [**Launch Object UI Studio**](https://www.objectui.org/studio/) - Design visually, export JSON instantly.
+🚀 [**Launch Object UI Studio**](https://play.objectstack.ai) - Design visually, export JSON instantly.
 
 ## 📦 Packages
 

apps/playground/src/App.tsx

@@ -1,4 +1,4 @@
-import { BrowserRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import { Home } from './pages/Home';
 import { Studio } from './pages/Studio';
 import '@object-ui/components';
@@ -17,9 +17,7 @@ export default function App() {
     <Router>
       <Routes>
         <Route path="/" element={<Home />} />
-        <Route path="/studio/:id" element={<Studio />} />
-        {/* Default redirect to first example if typed manually specifically */}
-        <Route path="/studio" element={<Navigate to="/studio/dashboard" replace />} />
+        <Route path="/:id" element={<Studio />} />
       </Routes>
     </Router>
   );

apps/playground/src/pages/Home.tsx

@@ -102,7 +102,7 @@ export const Home = () => {
              return (
               <div 
                 key={key}
-                onClick={() => navigate(`/studio/${key}`)}
+                onClick={() => navigate(`/${key}`)}
                 className="group relative bg-white rounded-2xl border-2 border-gray-200 overflow-hidden hover:shadow-2xl hover:shadow-indigo-500/20 transition-all duration-300 cursor-pointer hover:border-indigo-400 hover:-translate-y-1 flex flex-col h-72"
               >
                 {/* Gradient overlay on hover */}

apps/playground/vite.config.ts

@@ -5,7 +5,7 @@ import path from 'path';
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
-  base: process.env.NODE_ENV === 'production' ? '/studio/' : '/',
+  base: '/',
   resolve: {
     alias: {
       '@object-ui/components': path.resolve(__dirname, '../../packages/components/src'),

docs/guide/studio.md

@@ -6,7 +6,7 @@ The **Object UI Studio** is a powerful, interactive visual editor that allows yo
 
 <div class="tip custom-block">
   <p><strong>Try it now!</strong></p>
-  <p>Access the Studio at: <a href="/studio/" target="_blank">/studio/</a></p>
+  <p>Access the Studio at: <a href="https://play.objectstack.ai" target="_blank">play.objectstack.ai</a></p>
 </div>
 
 ## Features

docs/index.md

@@ -11,7 +11,7 @@ hero:
   actions:
     - theme: brand
       text: Try Studio Now
-      link: /studio/
+      link: https://play.objectstack.ai
     - theme: alt
       text: Get Started
       link: /guide/introduction
@@ -82,7 +82,7 @@ That's it! This JSON automatically creates a beautiful, accessible, and function
   <p class="custom-block-title" style="color: #6366f1;">✨ Experience Object UI Studio</p>
   <p>Explore our interactive visual editor with drag-and-drop design, live preview, and instant JSON export. Perfect for prototyping and learning!</p>
   <p style="margin-top: 12px;">
-    <a href="/studio/" style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; text-decoration: none; font-weight: 600; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); transition: all 0.3s;">
+    <a href="https://play.objectstack.ai" target="_blank" style="display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; border-radius: 8px; text-decoration: none; font-weight: 600; box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3); transition: all 0.3s;">
       🚀 Launch Studio
       <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
     </a>