Content Editing

All marketing copy, brand identity, pricing tables, and in-product docs in SaaSForge Core live in plain TypeScript or Markdown files. No CMS to install: edit, save, redeploy.

This guide is the map: every config file, what page/section it controls, and how to edit it safely.

The 3 layers of editable content

Edit any file, save, the dev server hot-reloads. For more, see Customization.

Brand & identity

src/config/brand.ts

Product name, company name, support/legal/privacy emails, social links, footer copyright.

src/config/app.ts

App-level metadata: title, description, default locale, build version.

src/config/seo.ts

Default SEO title, description, OG image. Per-page overrides live in each page's generateMetadata().

src/config/pricing.ts

The single source of truth for plan tiers, price points, feature lists. Stripe Price IDs come from env vars (NEXT_PUBLIC_STRIPE_*_PRICE_ID).

src/config/routes.ts

Route constants used across the app. Edit if you rename URL paths.

src/config/docs.ts

The list of in-product docs (slug, title, description, category). Add a new entry here whenever you add a .mdx file under content/docs/ so it shows up in the docs sidebar.

Marketing copy (src/config/ui/)

Each marketing section reads from a matching config file. Edit the file, the section updates.

Editing example: change pricing tiers

// src/config/ui/pricing2.ts
export const pricing2Config: Pricing2Config = {
  badge: "Pricing",
  title: "Choose the right plan",
  subtitle: "Start free, upgrade when you need more.",
  plans: [
    {
      name: "Pro",
      price: { monthly: 29, yearly: 290 },
      features: [
        { label: "Unlimited workspaces", included: true },
        { label: "Priority support", included: true },
      ],
      cta: { label: "Start Pro", href: "/sign-up?plan=pro" },
    },
    // ...
  ],
};

Save. The pricing page (and any other place that reads pricing2Config) updates immediately.

Editing example: add an FAQ entry

// src/config/ui/faq.ts
export const faqConfig: FAQConfig = {
  badge: "FAQ",
  title: "Frequently asked questions",
  items: [
    { question: "How do I export my data?", answer: "Settings → Data → Export." },
    // add new entries here
  ],
};

Long-form content

In-product documentation (content/docs/)

This page is one of them. Each .mdx file is rendered inside the /docs/[slug] route. To add a new doc:

1. Create content/docs/my-new-page.mdx with a top-level # Title heading.
2. Add an entry to DOCS_CONFIG in src/config/docs.ts:

   {
     slug: "my-new-page",
     title: "My New Page",
     description: "Short description for the sidebar.",
     category: "core", // "getting-started" | "core" | "integrations" | "deployment"
   }
   

3. Save. The page is live at /docs/my-new-page.

Blog posts (content/blog/)

Each post is an .mdx file with frontmatter. The blog listing reads from this directory automatically.

Legal pages (src/app/(marketing)/(legal)/)

Terms of Service, Privacy Policy, and DPA live as React components, not MDX (so they can interpolate brand values from src/config/brand.ts). Edit the JSX directly. Run a legal review before going live.

Email templates (src/lib/email/templates/)

Workspace invites, password resets, and notifications are React Email components. Edit the template, the rendered HTML is sent via Resend.

Where to find a piece of copy

If you spot a string in the UI you want to change and don't know where it lives:

1. Quote-search the project for the exact string ("Choose the right plan").
2. Hits in src/config/ui/*.ts → edit the config file.
3. Hits in src/components/ → edit the component (rare; usually wrap it in a config).
4. Hits in src/app/(marketing)/(legal)/ → edit the legal page JSX.
5. Hits in src/lib/email/templates/ → edit the email template.

After editing

• Local dev: changes hot-reload.
• Production: redeploy (Vercel auto-deploys on push to main).
• For per-page metadata (titles, OG images), each page exports generateMetadata(): edit that for SEO control beyond defaults in src/config/seo.ts.