Configure an Astro theme with JSON — no code required

How Finance App uses JSON files to control the navbar, footer, and landing page. Update your Astro JS site without touching component code.

Categories: technical

Tag: #astro #astro js #json #configuration #theme

Publish On: 2026-10-07

Why JSON configuration matters

Most themes force you to edit component files to change simple things — a menu item, a footer link, a headline.

That is slow and error-prone. One wrong edit and the site breaks.

Finance App takes a different approach. Content and layout are controlled through JSON files in src/data/. You edit the JSON, the site updates.

What you can configure

Two files control most of the site:

  • src/data/config.json — navbar menus, footer content, site title, social links
  • src/data/home/home.json — landing page sections (hero, features, pricing, CTA)

Everything else is Markdown.

Open src/data/config.json and find the nav_list array:

{
  "nav": "About",
  "icon": "/img/icon/nav-about.svg",
  "link": "/about"
}

Save, refresh, done. No component editing.

Example: changing the hero text

Open src/data/home/home.json and find the info_title and info_description fields:

{
  "info_title": "Build modern sites with Astro JS",
  "info_description": "Finance App is a multipurpose Astro JS theme..."
}

Change the text. Save. The landing page updates.

Why this is useful

  • For developers — clients can update content without touching code
  • For teams — writers and marketers can edit the site directly
  • For freelancers — faster project handoff, fewer support requests
  • For buyers — no need to learn Astro to update a menu

What still needs code

JSON handles content and layout. If you need new components, new pages with unique structure, or custom logic, you will edit .astro files.

But for most updates — text, links, menus, images, section titles — JSON is enough.

Get Finance App

Get Finance App →

One-time purchase. Lifetime updates included. No subscriptions.

Explore other themes

Latest Insights

Articles on fintech, AI products, and building modern websites with Astro JS.

How Finance App handles SEO out of the box: meta tags, Open Graph, Twitter Cards, sitemap, and RSS. Built for Astro JS projects that need to rank.

SEO for Astro JS — meta tags, sitemap, and RSS made simple

How Finance App handles SEO out of the box: meta tags, Open Graph, Twitter Cards, sitemap, and RSS. Built for Astro JS projects that need to rank.

How to build a fast, SEO-friendly site for your AI product using Finance App, a multipurpose Astro JS theme. Landing page, blog, and product pages included.

Astro JS theme for AI products — launch a modern AI site

How to build a fast, SEO-friendly site for your AI product using Finance App, a multipurpose Astro JS theme. Landing page, blog, and product pages included.

How to launch a startup website with Finance App, a multipurpose Astro JS theme. Landing page, product pages, blog, and contact form in one project.

Astro JS theme for startups — build a fast, modern site

How to launch a startup website with Finance App, a multipurpose Astro JS theme. Landing page, product pages, blog, and contact form in one project.