# xyaml-webpack-loader

> xyaml-webpack-loader loads YAML files with custom schema. Out of the box it supports: - [markdown](https://en.wikipedia.org/wiki/Markdown)

Latest version **0.7.2** (published 2026-08-08) · 0 weekly downloads

## Install

```sh
npm install xyaml-webpack-loader
pnpm add xyaml-webpack-loader
yarn add xyaml-webpack-loader
bun add xyaml-webpack-loader
```

## Health

**Score 50/100 (C)** — status: active.

Positive: no vulnerabilities; has provenance; recently updated.

Warnings: low downloads; no types; no esm support; low quality score; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.7.2 |
| Published | 2026-08-08 |
| First published | 2019-11-16 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Node | ^22.0.0 \|\| ^24.0.0 |
| Dependencies | 5 |
| Unpacked size | 8.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Provenance | attested (GitHub Actions) |
| GitHub stars | 3 |
| Maintainers | stalniy |

## Links

- npm: https://www.npmjs.com/package/xyaml-webpack-loader
- Repository: https://github.com/stalniy/xyaml-webpack-loader
- Homepage: https://github.com/stalniy/xyaml-webpack-loader#readme
- Issues: https://github.com/stalniy/xyaml-webpack-loader/issues
- npm.io page: https://npm.io/package/xyaml-webpack-loader

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ^4.17.15
- [js-yaml](https://npm.io/package/js-yaml.md) ^3.13.1
- [markdown-it](https://npm.io/package/markdown-it.md) ^14.3.0
- [markdown-it-attrs](https://npm.io/package/markdown-it-attrs.md) ^4.5.0
- [markdown-it-headinganchor](https://npm.io/package/markdown-it-headinganchor.md) ^1.3.0

## Recent versions

- 0.7.2 (latest) — 2026-08-08
- 0.7.1 — 2020-10-14
- 0.7.0 — 2020-10-14
- 0.6.0 — 2020-04-06
- 0.5.1 — 2020-03-12
- 0.5.0 — 2020-03-12
- 0.4.1 — 2020-03-11
- 0.4.0 — 2020-03-10
- 0.3.0 — 2020-01-19
- 0.2.0 — 2019-12-28
- 0.1.3 — 2019-11-16
- 0.1.1 — 2019-11-16
- 0.1.0 — 2019-11-16

## README

# Extended YAML loader

xyaml-webpack-loader loads YAML files with custom schema. Out of the box it supports:
- [markdown](https://en.wikipedia.org/wiki/Markdown)

It also supports [rollupjs](https://rollupjs.org/guide/en/).

## Install

```sh
npm i -D xyaml-webpack-loader
# or
yarn add -D xyaml-webpack-loader
```

## Configure Webpack

```js
// webpack.config.js
module.exports = {
  // ...
  module: {
    rules: [{
      type: 'json',
      test: /\.yaml$/,
      use: 'xyaml-webpack-loader',
      options: { // default configuration
        markdown: {
          use: {
            'markdown-it-headinganchor': {} // you can specify `false` to disable plugin
            'markdown-it-attrs': { leftDelimiter: '@{' }
          }
        }
      }
    }]
  }
}
```

You can configure `markdown-it` parser to use any modules, by specifying them in `use` option.

## Configure rollup

```js
// rollup.config.js
import yaml from 'xyaml-webpack-loader/rollup';

export {
  // ...
  plugins: [
    yaml({
      markdown: { // default configuration, no need to provide
        use: {
          'markdown-it-headinganchor': {} // you can specify `false` to disable plugin
          'markdown-it-attrs': { leftDelimiter: '@{' }
        }
      }
    })
  ]
}
```

## Example YAML

```yaml
# about-us.page.yml
title: About us
meta:
  title: About
  keywords: About
  description: About description
content: !md | # Pay attention to the !md prefix
  My first paragraph

  * some bullet points
  * another bullet point

  [link to some site](https://some.site.com)

  ### Additional information

  * Other bullet points
  * Final words
```

## Example Usage

```js
import aboutUs from './about-us.page.yml';

console.log(aboutUs.content) // rendered HTML string
```

## Use parser

You can also use parser programatically:

```js
const { parse } = require('xyaml-webpack-loader/parser');
const fs = require('fs');

const content = parse(fs.readFileSync('about-us.page.yml'));
```

## Advanced Markdown configuration

Some `markdown-it` plugins accept more than single options argument (e.g., [markdown-it-container](https://github.com/markdown-it/markdown-it-container)). In such cases, we can specify an array of options:

```js
const options = {
  markdown: { // default configuration, no need to provide
    use: {
      'markdown-it-container': ['image', {
        // other options here
      }]
    }
  }
};
```

Or if we need to call the same plugin multiple times, we can use a function:

```js
const options = {
  markdown: { // default configuration, no need to provide
    use(parser, applyPlugins) {
      applyPlugins(parser); // apply default plugins
      parser.use('markdown-it-container', 'image', {
        // other options here
      });
      parser.use('markdown-it-container', 'spoiler', {
        // other options here
      });
    }
  }
};
```

---
_Source: https://npm.io/package/xyaml-webpack-loader · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._