Hugging Face's logo

Spaces:
otst
/
osw-studio
Running

App Files Community
2
osw-studio / docs /PROJECTS.md
otst's picture
otst
add extended server features: edge & server functions, secrets management, dbs and site context for ai
54c7e54
preview code
|
raw
history blame contribute delete
6.9 kB

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:
    • Blank - Minimal starting point with basic structure
    • Example Studios - Pre-built example with multiple pages
    • 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 →

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

When you open a project, you'll see 4 panels:

Workspace Header

The header contains key controls:

  • Project name - Click to rename
  • Mode toggle - Switch between Chat (read-only) and Code (full access) modes
  • Site selector (Server Mode only) - Choose which published site's server context to load

Site Selector (Server Mode)

In Server Mode, a dropdown appears in the workspace header that lets you select a site. When selected:

  • The AI gains awareness of that site's server 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 for details.

Chat (Left-most)

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 (2nd)

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 (3rd)

View and edit code:

  • Multiple tabs for different files
  • Syntax highlighting
  • Save with Cmd/Ctrl+S
  • Supports HTML, CSS, JavaScript, JSON, Markdown

Live Preview (Last)

See your website in real-time:

  • Updates automatically when files change
  • Click links to navigate
  • Test responsive design with resize
  • Open in new tab for full testing
  • Use the focus tool to select specific elements or sections and add them to message context for targeted AI edits

You can open and close panels from their headers and the sidebar on the workspace.

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:

  • Checkpoints are temporary snapshots created during AI operations
  • Saved state is created when you press Cmd/Ctrl+S
  • "Discard Changes" reverts to your last saved state

How to restore:

  1. Look for checkpoint indicators in the chat
  2. Click a 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 →

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

Rename a Project

Projects are renamed through the Projects view menu (feature may vary).

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: