ymlsvex

A Svelte preprocessor for YAML-driven pages. Together with its cousin mdsvex, it lets you build content-first websites with Svelte. Simple posts through Markdown, complex layouts through YAML.

Write your pages in YAML, and ymlsvex will transform them into Svelte components — with metadata exports, layout support, and dynamic component rendering.

Install

npm install ymlsvex

Setup

svelte.config.js

import { ymlsvex } from 'ymlsvex';

const config = {
  extensions: ['.svelte', '.ymlsvex', '.yaml', '.yml'],
  preprocess: [
    ymlsvex({
      layout: '$lib/layouts/Page.svelte',
      componentsDir: '$lib/components'
    })
  ]
};

export default config;

TypeScript

Add ymlsvex/globals to your tsconfig.json for proper type support on .ymlsvex, .yaml, and .yml imports:

{
  "compilerOptions": {
    "types": ["ymlsvex/globals"]
  }
}

Usage

Basic page (src/routes/about/+page.ymlsvex)

title: About Us
description: Learn more about our team

components:
  - type: hero
    props:
      heading: Welcome
      subtitle: We build great things
  - type: feature-grid
    props:
      items:
        - title: Fast
          icon: zap
        - title: Reliable
          icon: shield

This generates a Svelte component with:

• export const metadata in <script context="module"> (available as a named import)
• Destructured variables (title, description, etc.) usable in the template
• Imported and rendered components from componentsDir

Metadata

All YAML data is exported as metadata, accessible from other files:

<script>
  import Page, { metadata } from './+page.ymlsvex';
</script>

<p>{metadata.title}</p>

Inline markdown

String values containing markdown syntax are automatically parsed:

components:
  - type: hero
    props:
      heading: "Welcome to **our site**"

Layouts

Layouts receive all metadata as props and render components via <slot />.

Single layout

ymlsvex({ layout: '$lib/layouts/Page.svelte' })

Named layouts

ymlsvex({
  layout: {
    blog: '$lib/layouts/Blog.svelte',
    docs: '$lib/layouts/Docs.svelte',
    _: '$lib/layouts/Default.svelte' // fallback
  }
})

Named layouts are resolved by:

1. YAML override — layout: blog in the YAML selects a named layout
2. Directory matching — a file in src/routes/blog/ matches the blog layout
3. Default fallback — the _ layout is used if nothing else matches

Disabling layout

layout: false
title: Raw page without layout

Layout component example

<!-- $lib/layouts/Page.svelte -->
<script>
  let { title, description, children } = $props();
</script>

<svelte:head>
  <title>{title}</title>
  <meta name="description" content={description} />
</svelte:head>

{@render children()}

Options

| Option | Type | Default | Description | |---|---|---|---| | layout | string \| Record<string, string> | undefined | Layout component(s) | | componentsDir | string | '$lib/components' | Where to import components from | | extensions | string[] | ['.ymlsvex', '.yaml', '.yml'] | File extensions to process |

License

MIT