Leon4gr45/builder

1# Templates2 3**Start your projects faster with pre-built templates.**4 5Templates are ready-to-use website starting points that include complete file structures, styling, and functionality. Use them to skip the initial setup and start customizing right away.6 7---8 9## What Are Templates?10 11Templates are complete website projects that you can use as starting points:12 13- **Complete structure** - All HTML, CSS, and JavaScript files14- **Professional design** - Ready-to-use layouts and styling15- **Customizable** - Modify anything to match your needs16- **Learning resources** - Study well-structured code17 18**Think of templates as:**19- Website blueprints you can build upon20- Starter kits that save time21- Examples of best practices22- Shortcuts to professional results23 24---25 26## Template Types27 28Each template has a **runtime** that determines how the project is built and previewed. The runtime badge is shown on each template card.29 30| Runtime | Description |31|---------|-------------|32| **Static** | Pure HTML, CSS, and JavaScript (ES module imports supported) |33| **Handlebars** | HTML, CSS, and JavaScript with Handlebars templating |34| **React** | Component-based React + TypeScript with automatic bundling |35| **Preact** | Lightweight React alternative (~3KB) with signals support |36| **Svelte** | Svelte 5 with compile-time reactivity and runes |37| **Vue** | Vue 3 with Composition API and SFC support |38| **Python** | Python scripts via Pyodide WASM, running in an interactive Console |39| **Lua** | Lua scripts via wasmoon WASM, running in an interactive Console |40 41Some templates also include **backend features** — edge functions, database schema, server functions, and secrets. These show a "Backend" badge and require Server Mode for full functionality. In Browser Mode, backend templates create the frontend files normally.42 43---44 45## Built-in Templates46 47### Website Starter (Project)48 49Minimal starting point with basic structure.50 51**Includes:**52- Single `index.html`53- Basic CSS file54- Empty JavaScript file55- Clean slate for building56 57**Best for**: Starting from scratch with minimal setup58 59### Starter (Handlebars)60 61Handlebars-powered website with templating and partials.62 63**Includes:**64- `index.html` with Handlebars partial includes65- `/templates/` directory for reusable partials66- `data.json` for template data67- `.PROMPT.md` with Handlebars-specific AI instructions68 69**Best for**: Sites that benefit from reusable components (navigation, footer) and data-driven content70 71### Example Studios (Project)72 73A multi-page agency portfolio showing OSW Studio's capabilities.74 75**Includes:**76- Multiple HTML pages with Handlebars partials77- `data.json` for site-wide data (site name, navigation, social links)78- Responsive design with modern CSS79- Interactive elements (portfolio gallery, contact form)80 81**Best for**: Learning how OSW Studio works, understanding Handlebars partials82 83### Starter (React + TypeScript)84 85Component-based React app with TypeScript and automatic bundling.86 87**Includes:**88- `index.html` shell with bundle references89- `src/main.tsx` entry point90- `src/App.tsx` Hello World component91- `.PROMPT.md` with React-specific AI instructions92 93**Best for**: Starting a React app from scratch with AI, component-driven UIs94 95### React Demo: Task Tracker (Project)96 97Interactive task tracker showcasing React components, state management, and typed props.98 99**Includes:**100- `index.html` shell with bundle references101- `src/main.tsx` entry point102- `src/App.tsx` with `useState` for task management103- `src/TaskForm.tsx` controlled input with form submit104- `src/TaskItem.tsx` checkbox toggle and delete105- `src/App.css` styles106 107**Best for**: Learning React in OSW Studio, exploring component composition and state108 109### Starter (Preact + TypeScript)110 111Lightweight React alternative with signals for reactive state.112 113**Includes:**114- `index.html` shell with bundle references115- `src/main.tsx` entry point116- `src/App.tsx` Hello World component117- `.PROMPT.md` with Preact-specific AI instructions118 119**Best for**: Small, fast apps where bundle size matters. Same API as React but ~3KB120 121### Starter (Svelte)122 123Svelte 5 app with compile-time reactivity and runes.124 125**Includes:**126- `index.html` shell with bundle references127- `src/main.ts` entry point128- `src/App.svelte` counter component using `$state()` rune129- `.PROMPT.md` with Svelte-specific AI instructions130 131**Best for**: Apps that benefit from compile-time optimization, scoped styles, and minimal boilerplate132 133### Starter (Vue)134 135Vue 3 app with Composition API and single-file components.136 137**Includes:**138- `index.html` shell with bundle references139- `src/main.ts` entry point140- `src/App.vue` counter component using `ref()` and `@click`141- `.PROMPT.md` with Vue-specific AI instructions142 143**Best for**: Progressive apps, gentle learning curve, familiar HTML-like template syntax144 145### Starter (Python)146 147Python script running in the browser via Pyodide WASM.148 149**Includes:**150- `main.py` entry point151- `.PROMPT.md` with Python-specific AI instructions152- Runs in interactive Console (not live preview)153 154**Best for**: Scripts, data processing, algorithms, learning Python155 156### Starter (Lua)157 158Lua script running in the browser via wasmoon WASM.159 160**Includes:**161- `main.lua` entry point162- `.PROMPT.md` with Lua-specific AI instructions163- Runs in interactive Console (not live preview)164 165**Best for**: Scripting, game logic prototyping, learning Lua166 167### Landing Page with Contact Form (Backend)168 169Professional landing page with a working contact form powered by Resend email.170 171**Includes:**172- Single-page design with contact form173- 2 edge functions (`submit-contact`, `list-messages`)174- Database schema for storing messages175- Optional Resend email integration (requires API key)176 177**Best for**: Business landing pages, lead capture, contact forms178 179### Blog with Comments (Backend)180 181Static blog with user authentication and moderated comments.182 183**Includes:**184- Static HTML blog posts in `/blog/` directory185- Handlebars partials for navigation, footer, and comments section186- `data.json` post index for the home page187- 6 edge functions (comments, auth: register, login, logout, auth-status)188- Database schema for comments, users, and sessions189 190**File structure:**191```192/data.json                    — Site metadata + posts array193/index.html                   — Blog home (renders post list via Handlebars)194/blog/hello-world.html        — Static blog post with {{> comments}} partial195/blog/getting-started.html    — Static blog post with {{> comments}} partial196/styles/style.css             — All styles197/scripts/main.js              — Comments + auth JS (no post loading)198/templates/navigation.hbs     — Nav partial (uses {{siteName}}, {{navigation}})199/templates/footer.hbs         — Footer partial200/templates/comments.hbs       — Comments section partial (lazy-loaded)201```202 203**How it works:**204- Blog posts are individual HTML files — no database needed for content205- The home page uses `{{#each posts}}` from `data.json` to list posts206- Post links like `/blog/hello-world.html` are in static HTML, so the static builder correctly rewrites them for published deployments under `/deployments/{id}/`207- Only comments and auth remain dynamic (edge functions)208- In Browser Mode, comments fall back to localStorage209 210**Adding new posts:**2111. Create a new HTML file in `/blog/` (e.g., `/blog/my-post.html`)2122. Include `{{> navigation}}`, `{{> comments}}`, and `{{> footer}}` partials2133. Add an entry to the `posts` array in `/data.json`2144. Or just ask the AI to create a new post!215 216**Best for**: Personal blogs, content sites with community interaction217 218---219 220## Using Templates221 222### Create Project from Template223 2241. Click **Projects** in sidebar2252. Click **+ New Project**2263. Select **Use a template**2274. Browse available templates2285. Click on a template to preview2296. Click **Use This Template**2307. Name your project2318. Click **Create**232 233Your project opens with all template files ready to customize.234 235**Backend templates in Server Mode:** When you create a project from a backend template, OSW Studio automatically syncs the project to the server, creates a deployment, and provisions all backend features (database tables, edge functions, server functions, secret placeholders). You'll see a summary of what was provisioned.236 237### Customize the Template238 239Once your project is created, modify it like any other project:240 241**Using AI:**242```243Change the color scheme to blue and green244```245 246```247Replace the hero section with a full-width image banner248```249 250```251Add a contact form to the contact page252```253 254**Manually:**255- Edit files directly in the code editor256- Add/remove files as needed257- Update content and styling258 259---260 261## Creating Your Own Templates262 263Turn any project into a reusable template.264 265### When to Create Templates266 267Create templates for:268- Website structures you build often269- Client starter kits270- Personal boilerplate code271- Team standards272 273### How to Create a Template274 2751. **Build your project**276   - Create a complete, working website277   - Include all files and assets278   - Test thoroughly279 2802. **Create a template**281   - Open the project282   - Click **Menu** (⋮) → **Create a Template**283   - Fill in template information:284     - Name285     - Description286     - Category287     - Tags288     - Preview image (optional)289   - The template is saved to your instance's template library290 2913. **Use your template**292   - Find it in the Templates view293   - Create new projects from it294   - Export to `.oswt` from the Templates view to share with others295 296###What Makes a Good Template297 298**✅ Include:**299- Clear, organized file structure300- Commented code for guidance301- Responsive design302- Common pages (home, about, contact)303- Reusable components304 305**❌ Avoid:**306- Personal/client-specific content307- Hardcoded data that should be dynamic308- Overly complex structures309- Unnecessary files310 311---312 313## Managing Templates314 315### Browse Templates316 3171. Click **Templates** in sidebar3182. View available templates3193. Filter by category or search3204. Click to preview321 322### Delete Templates323 3241. Go to Templates view3252. Find the template3263. Click **Delete** (trash icon)3274. Confirm deletion328 329**Note**: Built-in templates can't be deleted.330 331---332 333## Importing & Exporting Templates334 335### Export a Template336 337Share your templates with others:338 3391. Go to **Templates** view3402. Find your template3413. Click **Export** (download icon)3424. Save the template file (`.oswt`)343 344### Export a Deployment as Template345 346In Server Mode, export a published deployment with its backend features:347 3481. Go to **Deployments** view3492. Click the dropdown menu on a deployment card3503. Select **Export as Template**3514. Backend features (edge functions, database schema, server functions, secrets) are automatically included352 353### Import a Template354 355Use templates from others:356 3571. Click **Templates** in sidebar3582. Click **Import Template**3593. Select template file3604. Template appears in your library361 362---363 364## Template Tips365 366**💡 Start with a template**367Even if you'll heavily customize it, starting from a template is faster than from scratch368 369**💡 Create templates for repetition**370Building similar sites for clients? Create a template once, reuse forever371 372**💡 Keep templates simple**373Generic templates are more reusable than highly specific ones374 375**💡 Document your templates**376Add comments in the code explaining sections and how to customize377 378**💡 Update your templates**379Improve them over time as you learn better patterns380 381---382 383## Templates vs Skills384 385**Templates** = Starting point for a project386- Complete file structure for any runtime (Static, Handlebars, React, Preact, Svelte, Vue, Python, Lua)387- Some templates include backend features (edge functions, database schema, secrets)388- Backend features are provisioned automatically in Server Mode389 390**Skills** = Instructions for AI391- Markdown documents392- Teach AI your preferences393- Guide AI's behavior394 395Use templates to start projects. Use skills to improve how AI builds them.396 397**[Learn about Skills →](?doc=skills)**398 399---400 401## Common Questions402 403**Q: Can I modify templates after creating a project?**404A: Yes! Once you create a project from a template, it's yours to modify completely.405 406**Q: Do I need to credit template authors?**407A: Check the template's license. Most templates you create are yours to use freely.408 409**Q: Can I sell websites built from templates?**410A: Built-in templates are yours to use commercially. For imported templates, check their license.411 412**Q: How many templates can I have?**413A: No limit. Create as many as you need.414 415**Q: What happens if I use a backend template in Browser Mode?**416A: The frontend files are created normally. Backend features (edge functions, database, etc.) require Server Mode — you'll see a notification about this.417 418**Q: How do blog posts work in the Blog template?**419A: Blog posts are static HTML files in the `/blog/` directory. The home page lists them from `data.json`. Add new posts by creating HTML files and updating `data.json`, or ask the AI to do it.420 421---422 423**Next Steps:**424 425- **[Getting Started](?doc=getting-started)** - Create your first project426- **[Skills](?doc=skills)** - Teach AI your preferences427- **[Projects](?doc=projects)** - Manage your work428 429---430 431**Want to create templates?** Build a great project, then export it as a template for future use!432