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 paragraph can be edited directly.
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 "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.