Marby

Marby is an MIT-licensed real estate website template for boutique agencies and brokerages, built with Astro and also shipped as a Next.js app, producing static output with no UI framework.

What is Marby?

Marby is a real estate theme that generates a full static site from Markdown files and a single JSON content file, and it runs on either Astro 7 or Next.js 16 (App Router, React 19, static export). Astro is the source of truth; the Next.js build in the next/ directory is generated from it by conversion scripts and checked element by element against it on every page. The template is made by Startfrom and released under the MIT license.

Key Features

• Dual framework builds — one codebase outputs both an Astro site and a Next.js app; the Next.js version is produced by tools/astro-to-next.mjs and tools/collect-css.mjs, with a handful of React files written by hand.
• Markdown-driven property pages — each file in src/content/properties/ becomes a route; frontmatter holds specs, highlights, nearby places and gallery images, while the Markdown body is the description and the filename is the URL.
• Markdown blog — posts in src/content/blog/ use the fields order, title, date, category and image, with category filters and related articles.
• Schema validation — collection schemas in src/content.config.ts mean a typo in a field fails the build instead of breaking a page.
• Vanilla TypeScript interactions — no UI framework; each behaviour is a small module in src/scripts/, wired through entry.ts (lightbox galleries, listing tabs and live search, FAQ accordions that open one at a time, overlay menu, testimonial slider, sticky card stacks, team ticker).
• Design tokens — colours, type scale and easings are CSS custom properties in src/styles/tokens.css, shared styles in global.css, and per-component styles.
• Motion accessibility — honours prefers-reduced-motion, switching off smooth scrolling (Lenis), the ticker and scroll reveals while keeping the layout intact.
• Self-hosted fonts — Urbanist and Onest delivered through Fontsource.
• Optional integrations — PUBLIC_FORM_ENDPOINT posts the contact form to Formspree, Basin or a similar endpoint, PUBLIC_VERCEL_ANALYTICS enables Vercel Web Analytics and Speed Insights, and PUBLIC_STORE_BADGE shows a corner badge.

Who is it for?

• Boutique real estate agencies that need a brochure-style site with filterable listings, property detail pages and lead advisor cards without a CMS.
• Brokerages with content marketing that want a blog with categories alongside office and team pages.
• Developers preferring Next.js who want the same design as a static-export React app instead of Astro.
• Static-host users deploying plain files from dist/ to Vercel, Netlify or any static host.

What can you do with Marby?

• Agency owners: replace the placeholder copy in src/content/site.json (navigation, footer, socials, team, testimonials, FAQs, offices) to ship a branded multi-page site.
• Brokers listing inventory: add one Markdown file per property to get a page with specs, highlights, map, nearby places and a room-grouped gallery with lightbox.
• Content marketers: publish blog posts as Markdown to populate filtered article grids and related-article links.
• Form handlers: connect a Formspree or Basin endpoint to receive contact submissions, with loading and success states built in.

Pages included

Home, /about-us, /property with tabs and search, /property/[slug], /blog, /blog/[slug], /contact, /terms-conditions and a 404. The contact form and footer appear on every page except the 404.

How does Marby work?

Run npm install and npm run dev to serve on localhost:4321, edit content in src/content/, then npm run build to emit dist/. For the Next.js version, enter next/, install and run dev; you can edit next/ directly if you only use that stack. Set site in astro.config.mjs so canonical and Open Graph URLs are correct.

Pricing

Free and MIT licensed.

FAQ

Is Marby free?

Yes. Marby is released under the MIT license, so you can use and modify it freely; the demo names, addresses and photos are placeholders that you should replace with your own before launching.

Does Marby work with Next.js?

Yes. The same site ships as a Next.js 16 app using the App Router and React 19 with static export. It is generated from the Astro source and verified page by page against it, so both builds look and behave the same.

Do I need a CMS to use Marby?

No. Content lives in Markdown files and a single site.json file, and schemas validate fields at build time. A wrong field name fails the build rather than producing a broken page.

Does it handle reduced motion?

Yes. Under prefers-reduced-motion, Lenis smooth scrolling, the team ticker and scroll-triggered reveals switch off while the layout stays intact.

Where do property images and video go?

Images and the hero video live in public/assets/; the property map embeds Google Maps.