Home / Docs / Site configuration
Getting Started / 100% DRY

Site Configuration (site.config.ts)

Define your branding, single-email routing, project licensing, color themes, navigation, and SEO rules in one single source of truth.

Live Interactive site.config.ts Generator

src/site.config.ts
typescript
import { defineSiteConfig } from 'yaxa-svelte';
export const siteConfig = defineSiteConfig({
name: 'My SaaS App',
title: 'My SaaS App — Modern Web App',
description: 'Built with Yaxa, SvelteKit, and Tailwind CSS v4.',
url: 'https://mysaas.com',
// Single-email mode: Solo developers don't need to configure company info!
email: 'hello@mysaas.com',
// Software Nature & License (Accurate SEO & OpenGraph badge)
project: {
license: 'MIT',
type: 'open-source',
pricingModel: 'open-source',
repositoryUrl: 'https://github.com/my-org/my-app'
},
theme: {
primaryColor: '#ff3e00',
neutralColor: '#71717a',
defaultMode: 'system'
},
seo: {
titleTemplate: '%s · My SaaS App',
defaultOgImage: '/api/og',
twitterCard: 'summary_large_image'
},
nav: [
{ label: 'Features', href: '#features' },
{ label: 'Docs', href: '/docs' },
{ label: 'Pricing', href: '#pricing' }
],
socials: {
github: 'https://github.com/my-org/my-app'
}
});

Solo Dev First: Single-Email & Project Licensing

If you're a solo developer without a registered company, you don't need to fill out complex legal addresses or VAT IDs. Simply supply your primary email and project configuration. Yaxa automatically derives support links, Schema.org publisher data, and OpenGraph badges accurately.

src/site.config.ts
typescript
// Minimal Solo Developer Configuration
export const siteConfig = defineSiteConfig({
name: 'FocusBoard',
title: 'FocusBoard — Minimalist Kanban for Solopreneurs',
description: 'Track your daily tasks with zero distraction.',
url: 'https://focusboard.app',
email: 'alex@focusboard.app', // Automatically fills support, legal & DPO contact!
project: {
license: 'MIT',
type: 'open-source' // Or 'commercial-saas', 'source-available', 'freemium'
}
});

Accessing Config Anywhere (Context API)

When wrapped in <YaxaApp />, your configuration is provided to all descendant components via Svelte 5 context. You can retrieve it anytime using getSiteConfig():

src/routes/any-component.svelte
svelte
<script lang="ts">
import { useSiteConfig } from 'yaxa-svelte';
// Reactively retrieve the current site configuration from context
const site = useSiteConfig();
</script>
<h1>Welcome to {site.name}</h1>
<p>{site.description}</p>
<p>License: {site.project?.license}</p>