Hugging Face's logo

Spaces:
Wiuhh
/
osw-studio
Sleeping

App Files Community
osw-studio / docs /TEMPLATES.md
otst's picture
otst
add site templates with automatic backend provisioning
07db684
preview code
|
raw
history blame contribute delete
9.9 kB

Templates

Start your projects faster with pre-built templates.

Templates 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.

What Are Templates?

Templates are complete website projects that you can use as starting points:

  • Complete structure - All HTML, CSS, and JavaScript files
  • Professional design - Ready-to-use layouts and styling
  • Customizable - Modify anything to match your needs
  • Learning resources - Study well-structured code

Think of templates as:

  • Website blueprints you can build upon
  • Starter kits that save time
  • Examples of best practices
  • Shortcuts to professional results

Template Types

OSW Studio has two types of templates:

Project Templates

Standard website starting points with HTML, CSS, and JavaScript files. Work in both Browser Mode and Server Mode.

Site Templates

Bundles frontend files plus backend infrastructure — edge functions, database schema, server functions, and secrets. In Server Mode, creating a project from a site template automatically provisions the full backend in one step.

In Browser Mode, site templates create the frontend files normally (backend features require Server Mode).

How to tell them apart: Site templates show a "Site" badge in the template browser.

Built-in Templates

Blank (Project)

Minimal starting point with basic structure.

Includes:

  • Single index.html
  • Basic CSS file
  • Empty JavaScript file
  • Clean slate for building

Best for: Starting from scratch with minimal setup

Example Studios (Project)

A multi-page agency portfolio showing OSW Studio's capabilities.

Includes:

  • Multiple HTML pages with Handlebars partials
  • data.json for site-wide data (site name, navigation, social links)
  • Responsive design with modern CSS
  • Interactive elements (portfolio gallery, contact form)

Best for: Learning how OSW Studio works, understanding Handlebars partials

Landing Page with Contact Form (Site)

Professional landing page with a working contact form powered by Resend email.

Includes:

  • Single-page design with contact form
  • 2 edge functions (submit-contact, list-messages)
  • Database schema for storing messages
  • Optional Resend email integration (requires API key)

Best for: Business landing pages, lead capture, contact forms

Blog with Comments (Site)

Static blog with user authentication and moderated comments.

Includes:

  • Static HTML blog posts in /blog/ directory
  • Handlebars partials for navigation, footer, and comments section
  • data.json post index for the home page
  • 6 edge functions (comments, auth: register, login, logout, auth-status)
  • Database schema for comments, users, and sessions

File structure:

/data.json                    — Site metadata + posts array
/index.html                   — Blog home (renders post list via Handlebars)
/blog/hello-world.html        — Static blog post with {{> comments}} partial
/blog/getting-started.html    — Static blog post with {{> comments}} partial
/styles/style.css             — All styles
/scripts/main.js              — Comments + auth JS (no post loading)
/templates/navigation.hbs     — Nav partial (uses {{siteName}}, {{navigation}})
/templates/footer.hbs         — Footer partial
/templates/comments.hbs       — Comments section partial (lazy-loaded)

