Svelte Routify MDsveX Demo

Svelte, Routify, MDsveX demo is a starter template that pairs the Svelte component framework with the Routify v2 file-based router and the MDsveX Markdown preprocessor, all running on the Svite (Svelte + Vite) toolchain and backed by a GraphQL data layer for site metadata.

What is this template?

This template is a demonstration project for building static sites with Svelte, Routify v2, and MDsveX. It takes Svelte components and Markdown files (processed by MDsveX) as input, and returns a routed site with a GraphQL layer that populates metadata into pages. The project includes a site metadata configuration file named app.config.js, and all GraphQL-layer files live in the support directory for modification. The repository itself does not state an author or a description, so its origin is unverified from the page.

Key Features

• Svelte and Routify v2 — The template wires Svelte components into Routify's file-based routing system, so pages are organized by folder structure.
• MDsveX Markdown support — Markdown content can be authored in .mdx-style files (via MDsveX) and rendered as Svelte components.
• GraphQL Data Layer — A built-in GraphQL layer lets you query site metadata; data is injected into a constant named query before the component is processed.
• Svite (Svelte + Vite) toolchain — The project uses Svite, the Vite integration for Svelte, for development server and builds.
• Site metadata configuration — app.config.js centralizes configurable site metadata, with a GraphQL query example that retrieves the site title.
• Getting-started workflow — Only two commands are needed: yarn install and yarn dev, which start the development server.
• Extensible GraphQL layer — All files related to the GraphQL layer are in the support folder and are described as work-in-progress but modifiable.

Who is this template for?

This template is aimed at developers who want a ready-made starting point for a Svelte project that uses Routify for routing and MDsveX for Markdown content. It is also useful for developers exploring how to integrate a GraphQL data layer into a static site. Because the repository's topics include blog, it can serve as the base for a Markdown-driven blog site.

What can you do with this template?

• Static site developers: Scaffold a Svelte site with Routify routing and understand how to wire up a GraphQL data layer for metadata.
• Blog authors: Write content in Markdown through MDsveX and have it rendered as Svelte components with queried site metadata.
• Developers learning GraphQL: Use the template to see how a constant named query in a Svelte file is resolved by the GraphQL layer before rendering.

How does this template work?

To begin, install dependencies with yarn install and start the dev server with yarn dev. To query data, define a constant with the name of query in any Svelte or MDsveX file — for example, a GraphQL query for SITE_METADATA that returns the site title — and the data is populated into the variable before further processing. The GraphQL layer itself, located in the support folder, can be modified as needed, though it is explicitly noted as a work-in-progress.

FAQ

What does the boilerplate include?

It includes Svelte, Routify v2, MDsveX, Svite, a GraphQL data layer, and an app.config.js file for site metadata. The combination means you get component-based UI, file-based routing, Markdown processing, and a queryable metadata source.

How do I run the dev server?

Run yarn install to install dependencies, then yarn dev to start the development server. No other configuration steps are described on the page.

How do I query site metadata?

Define a constant named query in a Svelte or MDsveX file, containing a GraphQL query such as one that requests the site title from the meta field. The template populates the constant with the query result before the component renders.

Is the GraphQL layer stable?

The repository states that the GraphQL Layer is a work-in-progress and will be updated as necessary. Files for it are in the support directory, so you can inspect and modify them.

Does this template require a specific package manager?

The getting-started instructions use Yarn exclusively, so Yarn is the package manager expected for installation and development.