Sydney’s wellness industry is booming. Yoga studios aren’t just places to stretch—they’re community spaces where people find balance, reduce stress, and connect with others.

We built a demo website for a yoga and meditation studio using Svelte 5, the latest evolution of the “truly reactive” JavaScript framework. The result? A calm, inviting website with smooth animations, interactive class schedules, and a bundle size that loads instantly.

View the live demo: mindful-yoga.cosmoswebtech.com.au →

Demo Website Hero Section Live demo hero section showcasing the design and layout

Why Svelte 5 for Wellness Websites?

For the Mindful Yoga Studio demo, we needed a framework that embodied the same principles as yoga itself: simplicity, efficiency, and harmony.

Svelte delivers:

  • Truly reactive - Changes propagate automatically without virtual DOM overhead
  • Minimal JavaScript - Compiled to vanilla JS, no framework runtime
  • Smooth animations - Built-in transition system for gentle, organic movement
  • Developer joy - Clean, readable code that’s easy to maintain
  • Performance - Fast by default, no optimization needed

The Philosophy Match

Think about it: Yoga is about removing unnecessary tension and finding natural flow. Svelte does the same for web development—remove the framework overhead, let the code flow naturally.

The Performance Numbers

Build Output:
  HTML: 13.9 KB (index), 34.2 KB (classes), 10.0 KB (contact)
  JavaScript: ~40 KB (optimized, tree-shaken)
  CSS: ~8 KB (Tailwind purged)

Total Bundle: ~208 KB installed packages
Build Time: under 1s
Status: Instant loading, production-ready

For comparison, typical WordPress yoga sites with page builders exceed 1-2MB.

Cyan & Calm: Wellness Design

Yoga studios need websites that evoke tranquility, clarity, and health. We chose a healthcare-inspired wellness palette:

