osw-studio

Sleeping

File size: 5,116 Bytes

# OSW Studio Documentation

**Your guide to building websites with AI.**

Welcome to OSW Studio - a browser-based development environment where you chat with AI to build websites and web apps.

---

## Quick Links

**New to OSW Studio?**
- 👉 **[Overview](?doc=overview)** - What is OSW Studio? (1 min read)
- 🚀 **[Getting Started](?doc=getting-started)** - Build your first site (5 min)

**Common Tasks:**
- 💾 [Manage Projects](?doc=projects)
- 🤖 [Work with AI](?doc=working-with-ai)
- 🌐 [Deploy Your Site](?doc=deploying-sites)

**Features:**
- 📦 [Templates](?doc=templates) - Start faster
- ⚡ [Skills](?doc=skills) - Teach AI your preferences

**Need Help?**
- ❓ [FAQ](?doc=faq)
- 🔧 [Troubleshooting](?doc=troubleshooting)

---

## Documentation Structure

### Getting Started

Perfect for newcomers and casual users:

- **[Overview](?doc=overview)** - What is OSW Studio and who is it for?
- **[Getting Started](?doc=getting-started)** - Set up and create your first project
- **[Projects](?doc=projects)** - Create, manage, and export projects

### Using OSW Studio

Guides for regular users:

- **[Working with AI](?doc=working-with-ai)** - Chat vs Code modes, prompting tips
- **[Templates](?doc=templates)** - Use and create project templates
- **[Skills](?doc=skills)** - Teach AI your workflow preferences
- **[Deploying Your Sites](?doc=deploying-sites)** - Deploy to Vercel, Netlify, etc.

### Help & Advanced

For support and self-hosters:

- **[FAQ](?doc=faq)** - Common questions answered
- **[Troubleshooting](?doc=troubleshooting)** - Fix common issues
- **[Server Mode](?doc=server-mode)** - Self-hosting and deployment
- **[Multitenancy](?doc=multitenancy)** - Workspaces, users, roles, quotas (Server Mode)
- **[Deployment Publishing](?doc=site-publishing)** - Analytics, SEO, compliance (Server Mode)
- **[Backend](?doc=backend-features)** - Database, API endpoints, secrets (Server Mode)

---

## What Can I Build?

OSW Studio supports multiple project runtimes — pick the one that fits your needs:

**Static (HTML/CSS/JS):**
✅ **Personal websites** - Portfolios, blogs, resumes
✅ **Landing pages** - Marketing sites, product pages
✅ **Documentation sites** - Project docs, help centers
✅ **Interactive apps** - Calculators, tools, games (client-side)

**React, Preact, Svelte, Vue:**
✅ **Component-based apps** - Dashboards, admin panels, SPAs
✅ **Interactive UIs** - Forms, data visualization, real-time interfaces
✅ **npm ecosystem** - Import packages by name, fetched from CDN at runtime
✅ **Single-file components** - Svelte `.svelte` and Vue `.vue` files compiled in-browser

**Python & Lua:**
✅ **Scripts and algorithms** - Run Python (via Pyodide) and Lua (via wasmoon) in an interactive Console
✅ **Data processing** - Experiment with code without leaving the browser
✅ **Learning environment** - Try language features with instant feedback

**Server Mode adds:**
✅ **Workspaces** - Isolated environments for teams, clients, or projects
✅ **Multi-user** - User accounts with shared workspace access
✅ **API endpoints** - REST APIs with database access via edge functions
✅ **Dynamic sites** - Store and retrieve data with SQLite databases

---

## Key Concepts

### Chat with AI to Build

Describe what you want in plain English. AI writes the code, creates files, and explains what it's doing.

```
Create a portfolio website with a hero section,
about section, and project gallery
```

### Two Modes

**💬 Chat Mode** - Ask questions, plan, explore (read-only)
**🔧 Code Mode** - AI builds and modifies your project

### Live Preview

See your website update in real-time as AI builds it.

### Export & Deploy

Download your complete site and deploy to Vercel, Netlify, or any static host in minutes.

---

## Resources

### External Links

- **[Live Demo](https://huggingface.co/spaces/otst/osw-studio)** - Try OSW Studio now
- **[GitHub Repository](https://github.com/o-stahl/osw-studio)** - Source code
- **[Report Issues](https://github.com/o-stahl/osw-studio/issues)** - Bug reports & feature requests

### Features

**Major Features:**
- Multiple project runtimes (Static, Handlebars, React, Preact, Svelte, Vue, Python, Lua)
- Multi-provider AI support (14+ providers, including ChatGPT subscription and HuggingFace free tier)
- Dual modes (Chat/Code)
- Semantic blocks — drag pre-defined layouts onto the preview
- Templates & Skills systems
- Browser mode (IndexedDB) and Desktop app (macOS/Windows/Linux)
- Optional Server mode with workspaces and multi-user support
- Site publishing with SEO & analytics
- Edge functions & database management
- Cost tracking

---

## Getting Help

**Before asking for help:**

1. Check the [FAQ](?doc=faq)
2. Search [GitHub Issues](https://github.com/o-stahl/osw-studio/issues)
3. Review [Troubleshooting](?doc=troubleshooting)

**Still stuck?**

Create an issue on GitHub with:
- What you're trying to do
- What's happening instead
- Steps to reproduce
- Browser and OS version
- Screenshots if relevant

---

**Ready to start?** → **[Get Started](?doc=getting-started)**