How it works:

  • Blog posts are individual HTML files — no database needed for content
  • The home page uses {{#each posts}} from data.json to list posts
  • Post links like /blog/hello-world.html are in static HTML, so the static builder correctly rewrites them for published sites under /sites/{siteId}/
  • Only comments and auth remain dynamic (edge functions)
  • In Browser Mode, comments fall back to localStorage

Adding new posts:

  1. Create a new HTML file in /blog/ (e.g., /blog/my-post.html)
  2. Include {{> navigation}}, {{> comments}}, and {{> footer}} partials
  3. Add an entry to the posts array in /data.json
  4. Or just ask the AI to create a new post!

Best for: Personal blogs, content sites with community interaction

Using Templates

Create Project from Template

  1. Click Projects in sidebar
  2. Click + New Project
  3. Select Use a template
  4. Browse available templates
  5. Click on a template to preview
  6. Click Use This Template
  7. Name your project
  8. Click Create

Your project opens with all template files ready to customize.

Site templates in Server Mode: When you create a project from a site template, OSW Studio automatically syncs the project to the server, creates a site, and provisions all backend features (database tables, edge functions, server functions, secret placeholders). You'll see a summary of what was provisioned.

Customize the Template

Once your project is created, modify it like any other project:

Using AI:

Change the color scheme to blue and green

Replace the hero section with a full-width image banner

Add a contact form to the contact page

Manually:

  • Edit files directly in the code editor
  • Add/remove files as needed
  • Update content and styling

Creating Your Own Templates

Turn any project into a reusable template.

When to Create Templates

Create templates for:

  • Website structures you build often
  • Client starter kits
  • Personal boilerplate code
  • Team standards

How to Create a Template

  1. Build your project

    • Create a complete, working website
    • Include all files and assets
    • Test thoroughly

  2. Export as template

    • Open the project
    • Click Menu (⋮) → Export
    • Choose Template
    • Fill in template information:
      • Name
      • Description
      • Category
      • Tags
      • Preview image (optional)

  3. Use your template

    • Find it in the Templates view
    • Create new projects from it
    • Share with others (export as file)

###What Makes a Good Template

✅ Include:

  • Clear, organized file structure
  • Commented code for guidance
  • Responsive design
  • Common pages (home, about, contact)
  • Reusable components

❌ Avoid:

  • Personal/client-specific content
  • Hardcoded data that should be dynamic
  • Overly complex structures
  • Unnecessary files

Managing Templates

Browse Templates

  1. Click Templates in sidebar
  2. View available templates
  3. Filter by category or search
  4. Click to preview

Delete Templates

  1. Go to Templates view
  2. Find the template
  3. Click Delete (trash icon)
  4. Confirm deletion

Note: Built-in templates can't be deleted.

Importing & Exporting Templates

Export a Template

Share your templates with others:

  1. Go to Templates view
  2. Find your template
  3. Click Export (download icon)
  4. Save the template file (.oswt)

Export a Site as Template

In Server Mode, export a published site with its backend features:

  1. Go to Sites view
  2. Click the dropdown menu on a site card
  3. Select Export as Site Template
  4. Backend features (edge functions, database schema, server functions, secrets) are automatically included

Import a Template

Use templates from others:

  1. Click Templates in sidebar
  2. Click Import Template
  3. Select template file
  4. Template appears in your library

Template Tips

💡 Start with a template Even if you'll heavily customize it, starting from a template is faster than from scratch

💡 Create templates for repetition Building similar sites for clients? Create a template once, reuse forever

💡 Keep templates simple Generic templates are more reusable than highly specific ones

💡 Document your templates Add comments in the code explaining sections and how to customize

💡 Update your templates Improve them over time as you learn better patterns

Templates vs Skills

Project Templates = Starting point for a project

  • Complete website structure
  • HTML, CSS, JavaScript files
  • Ready to customize and deploy

Site Templates = Starting point with backend

  • Everything in project templates, plus
  • Edge functions, database schema, server functions, secrets
  • Automatic backend provisioning in Server Mode

Skills = Instructions for AI

  • Markdown documents
  • Teach AI your preferences
  • Guide AI's behavior

Use templates to start projects. Use skills to improve how AI builds them.

Learn about Skills →

Common Questions

Q: Can I modify templates after creating a project? A: Yes! Once you create a project from a template, it's yours to modify completely.

Q: Do I need to credit template authors? A: Check the template's license. Most templates you create are yours to use freely.

Q: Can I sell websites built from templates? A: Built-in templates are yours to use commercially. For imported templates, check their license.

Q: How many templates can I have? A: No limit. Create as many as you need.

Q: What happens if I use a site template in Browser Mode? A: The frontend files are created normally. Backend features (edge functions, database, etc.) require Server Mode — you'll see a notification about this.

Q: How do blog posts work in the Blog template? A: 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.

Next Steps:

Want to create templates? Build a great project, then export it as a template for future use!