Site.Studio - LLMtxt Documentation

Project Overview

Site.Studio (internally called Sivu Studio) is a modern AI-powered website builder and content management system that bridges the gap between code and visual editing. It enables teams to build responsive websites using Tailwind CSS with real-time collaboration, inline editing capabilities, and AI assistance.

Primary Goal: Empower design-savvy developers and code-driven designers to build and prototype websites collaboratively without the complexity of traditional development workflows.

Core Features & How to Use

1. Inline Editing System
Edit content directly in the preview without switching to a separate editor:

How to Use:
- Select any block in the builder
- Click directly on text, headings, or links in the preview
- Edit content in place
- Press Enter to save or Escape to cancel
- Changes sync automatically across your team

Making Elements Editable:
<h2 data-editable="true">This heading can be edited directly</h2>
<p data-editable="true">This paragraph can be edited directly.</p>
<a href="/contact" data-editable="true">This link text and URL can be edited</a>

Supported Elements: Text content (h1-h6, p, span), links (text and href), images

2. Ultra-Simple Repeater System
Create dynamic content collections like FAQ lists, team cards, or testimonials without complex setup:

How to Use:
1. Add a repeater container: <div data-repeater="true">
2. Create your template with placeholders: {{title "Default Title"}}
3. The system automatically detects fields and creates a CMS interface
4. Manage content through the "Dynamic Content" panel

Syntax Examples:
<!-- FAQ/Accordion -->
<div data-repeater="true">
  <div class="faq-item">
    <h3>{{question "How does this work?"}}</h3>
    <p>{{answer "This is how it works..."}}</p>
  </div>
</div>

<!-- Team Cards -->
<div data-repeater="true">
  <div class="team-member">
    <img src="{{photo "/placeholder.jpg"}}" alt="{{name}}">
    <h3>{{name "John Doe"}}</h3>
    <p>{{role "CEO & Founder"}}</p>
  </div>
</div>

<!-- Testimonials -->
<div data-repeater="true">
  <blockquote>
    <p>{{quote "This product changed my life!"}}</p>
    <cite>{{author "Happy Customer"}}</cite>
  </blockquote>
</div>

Features:
- Automatic field detection from {{placeholder}} patterns
- Inline defaults: {{title "Default Value"}}
- Auto-generates 2 sample items
- Drag & drop reordering in CMS
- Add/remove items easily

3. AI-Powered Content Creation
Generate and improve content using AI assistance:

How to Use:
- Generate New Blocks: Describe what you want and AI creates the HTML/CSS
- Improve Content: Select text and ask AI to rewrite or optimize
- Design Suggestions: Get AI recommendations for layout improvements
- Code Assistance: AI helps create custom Tailwind components

Example Prompts:
- "Create a hero section for a SaaS company"
- "Make this text more engaging"
- "Add a pricing table with 3 tiers"
- "Create a contact form with validation"

4. Code Editor with Smart Autocompletion
Professional code editing experience with full Tailwind CSS support:

Features:
- Type any Tailwind class and get intelligent suggestions
- Hover over classes to see CSS values
- Supports responsive prefixes (sm:, md:, lg:)
- State variants (hover:, focus:, group-hover:)
- Arbitrary values (bg-[#ff0000], w-[500px])

How to Use:
- Start typing Tailwind classes
- Use Ctrl+Space for suggestions
- Hover for documentation
- Auto-formatting and syntax highlighting

5. Real-time Team Collaboration
Work together with your team in real-time:

Features:
- See who's online with presence indicators
- Live cursor tracking in the code editor
- Instant content sync across all team members
- Conflict resolution for simultaneous edits
- Team permissions and role management

How to Use:
1. Invite team members via email
2. Set permissions (view, edit, admin)
3. Work simultaneously on different sections
4. See live changes as teammates edit

6. Templates and Themes
Start quickly with pre-built designs:

Available Templates:
- Landing pages for SaaS, agencies, startups
- Portfolio and personal websites
- E-commerce product pages
- Blog and content sites
- Event and conference pages

How to Use:
1. Choose a template when creating a new site
2. Customize colors, fonts, and content
3. Add your own blocks and sections
4. Export when ready

Getting Started

Creating Your First Site
1. Register for a free account at site.studio
2. Choose a template or start blank
3. Customize using the visual editor or code view
4. Add content using inline editing or repeaters
5. Collaborate by inviting team members
6. Export when ready for production

Building Blocks
- Headers/Navigation: Responsive navigation bars
- Hero Sections: Eye-catching landing sections
- Feature Grids: Showcase product features
- Testimonials: Customer feedback sections
- Pricing Tables: Subscription and pricing displays
- Contact Forms: Lead capture and contact forms
- Footers: Site-wide footer sections

Content Management
- Text Editing: Click directly on text to edit
- Image Management: Upload and optimize images
- Dynamic Lists: Use repeaters for scalable content
- SEO Settings: Meta tags, descriptions, and social sharing
- Form Handling: Connect forms to email or databases

Export and Publishing

Export Options
1. Static HTML/CSS/JS - Perfect for CDNs and static hosting
2. Netlify Integration - One-click publishing to Netlify
3. Download ZIP - All files for custom hosting

Publishing Workflow
1. Preview your site to ensure everything looks perfect
2. Choose export format based on your hosting needs
3. Download or deploy directly to Netlify
4. Custom domains available with Pro plans

Pricing Plans

Trial (Free)
- 1 site limit
- Unlimited team members
- Basic templates
- Netlify publishing
- Perfect for testing and small projects

Pro (€19/month)
- Unlimited sites and members
- Full AI features
- Premium templates
- No Site.Studio branding
- Advanced export options
- Priority support

Custom (€399/month)
- White-label solution
- Custom design services
- Managed hosting and updates
- Dedicated account manager
- Custom integrations

Best Practices

Design Tips
- Start with a template to save time
- Keep it simple - less is often more
- Use consistent spacing with Tailwind's scale
- Test on mobile early and often
- Optimize images for faster loading

Content Strategy
- Write clear headlines that grab attention
- Use bullet points for easy scanning
- Add social proof with testimonials
- Include clear CTAs (calls-to-action)
- Keep forms short to increase conversions

Collaboration Tips
- Assign roles clearly (designer, writer, reviewer)
- Use comments to communicate changes
- Work in sections to avoid conflicts
- Regular check-ins to align on progress
- Test before export with the whole team

Site.Studio combines the power of code with the simplicity of visual editing, making it perfect for teams who want professional results without the complexity of traditional development workflows.