Leon4gr45/builder

1# Managing Projects2 3**Everything you need to know about creating, organizing, and exporting projects.**4 5---6 7## Creating Projects8 91. Click **Projects** in the sidebar102. Click **+ New Project**113. Enter a project name124. Choose a template:13   - **Website Starter** - Minimal starting point with basic HTML/CSS/JS structure14   - **Starter (Handlebars)** - Handlebars starter with templating15   - **Example Studios** - Pre-built multi-page portfolio example16   - **Starter (React + TypeScript)** - Minimal React app with auto-bundling17   - **React Demo: Task Tracker** - Interactive task tracker showcasing React components and state18   - **Starter (Preact + TypeScript)** - Lightweight React alternative with signals19   - **Starter (Svelte)** - Svelte 5 app with compile-time reactivity20   - **Starter (Vue)** - Vue 3 app with Composition API21   - **Starter (Python)** - Python script with Pyodide WASM runtime22   - **Starter (Lua)** - Lua script with wasmoon WASM runtime23   - **Landing Page with Contact Form** - Contact form with Resend email (Backend)24   - **Blog with Comments** - Blog with auth and moderated comments (Backend)25   - Or select any custom template you've created265. Optionally add a description276. Click **Create Project**28 29All projects start from a template. The built-in templates provide a foundation to build upon.30 31**[Learn more about templates →](?doc=templates)**32 33---34 35## Opening Projects36 37### From Projects View38 391. Click **Projects** in the sidebar402. Find your project in the grid413. Click on the project card42 43### Recent Projects44 45Your 3 most recent projects appear in the sidebar for quick access.46 47---48 49## Project Workspace50 51The 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.52 53Available 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.54 55### Workspace Header56 57The header contains key controls:58- **Project name** - Displayed in the header59- **Mode toggle** - Switch between Chat (read-only) and Code (full access) modes60- **Deployment selector** (Server Mode only) - Choose which published deployment's backend context to load61 62#### Deployment Selector (Server Mode)63 64In Server Mode, a dropdown appears in the workspace header that lets you select a deployment. When selected:65- The AI gains awareness of that deployment's backend features66- A `/.server/` hidden folder appears with server context files67- You can ask the AI about edge functions, database schema, etc.68 69See **[Server Mode → Server Context Integration](?doc=server-mode#server-context-integration)** for details.70 71### Chat72 73Talk to AI to build and modify your project. The chat panel has two modes:74 75**Chat Mode** (read-only):76- AI uses read-only shell commands77- Explore and discuss without making changes78- See how the AI understands your project79- Perfect for planning before building80 81**Code Mode** (full access):82- AI can create, edit, and delete files83- Make actual changes to your project84- Build features and fix bugs85 86**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.87 88### File Explorer89 90Browse your project structure:91- Click folders to expand/collapse92- Click files to open in editor93- Right-click for options (rename, delete, etc.)94- Right-click and select **Show Hidden Files** to view hidden folders95 96#### Hidden Folders97 98OSW Studio uses hidden folders (starting with `.`) to provide AI context:99 100| Folder | Icon | Purpose |101|--------|------|---------|102| `/.skills/` | Purple book | Skill documents that teach the AI your preferences |103| `/.server/` | Orange server | Server context (Server Mode only) - database schema, edge functions, etc. |104 105These folders are **read-only** and **transient** - their contents are generated dynamically to provide context to the AI and are not saved with your project106 107### Code Editor108 109View and edit code:110- Multiple tabs for different files111- Syntax highlighting112- Save with `Cmd/Ctrl+S`113- Supports HTML, CSS, JavaScript, TypeScript, TSX, JSON, Markdown, XML, SVG, Python, Lua, Svelte, Vue SFCs114 115### Live Preview116 117See your website in real-time:118- Updates automatically when files change119- Click links to navigate120- Test responsive design with mobile/tablet/desktop size presets121- Click **Maximize** to fill the whole screen with the preview (hides all other panels)122- Open in new tab for full testing123- Use the **focus tool** to select specific elements and add them to message context for targeted AI edits124- Drag **semantic blocks** from the Blocks palette onto the preview — the AI writes code that fits your project125 126### Console (Python/Lua)127 128For terminal runtimes (Python, Lua), the Console panel shows script output and lets you see errors from script execution. Opens automatically for terminal runtimes.129 130---131 132## Saving Your Work133 134### Manual Save135 136Press `Ctrl+S` (Windows/Linux) or `Cmd+S` (Mac) to save your project.137 138**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.139 140### Checkpoints141 142OSW Studio creates checkpoints automatically after AI makes changes:143 144- **Auto-checkpoints** are created during AI operations (last 5 kept per project)145- **Manual saves** (Cmd/Ctrl+S) persist across refreshes and are never evicted146- **Pinned checkpoints** — pin any checkpoint to prevent it from being pruned. Great for bookmarking a known-good state before experimenting147 148**How to restore:**1491. Open the **Checkpoints Panel** in the workspace1502. Browse auto-checkpoints, manual saves, and pinned checkpoints1513. Click any checkpoint to restore your project to that state152 153---154 155## Exporting Projects156 157### Export as ZIP158 159Download your complete website ready to deploy:160 1611. Click the **Menu** icon (⋮) in the top right1622. Select **Export**1633. Choose **ZIP** (suitable for hosting)1644. Save the ZIP file165 166The ZIP contains:167- All HTML, CSS, JavaScript files168- Images and assets169- Clean structure ready for hosting170 171**Deploy it to:**172- Vercel, Netlify, GitHub Pages173- Any static file host174- Your own server175 176**[Deployment guide →](?doc=deploying-sites)**177 178### Export as JSON (Backup)179 180Save your entire project including chat history and checkpoints:181 1821. Click the **Menu** icon (⋮)1832. Select **Export**1843. Choose **JSON** (backup format)1854. Save the file186 187Use this to:188- Back up your work189- Transfer projects between computers190- Share projects with others191- Keep complete history192 193### Import JSON Files194 195Restore a backed-up project:196 1971. Click **Projects** in sidebar1982. Click **Import Project**1993. Select your `.json` backup file2004. Project loads with full history201 202---203 204## Organizing Projects205 206### Naming207 208Give projects clear names:209- ✅ "Portfolio Website"210- ✅ "Client Landing Page - Acme Corp"211- ✅ "Blog v2"212- ❌ "Untitled 1"213- ❌ "New Project"214 215### Deleting Projects216 2171. Go to **Projects** view2182. Find the project2193. Click the **Delete** button (trash icon)2204. Confirm deletion221 222**⚠️ Warning**: Deletion is permanent. Export a backup first if you might need it later.223 224---225 226## Tips for Project Management227 228**💡 Name Projects Clearly**229You'll thank yourself later when you have many projects230 231**💡 Export Backups Regularly**232Especially before major changes or experiments233 234**💡 Use Templates**235Don't rebuild the same structure every time236 237**💡 One Feature at a Time**238Make changes incrementally and test as you go239 240**💡 Test in Preview**241Always check the live preview before exporting242 243**💡 Keep Chat History Clean**244Start new conversations when switching to different features245 246---247 248## Common Tasks249 250### Duplicate a Project251 2521. Export project as JSON2532. Import it back with a new name2543. Continue working on the copy255 256### Start Over257 2581. Delete old project2592. Create new project with same name2603. Or keep old as reference and create new261 262### Share a Project263 2641. Export as JSON2652. Share file with others2663. They import it in their OSW Studio267 268---269 270**Next Steps:**271 272- **[Working with AI](?doc=working-with-ai)** - Get better results from AI273- **[Templates](?doc=templates)** - Start projects faster274- **[Deploying Sites](?doc=deploying-sites)** - Put your site online275