Solo SaaS Suite 100% Svelte 5 Runes

Feature Gating & Cloud Storage

Protect premium SaaS features with declarative <Gate /> components, check RBAC permissions programmatically with useGate(), and upload files directly to S3/Cloudflare R2 with useUpload().

Live Feature Gating Simulator

Toggle simulated user subscription plan & role to see live reactive gating.

Simulate Plan:

useGate.allows('pro'): false

Pro Tier Feature

Exporting automated daily reports requires an active Pro or Enterprise plan.

Upgrade Plan

1. Declarative <Gate /> Usage

GateExample.svelte

svelte

1<!-- Declarative <Gate /> Component with Svelte 5 Context Fallback -->
2<script lang="ts">
3  import { Gate } from 'yaxa-svelte';
4</script>
5
6<!-- If wrapped in <YaxaApp user={data.user}>, user prop is 100% optional! -->
7<Gate requiredPlan="pro" preview={true}>
8  <div class="p-6 bg-white rounded-xl border">
9    <h3 class="font-bold">Advanced Export Analytics</h3>
10    <p>Export your monthly sales reports in PDF and CSV.</p>
11  </div>
12</Gate>

2. Programmatic useGate() Composable

useGateDemo.svelte

svelte

1// Programmatic useGate() Composable Rune
2<script lang="ts">
3  import { useGate } from 'yaxa-svelte';
4
5  const gate = useGate();
6
7  function handleExport() {
8    if (!gate.allows('pro')) {
9      alert('You must upgrade to Pro to export analytics');
10      return;
11    }
12    // Proceed with export...
13  }
14</script>

Cloud Storage (AWS S3 & Cloudflare R2 Presigned Uploads)

Seamless direct-to-bucket presigned uploads with reactive progress tracking and turnkey RequestHandler endpoints:

src/routes/api/upload/+server.ts

typescript

1// 1. Client: useUpload() Composable Rune
2<script lang="ts">
3  import { useUpload } from 'yaxa-svelte';
4
5  const uploader = useUpload({ endpoint: '/api/upload' });
6
7  async function handleFile(e: Event) {
8    const file = (e.target as HTMLInputElement).files?.[0];
9    if (file) {
10      const res = await uploader.upload(file);
11      console.log('Public URL:', res?.url);
12    }
13  }
14</script>
15
16// 2. Server: Turnkey Presigned URL RequestHandler
17// src/routes/api/upload/+server.ts
18import { createS3UploadHandler } from 'yaxa-svelte/server';
19
20export const POST = createS3UploadHandler({
21  folder: 'avatars',
22  maxFileSize: 5 * 1024 * 1024 // 5MB
23});

Previous SaaS Toolkit & DB Next Admin & Introspection