Primary Colors:

  • Cyan (#06b6d4) - clarity, freshness, calm
  • Teal (#0891b2) - balance, healing
  • Light Cyan (#22d3ee) - energy, vitality

Why cyan/teal?

These colors evoke water, breath, and sky—all central to yoga practice. They’re calming without being sleepy, energizing without being aggressive. Think of morning meditation by the ocean, or the feeling after a great yoga flow.

Typography:

  • Headings: Plus Jakarta Sans (modern, approachable, mindful)
  • Body: Inter (clean, readable, professional)

The fonts create a contemporary wellness aesthetic—spiritual without being mystical, professional without being corporate.

Svelte 5: True Reactivity

What Makes Svelte 5 Different?

Svelte 5 introduced runes—a new system for reactivity that’s more powerful and more intuitive:

Old Svelte approach (Svelte 4):

<script>
  let mobileMenuOpen = false;

  function toggleMenu() {
    mobileMenuOpen = !mobileMenuOpen;
  }
</script>

New Svelte 5 approach:

<script>
  let mobileMenuOpen = $state(false);

  function toggleMenu() {
    mobileMenuOpen = !mobileMenuOpen;
  }
</script>

The $state() rune makes reactivity explicit and more powerful. Svelte compiles this to ultra-efficient JavaScript—no virtual DOM diffing, no framework runtime.

The navigation uses Svelte 5’s reactivity for the mobile menu:

<script lang="ts">
  let mobileMenuOpen = $state(false);

  function toggleMenu() {
    mobileMenuOpen = !mobileMenuOpen;
  }
</script>

<nav class="bg-white shadow-md">
  
  <button onclick={toggleMenu} aria-expanded={mobileMenuOpen}>
    Menu
  </button>

  
  {#if mobileMenuOpen}
    <div class="mobile-menu" transition:slide>
      
    </div>
  {/if}
</nav>

The transition:slide directive adds smooth slide animation automatically—no CSS transitions needed.

ClassCard Component

The class card component showcases Svelte’s clean prop handling:

<script lang="ts">
  interface Props {
    name: string;
    time: string;
    instructor: string;
    level: 'beginner' | 'intermediate' | 'advanced';
    description: string;
  }

  let { name, time, instructor, level, description }: Props = $props();

  const levelColors = {
    beginner: 'bg-green-100 text-green-800',
    intermediate: 'bg-yellow-100 text-yellow-800',
    advanced: 'bg-orange-100 text-orange-800'
  };
</script>

<div class="card">
  <h3>{name}</h3>
  <p>{time}</p>
  <span class={levelColors[level]}>{level}</span>
  <p>{instructor}</p>
  <p>{description}</p>
</div>

The $props() rune provides type-safe prop destructuring. TypeScript verifies all props at compile time.

Three Pages That Welcome Students

1. Homepage: Set the Tone

The homepage creates an immediate sense of calm:

Hero Section:

Find Your Balance
Yoga & Meditation Classes in Sydney

The hero uses a gentle cyan gradient that evokes early morning sky—peaceful but energizing.

Featured Classes:

Below the hero, 4 class cards showcase signature offerings:

  1. Vinyasa Flow - 7:00 AM, Instructor: Sarah Chen, Level: Intermediate

    • Dynamic flowing sequences synchronized with breath

  2. Yin Yoga - 6:00 PM, Instructor: Michael Torres, Level: Beginner

    • Deep stretching and meditation for relaxation

  3. Power Yoga - 6:30 AM, Instructor: Emma Wilson, Level: Advanced

    • Strength-building athletic practice

  4. Meditation - 8:00 PM, Instructor: David Kim, Level: All Levels

    • Guided meditation for inner peace

Each card includes time, instructor, level badge (color-coded), and description.

Benefits Section:

Three key benefits with icons:

  • 🧘 Flexibility - Improve mobility and prevent injury
  • 🧠 Stress Relief - Reduce anxiety through mindful practice
  • 👥 Community - Connect with like-minded individuals

Call-to-Action:

“Ready to begin your journey?” with prominent “Book Your First Class” button.

2. Classes Page: Complete Weekly Schedule

The classes page organizes the full weekly schedule by day:

Monday:

  • Morning Vinyasa (6:30 AM) - Sarah Chen - Intermediate
  • Lunchtime Yoga (12:00 PM) - Emma Wilson - Beginner
  • Evening Yin (6:00 PM) - Michael Torres - All Levels

Tuesday:

  • Power Yoga (6:00 AM) - Emma Wilson - Advanced
  • Prenatal Yoga (10:00 AM) - Sarah Chen - All Levels
  • Restorative Yoga (7:00 PM) - David Kim - Beginner

… and so on for all 7 days, totaling 21 classes per week.

Each class entry uses the ClassCard component for consistency. The level badges help students quickly identify appropriate classes:

  • Green badge: Beginner
  • Yellow badge: Intermediate
  • Orange badge: Advanced

Mobile optimization: Cards stack vertically on mobile for easy scrolling.

3. Contact Page: Simple & Accessible

The contact page balances form and information:

Left side: Contact form with validation

  • Full name (required)
  • Email (validated format)
  • Phone (optional)
  • Message (required, 10 character minimum)
  • Preferred class time dropdown
  • Submit button

Right side: Studio information

  • Address: 123 Wellness Lane, Newtown NSW 2042
  • Phone: (02) 9876 5432 (click-to-call on mobile)
  • Email: [email protected]
  • Hours: Monday-Sunday 6:00 AM - 9:00 PM

The form uses Svelte’s built-in form validation with helpful error messages that appear inline as users type.

SvelteKit: Framework for Static Sites

This demo uses SvelteKit with the static adapter for deployment:

svelte.config.js:

import adapter from '@sveltejs/adapter-static';

export default {
  kit: {
    adapter: adapter({
      pages: 'build',
      assets: 'build'
    })
  }
};

When you run npm run build, SvelteKit generates pure HTML files:

build/
├── index.html
├── classes.html
├── contact.html
└── _app/ (optimized assets)

These can be hosted anywhere—Cloudflare Pages, Netlify, Vercel, or even a simple Apache server.

File-Based Routing

SvelteKit uses intuitive file-based routing:

src/routes/
├── +page.svelte          → mindfulyoga.com.au/
├── classes/+page.svelte  → mindfulyoga.com.au/classes
└── contact/+page.svelte  → mindfulyoga.com.au/contact

Want a new page? Create a new file. It’s that simple.

Layout System

The +layout.svelte file wraps all pages:

<script>
  import Navigation from '$lib/components/Navigation.svelte';
  import Footer from '$lib/components/Footer.svelte';
</script>

<Navigation />
<slot />
<Footer />

The <slot /> is where page content renders. This ensures consistent navigation and footer across all pages.

Tailwind CSS v4 Integration

The demo uses Tailwind CSS v4 via the @tailwindcss/vite plugin:

vite.config.ts:

import { sveltekit } from '@sveltejs/kit/vite';
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [sveltekit(), tailwindcss()]
});

Tailwind Configuration:

import { cosmosTokens, industryPalettes } from '@shared/design-tokens';

export default {
  content: ['./src/**/*.{html,js,svelte,ts}'],
  theme: {
    extend: {
      colors: {
        primary: industryPalettes.healthcare,
        brand: cosmosTokens.colors.primary
      }
    }
  }
};

The healthcare palette provides the cyan/teal colors, while Cosmos brand tokens ensure consistency with other demos.

What a Real Yoga Studio Needs

This demo showcases the foundation, but a live yoga studio website needs:

1. Online Booking System

Integration with booking platforms:

  • Mindbody - Industry standard for yoga/fitness studios
  • Acuity Scheduling - Simple, affordable option
  • Custom booking - For complete control

Features:

  • Real-time class availability
  • Instructor scheduling
  • Credit pack purchases
  • Class cancellations
  • Waitlist management

2. Teacher Profiles

Individual pages for each instructor:

  • Professional photo
  • Biography and yoga journey
  • Certifications and training
  • Teaching style description
  • Upcoming classes

3. Pricing & Packages

Clear pricing page with:

  • Drop-in rates ($25-35 per class)
  • Class packs (10 classes for $200, etc.)
  • Unlimited monthly memberships ($180-250/month)
  • Introductory offers (3 classes for $45)
  • Private session rates

4. Blog for SEO & Community

Regular content about:

  • Yoga tutorials and tips
  • Mindfulness and meditation practices
  • Teacher spotlights
  • Student success stories
  • Wellness and lifestyle advice

Blogs drive organic traffic and position your studio as a wellness authority.

5. Events & Workshops

Dedicated section for:

  • Weekend workshops
  • Teacher training programs
  • Meditation retreats
  • Community events
  • Guest teacher visits

6. Testimonials & Reviews

Social proof builds trust:

  • Student testimonials with photos
  • Google reviews widget
  • Instagram feed of student posts
  • Before/after stories (with permission)

7. Professional Photography

Replace SVG placeholders with:

  • Studio interior shots (clean, inviting spaces)
  • Teachers demonstrating poses
  • Classes in action (with student permission)
  • Lifestyle/brand imagery (mats, props, ambiance)

Investment: $800-1,500 for 15-20 images (photographer, editing).

8. Video Content

Modern yoga studios need video:

  • Studio tour video
  • Teacher introduction videos
  • Sample class clips
  • Meditation guides
  • Student testimonials

SEO for Local Yoga Discovery

When someone searches “yoga studio Newtown” or “meditation classes Sydney,” you need to appear.

Local SEO optimizations:

  1. Google Business Profile - Complete with photos, hours, class schedule
  2. Local keywords - “Sydney yoga,” suburb names, “near me” optimization
  3. Structured data - Schema.org markup for local business
  4. Mobile optimization - Most wellness searches happen on mobile
  5. Fast loading - Core Web Vitals impact rankings

Content strategy:

  • Blog about local wellness events in Sydney
  • Create suburb-specific landing pages (Newtown, Enmore, Marrickville)
  • Feature local teachers and community connections

Hosting & Deployment

Svelte static sites work perfectly with modern hosting:

Cloudflare Pages (recommended):

  • Free hosting
  • Global CDN
  • Automatic deployments from GitHub
  • SSL included
  • Custom domain support

Monthly hosting cost: $0 (yes, free!)

Compare to WordPress hosting at $50-200/month.

Real Yoga Studio Website Pricing

Interested in a custom website for your Sydney yoga or wellness studio?

Foundation Package:

  • Homepage with featured classes
  • Full class schedule page
  • Teacher profiles (up to 5 instructors)
  • Contact page with form
  • Mobile-responsive design
  • Investment: $4,000 - $6,000

Growth Package:

  • Everything in Foundation
  • Online booking integration (Mindbody/Acuity)
  • Blog with 5 initial posts
  • Events/workshops page
  • Pricing & packages page
  • Investment: $7,000 - $10,000

Premium Package:

  • Everything in Growth
  • Video integration (intro video, class samples)
  • Member portal integration
  • Email marketing setup (Mailchimp)
  • Instagram feed integration
  • Custom photography (15 images)
  • Investment: $12,000 - $16,000

Ongoing costs:

  • Hosting: $0-20/month
  • Domain: $20-30/year
  • Booking system: $100-300/month (Mindbody) or $20-50/month (Acuity)
  • Photography: $800-1,500 one-time

Timeline: 4-6 weeks from design to launch.

View the Live Demo

Experience the Mindful Yoga Studio demo:

mindful-yoga.cosmoswebtech.com.au →

Try the features:

  • Navigate between pages (notice instant transitions)
  • Click the mobile menu to see smooth slide animation
  • Browse the full weekly class schedule
  • Fill out the contact form with validation
  • Notice the calming cyan aesthetic throughout

Pay attention to the little details: smooth animations, clear class organization, accessible navigation, peaceful color palette.

Ready to create a beautiful website for your yoga or wellness studio? Contact Cosmos Web Tech for a free consultation about building a calming, conversion-focused website for your Sydney business.

📞 0433 309 677 📧 Email us 🏢 Bella Vista, Western Sydney

We build wellness websites that reflect your values and fill your classes—just like this Mindful Yoga Studio demo.

If your customers need a dedicated app alongside your website, Awesome Apps specialises in Flutter and React Native development for Australian businesses.

Part of the Ganda Tech Services family, Cosmos Web Tech delivers specialist web design and digital marketing for Australian small and medium businesses.