Core settings for your MkSaaS website
The main configuration file that contains the core settings for the website.
MkSaaS boilerplate has already set up the default core settings for you, and you can customize the core settings in this file src/config/website.tsx.
MkSaaS Docsexport const websiteConfig: WebsiteConfig = {
ui: {
// UI settings
},
metadata: {
// Metadata settings
},
features: {
// Features settings
},
routes: {
// Routes settings
},
analytics: {
// Analytics settings
},
auth: {
// Auth settings
},
i18n: {
// Internationalization settings
},
blog: {
// Blog settings
},
docs: {
Controls the appearance of your website.
Controls the light/dark mode settings:
| Property | Type | Description |
|---|---|---|
defaultMode | 'light' | 'dark' | 'system' | Sets the default display mode |
enableSwitch | boolean | When true, allows users to toggle between light/dark modes |
Example:
metadata: {
Controls the metadata of your website. The metadata configuration consists of several subsections:
Defines the images used for branding and social sharing:
| Property | Type | Description |
|---|---|---|
ogImage | string | URL to the Open Graph image used for social media previews |
logoLight | string | URL to your logo image for light mode |
logoDark | string | URL to your logo image for dark mode |
Example:
metadata: {
You can find more about customizing the images in the Images documentation.
Configure links to your social media profiles:
| Property | Type | Description |
|---|---|---|
twitter | string | URL to Twitter/X profile |
github | string | URL to GitHub profile or repository |
discord | string | URL to Discord server |
blueSky | string | URL to BlueSky profile |
youtube | string | URL to YouTube channel |
linkedin | string | URL to LinkedIn profile or page |
facebook | string | URL to Facebook page |
instagram | string | URL to Instagram profile |
tiktok | string | URL to TikTok profile |
Example:
metadata: {
These social media links are used by the Social Media Configuration to generate the appropriate links across the website.
Configure the features for some cases, for example, whether to show upgrade card or not:
| Property | Type | Description |
|---|---|---|
enableUpgradeCard | boolean | Whether to enable the user upgrade card or not in the dashboard, default is true |
enableUpdateAvatar | boolean | Whether to enable the update avatar or not, default is true |
enableAffonsoAffiliate | boolean | Whether to enable the Affonso affiliate or not, default is false |
enablePromotekitAffiliate | boolean | Whether to enable the Promotekit affiliate or not, default is false |
enableDatafastRevenueTrack | boolean | Whether to enable the Datafast revenue track or not, default is false |
enableCrispChat | boolean | Whether to enable the Crisp chat or not, default is true |
enableTurnstileCaptcha | boolean | Whether to enable the Cloudflare Turnstile captcha or not, default is false |
Example:
features: {
You can find more about features configuration in the Affiliates, Captcha, Chatbox documentation.
Configure the routes for some cases, for example, the default login redirect route:
| Property | Type | Description |
|---|---|---|
defaultLoginRedirect | string | The default login redirect route, default is /dashboard |
Example:
routes: {
Configure analytics services for your website:
| Property | Type | Description |
|---|---|---|
enableVercelAnalytics | boolean | When true, enables Vercel Web Analytics |
enableSpeedInsights | boolean | When true, enables Vercel Speed Insights |
Example:
analytics: {
You can find more about analytics services in the Analytics documentation.
Configure authentication options for your website:
| Property | Type | Description |
|---|---|---|
enableGoogleLogin | boolean | When true, enables Google login |
enableGithubLogin | boolean | When true, enables GitHub login |
enableCredentialLogin | boolean | When true, enables credential login |
Example:
auth: {
MkSaaS supports multiple authentication providers by default. You can selectively disable specific providers using these configuration options:
enableGoogleLogin to false to remove Google login optionenableGithubLogin to false to remove GitHub login optionenableCredentialLogin to false to remove credential loginNote: Please ensure at least one login method is enabled, otherwise users will not be able to log in.
You can find more about authentication options in the Authentication documentation.
Configure language support for your application:
| Property | Type | Description |
|---|---|---|
defaultLocale | string | Default language locale (e.g., 'en') |
locales | Record<string, { flag?: string; name: string; hreflang?: string }> | Available languages with flag emoji and display name |
MkSaaS supports multiple languages through its i18n system. Here's how to configure it:
i18n: {
For each supported language:
en, es, fr)flag is an optional emoji to visually represent the languagename is the display name of the language in its native formhreflang is the hreflang value for SEO, see ISO 3166-1 alpha-2 for more detailsYou can find more about internationalization in the Internationalization documentation.
Configure the blog functionality:
| Property | Type | Description |
|---|---|---|
enable | boolean | Whether to enable the blog or not, default is true |
paginationSize | number | Number of posts to display per page |
relatedPostsSize | number | Number of related posts to show |
Example:
blog: {
If you don't need the blog functionality, you can set enable to false, then the blog menus will not be shown in the navbar and footer, and the blog related pages will not be included in the sitemap, but will not prevent access to the /blog route.
You can find more about blog configuration in the Blog documentation.
Configure the docs functionality:
| Property | Type | Description |
|---|---|---|
enable | boolean | Whether to enable the docs or not, default is true |
Example:
docs: {
If you don't need the docs functionality, you can set enable to false, then the docs menus will not be shown in the navbar and footer, and the docs related pages will not be included in the sitemap, but will not prevent access to the /docs route.
You can find more about docs configuration in the Docs documentation.
Configure email services:
| Property | Type | Description |
|---|---|---|
provider | 'resend' | Email service provider (currently only Resend is supported) |
fromEmail | string | Contact email for sending emails |
supportEmail | string | Contact email for receiving emails |
Example:
mail: {
You can find more about mail configuration in the Email documentation.
Configure newsletter services:
| Property | Type | Description |
|---|---|---|
provider | 'resend' | Newsletter service provider (currently only Resend is supported) |
autoSubscribeAfterSignUp | boolean | Whether to automatically subscribe users after sign up |
Example:
newsletter
If you don't need the newsletter functionality, you can set enable to false, then the subscription form will not be shown in the home page and blog pages, and the subscription status will not be shown in the notification settings page.
You can find more about newsletter configuration in the Newsletter documentation.
Configure file storage:
| Property | Type | Description |
|---|---|---|
enable | boolean | Whether to enable the storage or not, default is true |
provider | 's3' | Storage provider (currently only S3 is supported) |
Example:
storage: {
If you don't need the storage functionality, you can set enable to false, then the update avatar functionality in the settings page will not be available.
You can find more about storage configuration in the Storage documentation.
Configure payment processing services:
| Property | Type | Description |
|---|---|---|
provider | 'stripe' | Payment processor (currently only Stripe is supported) |
Example:
payment: {
You can find more about payment configuration in the Payment documentation.
Configure price plans:
| Property | Type | Description |
|---|---|---|
plans | Record<string, PricePlan> | Pricing plans configuration |
Each price plan in the plans object can have the following properties:
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the plan |
name | string? | Display name of the plan |
description | string? | Description of the plan features |
features | string[]? | List of features included in this plan |
limits | string[]? | List of limits for this plan |
prices | Price[] | List of price options for the plan (monthly, yearly, one-time, etc.) |
isFree | boolean | Whether this is a free plan |
isLifetime | boolean | Whether this is a lifetime (one-time payment) plan |
popular | boolean? | Whether to highlight this plan as popular |
credits | object? | Credits configuration for this plan |
disabled | boolean? | Whether to disable this plan in UI |
The prices array contains objects with the following structure:
| Property | Type | Description |
|---|---|---|
type | 'subscription' | 'one_time' | Type of payment (subscription or one-time) |
priceId | string | Stripe price ID (not product ID) |
amount | number | Price amount in currency units (dollars, euros, etc.) |
currency | string | Currency code (e.g., USD) |
interval | 'month' | 'year'? | Billing interval for recurring payments |
trialPeriodDays | number? | Free trial period in days |
allowPromotionCode | boolean? | Whether to allow promotion code for this price |
disabled | boolean? | Whether to disable this price in UI |
The structure of credits object:
| Property | Type | Description |
|---|---|---|
enable | boolean | Whether to enable credits |
amount | number | Number of credits |
expireDays | number? | Expiration period (days) for the credits, optional |
MkSaaS template uses three price plans by default: Free plan, Pro subscription plan (monthly/yearly), and Lifetime plan (one-time payment), as shown in the website configuration:
price: {
When to set price plans or prices as disabled?
Set a price plan to disabled: true when the price plan is not available for new customers, but you need to keep it for existing users who have already purchased it.
Set a price to disabled: true when that specific price is not available anymore, but existing subscribers on that price should still be able to see it in the billing page.
When displaying plans to users, the Price Configuration enhances these plans with translated content such as name, description, and feature lists.
You can find more about price configuration in the Payment documentation.
Configure the credit system for your website:
| Property | Type | Description |
|---|---|---|
enableCredits | boolean | Whether to enable the credit system |
enablePackagesForFreePlan | boolean | Whether free plan users can purchase credits (by default, only paid users can buy extra credit packages) |
registerGiftCredits | object | Configuration for registration gift credits |
packages | Record<string, CreditPackage> | Configurable credit packages for purchase |
The structure of registerGiftCredits object:
| Property | Type | Description |
|---|---|---|
enable | boolean | Whether to enable registration gift credits |
credits | number | Number of credits given on registration |
expireDays | number? | Expiry period (days) for the gifted credits, optional |
The structure of each credit package in packages:
| Property | Type | Description |
|---|---|---|
id | string | Unique identifier for the package |
name | string? | Display name of the package |
description | string? | Description of the package |
popular | boolean? | Whether to highlight this package as popular |
credits | number | Number of credits included in the package |
price | object | Price info, including priceId, amount, currency, whether to allow promotion code |
expireDays | number? | Validity period (days) for the credits, optional, undefined means no expire |
disabled | boolean? | Whether to disable this package in UI, optional |
Example:
credits: {
You can find more about credits configuration in the Credits documentation.
Now that you understand the website configuration, explore these related topics:
Configure your subscription plans and pricing