| # Managing Projects |
|
|
| **Everything you need to know about creating, organizing, and exporting projects.** |
|
|
| --- |
|
|
| ## Creating Projects |
|
|
| 1. Click **Projects** in the sidebar |
| 2. Click **+ New Project** |
| 3. Enter a project name |
| 4. Choose a template: |
| - **Website Starter** - Minimal starting point with basic HTML/CSS/JS structure |
| - **Starter (Handlebars)** - Handlebars starter with templating |
| - **Example Studios** - Pre-built multi-page portfolio example |
| - **Starter (React + TypeScript)** - Minimal React app with auto-bundling |
| - **React Demo: Task Tracker** - Interactive task tracker showcasing React components and state |
| - **Starter (Preact + TypeScript)** - Lightweight React alternative with signals |
| - **Starter (Svelte)** - Svelte 5 app with compile-time reactivity |
| - **Starter (Vue)** - Vue 3 app with Composition API |
| - **Starter (Python)** - Python script with Pyodide WASM runtime |
| - **Starter (Lua)** - Lua script with wasmoon WASM runtime |
| - **Landing Page with Contact Form** - Contact form with Resend email (Backend) |
| - **Blog with Comments** - Blog with auth and moderated comments (Backend) |
| - Or select any custom template you've created |
| 5. Optionally add a description |
| 6. Click **Create Project** |
|
|
| All projects start from a template. The built-in templates provide a foundation to build upon. |
|
|
| **[Learn more about templates →](?doc=templates)** |
|
|
| --- |
|
|
| ## Opening Projects |
|
|
| ### From Projects View |
|
|
| 1. Click **Projects** in the sidebar |
| 2. Find your project in the grid |
| 3. Click on the project card |
|
|
| ### Recent Projects |
|
|
| Your 3 most recent projects appear in the sidebar for quick access. |
|
|
| --- |
|
|
| ## Project Workspace |
|
|
| The workspace displays up to 3 panels side-by-side. Open, close, and reorder panels from the sidebar or panel headers — drag the grip handle in a panel header to rearrange. Panel widths, order, and visibility persist between sessions. |
|
|
| Available panels: Chat, File Explorer, Code Editor, Preview, Console (Python/Lua), Skills, Checkpoints, Debug, Settings. When you open a 4th panel, the rightmost panel is replaced. |
|
|
| ### Workspace Header |
|
|
| The header contains key controls: |
| - **Project name** - Displayed in the header |
| - **Mode toggle** - Switch between Chat (read-only) and Code (full access) modes |
| - **Deployment selector** (Server Mode only) - Choose which published deployment's backend context to load |
|
|
| #### Deployment Selector (Server Mode) |
|
|
| In Server Mode, a dropdown appears in the workspace header that lets you select a deployment. When selected: |
| - The AI gains awareness of that deployment's backend features |
| - A `/.server/` hidden folder appears with server context files |
| - You can ask the AI about edge functions, database schema, etc. |
|
|
| See **[Server Mode → Server Context Integration](?doc=server-mode#server-context-integration)** for details. |
|
|
| ### Chat |
|
|
| Talk to AI to build and modify your project. The chat panel has two modes: |
|
|
| **Chat Mode** (read-only): |
| - AI uses read-only shell commands |
| - Explore and discuss without making changes |
| - See how the AI understands your project |
| - Perfect for planning before building |
|
|
| **Code Mode** (full access): |
| - AI can create, edit, and delete files |
| - Make actual changes to your project |
| - Build features and fix bugs |
|
|
| **Pro tip**: If unsure, start with Chat mode to see how the AI views your project. You can also one-shot prompt full multi-page websites, though smaller, focused tasks are generally more consistent. |
|
|
| ### File Explorer |
|
|
| Browse your project structure: |
| - Click folders to expand/collapse |
| - Click files to open in editor |
| - Right-click for options (rename, delete, etc.) |
| - Right-click and select **Show Hidden Files** to view hidden folders |
|
|
| #### Hidden Folders |
|
|
| OSW Studio uses hidden folders (starting with `.`) to provide AI context: |
|
|
| | Folder | Icon | Purpose | |
| |--------|------|---------| |
| | `/.skills/` | Purple book | Skill documents that teach the AI your preferences | |
| | `/.server/` | Orange server | Server context (Server Mode only) - database schema, edge functions, etc. | |
|
|
| These folders are **read-only** and **transient** - their contents are generated dynamically to provide context to the AI and are not saved with your project |
|
|
| ### Code Editor |
|
|
| View and edit code: |
| - Multiple tabs for different files |
| - Syntax highlighting |
| - Save with `Cmd/Ctrl+S` |
| - Supports HTML, CSS, JavaScript, TypeScript, TSX, JSON, Markdown, XML, SVG, Python, Lua, Svelte, Vue SFCs |
|
|
| ### Live Preview |
|
|
| See your website in real-time: |
| - Updates automatically when files change |
| - Click links to navigate |
| - Test responsive design with mobile/tablet/desktop size presets |
| - Click **Maximize** to fill the whole screen with the preview (hides all other panels) |
| - Open in new tab for full testing |
| - Use the **focus tool** to select specific elements and add them to message context for targeted AI edits |
| - Drag **semantic blocks** from the Blocks palette onto the preview — the AI writes code that fits your project |
|
|
| ### Console (Python/Lua) |
|
|
| For terminal runtimes (Python, Lua), the Console panel shows script output and lets you see errors from script execution. Opens automatically for terminal runtimes. |
|
|
| --- |
|
|
| ## Saving Your Work |
|
|
| ### Manual Save |
|
|
| Press `Ctrl+S` (Windows/Linux) or `Cmd+S` (Mac) to save your project. |
|
|
| **Important**: Projects require manual save to persist. While checkpoints are created automatically during AI operations, you must manually save to create a permanent restore point. |
|
|
| ### Checkpoints |
|
|
| OSW Studio creates checkpoints automatically after AI makes changes: |
|
|
| - **Auto-checkpoints** are created during AI operations (last 5 kept per project) |
| - **Manual saves** (Cmd/Ctrl+S) persist across refreshes and are never evicted |
| - **Pinned checkpoints** — pin any checkpoint to prevent it from being pruned. Great for bookmarking a known-good state before experimenting |
|
|
| **How to restore:** |
| 1. Open the **Checkpoints Panel** in the workspace |
| 2. Browse auto-checkpoints, manual saves, and pinned checkpoints |
| 3. Click any checkpoint to restore your project to that state |
|
|
| --- |
|
|
| ## Exporting Projects |
|
|
| ### Export as ZIP |
|
|
| Download your complete website ready to deploy: |
|
|
| 1. Click the **Menu** icon (⋮) in the top right |
| 2. Select **Export** |
| 3. Choose **ZIP** (suitable for hosting) |
| 4. Save the ZIP file |
|
|
| The ZIP contains: |
| - All HTML, CSS, JavaScript files |
| - Images and assets |
| - Clean structure ready for hosting |
|
|
| **Deploy it to:** |
| - Vercel, Netlify, GitHub Pages |
| - Any static file host |
| - Your own server |
|
|
| **[Deployment guide →](?doc=deploying-sites)** |
|
|
| ### Export as JSON (Backup) |
|
|
| Save your entire project including chat history and checkpoints: |
|
|
| 1. Click the **Menu** icon (⋮) |
| 2. Select **Export** |
| 3. Choose **JSON** (backup format) |
| 4. Save the file |
|
|
| Use this to: |
| - Back up your work |
| - Transfer projects between computers |
| - Share projects with others |
| - Keep complete history |
|
|
| ### Import JSON Files |
|
|
| Restore a backed-up project: |
|
|
| 1. Click **Projects** in sidebar |
| 2. Click **Import Project** |
| 3. Select your `.json` backup file |
| 4. Project loads with full history |
|
|
| --- |
|
|
| ## Organizing Projects |
|
|
| ### Naming |
|
|
| Give projects clear names: |
| - ✅ "Portfolio Website" |
| - ✅ "Client Landing Page - Acme Corp" |
| - ✅ "Blog v2" |
| - ❌ "Untitled 1" |
| - ❌ "New Project" |
|
|
| ### Deleting Projects |
|
|
| 1. Go to **Projects** view |
| 2. Find the project |
| 3. Click the **Delete** button (trash icon) |
| 4. Confirm deletion |
|
|
| **⚠️ Warning**: Deletion is permanent. Export a backup first if you might need it later. |
|
|
| --- |
|
|
| ## Tips for Project Management |
|
|
| **💡 Name Projects Clearly** |
| You'll thank yourself later when you have many projects |
|
|
| **💡 Export Backups Regularly** |
| Especially before major changes or experiments |
|
|
| **💡 Use Templates** |
| Don't rebuild the same structure every time |
|
|
| **💡 One Feature at a Time** |
| Make changes incrementally and test as you go |
|
|
| **💡 Test in Preview** |
| Always check the live preview before exporting |
|
|
| **💡 Keep Chat History Clean** |
| Start new conversations when switching to different features |
|
|
| --- |
|
|
| ## Common Tasks |
|
|
| ### Duplicate a Project |
|
|
| 1. Export project as JSON |
| 2. Import it back with a new name |
| 3. Continue working on the copy |
|
|
| ### Start Over |
|
|
| 1. Delete old project |
| 2. Create new project with same name |
| 3. Or keep old as reference and create new |
|
|
| ### Share a Project |
|
|
| 1. Export as JSON |
| 2. Share file with others |
| 3. They import it in their OSW Studio |
|
|
| --- |
|
|
| **Next Steps:** |
|
|
| - **[Working with AI](?doc=working-with-ai)** - Get better results from AI |
| - **[Templates](?doc=templates)** - Start projects faster |
| - **[Deploying Sites](?doc=deploying-sites)** - Put your site online |
|
|
