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:

This heading can be edited directly

This paragraph can be edited directly.

This link text and URL can be edited 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:
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:

{{question "How does this work?"}}

{{answer "This is how it works..."}}

{{name}}

{{name "John Doe"}}

{{role "CEO & Founder"}}

{{quote "This product changed my life!"}}

{{author "Happy Customer"}}
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.