{"id":27160211,"url":"https://github.com/stacksjs/bun-plugin-markdown","last_synced_at":"2026-05-08T01:45:18.091Z","repository":{"id":286878079,"uuid":"962851499","full_name":"stacksjs/bun-plugin-markdown","owner":"stacksjs","description":"A fast loader for Markdown files. Including FrontMatter support.","archived":false,"fork":false,"pushed_at":"2025-04-08T20:06:12.000Z","size":481,"stargazers_count":1,"open_issues_count":3,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-08T20:27:35.031Z","etag":null,"topics":["bun","frontmatter","loader","markdown","plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stacksjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["stacksjs","chrisbbreuer"],"open_collective":"stacksjs"}},"created_at":"2025-04-08T19:12:42.000Z","updated_at":"2025-04-08T20:06:02.000Z","dependencies_parsed_at":"2025-04-08T20:38:29.567Z","dependency_job_id":null,"html_url":"https://github.com/stacksjs/bun-plugin-markdown","commit_stats":null,"previous_names":["stacksjs/bun-frontmatter-markdown-loader"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fbun-plugin-markdown","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fbun-plugin-markdown/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fbun-plugin-markdown/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stacksjs%2Fbun-plugin-markdown/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stacksjs","download_url":"https://codeload.github.com/stacksjs/bun-plugin-markdown/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247947823,"owners_count":21023058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["bun","frontmatter","loader","markdown","plugin"],"created_at":"2025-04-08T23:40:28.925Z","updated_at":"2026-05-08T01:45:18.064Z","avatar_url":"https://github.com/stacksjs.png","language":"TypeScript","funding_links":["https://github.com/sponsors/stacksjs","https://github.com/sponsors/chrisbbreuer","https://opencollective.com/stacksjs"],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\u003cimg src=\".github/art/cover.jpg\" alt=\"Social Card of this repo\"\u003e\u003c/p\u003e\n\n[![npm version][npm-version-src]][npm-version-href]\n[![GitHub Actions][github-actions-src]][github-actions-href]\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\u003c!-- [![npm downloads][npm-downloads-src]][npm-downloads-href] --\u003e\n\u003c!-- [![Codecov][codecov-src]][codecov-href] --\u003e\n\n# Bun Frontmatter Markdown Loader\n\nA Bun loader and plugin for handling Markdown files with frontmatter.\n\n## Features\n\n- Parse frontmatter from markdown files\n- Convert markdown to HTML\n- Support for various output modes, including:\n  - HTML rendering\n  - Raw markdown body\n  - Metadata\n  - React component generation\n  - Vue component and render functions\n\n## Installation\n\n```bash\nbun add bun-plugin-markdown\n```\n\n## Usage\n\n### As a Bun Plugin\n\nThe simplest way to use this package is as a Bun plugin:\n\n```typescript\nimport { markdownPlugin } from 'bun-plugin-markdown'\n\n// Now you can import markdown files directly\nimport myContent from './content/page.md'\n\n// Register the plugin globally\nBun.plugin(markdownPlugin)\n\nconsole.log(myContent.html) // Rendered HTML\nconsole.log(myContent.attributes) // Frontmatter attributes\n```\n\n### Custom Plugin Configuration\n\nYou can customize the behavior of the plugin:\n\n```typescript\nimport { frontmatterMarkdownPlugin, Mode } from 'bun-plugin-markdown'\n\n// Register the plugin with custom options\nBun.plugin(frontmatterMarkdownPlugin({\n  mode: [Mode.HTML, Mode.BODY, Mode.META],\n  // Add other options as needed\n}))\n```\n\n### With Bun.build\n\n```typescript\nimport { frontmatterMarkdownPlugin, Mode } from 'bun-plugin-markdown'\n\nawait Bun.build({\n  entrypoints: ['./src/index.ts'],\n  outdir: './dist',\n  plugins: [\n    frontmatterMarkdownPlugin({\n      mode: [Mode.HTML, Mode.BODY]\n    })\n  ]\n})\n```\n\n### With React Support\n\nFor React support, install the required peer dependencies:\n\n```bash\nbun add @babel/core @babel/preset-react -D\n```\n\nThen use the plugin with React mode:\n\n```typescript\nimport { frontmatterMarkdownPlugin, Mode } from 'bun-plugin-markdown'\n\nBun.plugin(frontmatterMarkdownPlugin({\n  mode: [Mode.HTML, Mode.REACT],\n  react: {\n    root: 'markdown-content'  // Optional custom root class\n  }\n}))\n\n// In your component\nimport myContent from './content/page.md'\n\nfunction MyComponent() {\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003e{myContent.attributes.title}\u003c/h1\u003e\n      {/* Render the React component */}\n      {myContent.react()}\n    \u003c/div\u003e\n  )\n}\n```\n\n### With Vue Support\n\nFor Vue support, install the required peer dependencies:\n\n```bash\nbun add vue-template-compiler @vue/component-compiler-utils -D\n```\n\nThen use the plugin with Vue mode:\n\n```typescript\nimport { frontmatterMarkdownPlugin, Mode } from 'bun-plugin-markdown'\n\n// In your component\nimport myContent from './content/page.md'\n\nBun.plugin(frontmatterMarkdownPlugin({\n  mode: [Mode.HTML, Mode.VUE_COMPONENT],\n  vue: {\n    root: 'markdown-content' // Optional custom root class\n  }\n}))\n\nexport default {\n  components: {\n    MarkdownContent: myContent.vue.component\n  },\n  template: `\n    \u003cdiv\u003e\n      \u003ch1\u003e{{ title }}\u003c/h1\u003e\n      \u003cmarkdown-content /\u003e\n    \u003c/div\u003e\n  `,\n  data() {\n    return {\n      title: myContent.attributes.title\n    }\n  }\n}\n```\n\n### With Bun Fullstack Server\n\nBun's fullstack dev server can use the markdown plugin when configured in your `bunfig.toml`:\n\n```toml\n[serve.static]\nplugins = [ \"bun-plugin-markdown/plugin\" ]\n```\n\nThen you can import markdown files directly in your HTML:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n\u003chead\u003e\n  \u003ctitle\u003eMarkdown Viewer\u003c/title\u003e\n  \u003cstyle\u003e\n    /* Your styles here */\n  \u003c/style\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003cscript type=\"module\"\u003e\n    // Import markdown file directly\n    import content from './content.md';\n\n    // Use the processed content\n    document.getElementById('app').innerHTML = content.html;\n    console.log(content.attributes); // Access frontmatter\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nAnd use it in your server:\n\n```typescript\nimport { serve } from 'bun'\n\n// Create your HTML template\nconst template = `/* HTML with markdown import */`\n\nserve({\n  port: 3000,\n  development: true,\n\n  routes: {\n    '/': new Response(template, {\n      headers: { 'Content-Type': 'text/html' }\n    })\n  }\n})\n```\n\nTo see a complete example, run:\n\n```bash\nbun run fullstack\n```\n\n## Available Modes\n\nThe loader supports different output modes:\n\n- `Mode.HTML`: Generates HTML from the markdown\n- `Mode.BODY`: Includes the raw markdown body\n- `Mode.META`: Includes metadata about the source file\n- `Mode.REACT`: Generates a React component\n- `Mode.VUE_COMPONENT`: Generates a Vue component\n- `Mode.VUE_RENDER_FUNCTIONS`: Generates Vue render functions\n\n## License\n\nMIT\n\n## Testing\n\n```bash\nbun test\n```\n\n## Changelog\n\nPlease see our [releases](https://github.com/stackjs/bun-ts-starter/releases) page for more information on what has changed recently.\n\n## Contributing\n\nPlease see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.\n\n## Community\n\nFor help, discussion about best practices, or any other conversation that would benefit from being searchable:\n\n[Discussions on GitHub](https://github.com/stacksjs/ts-starter/discussions)\n\nFor casual chit-chat with others using this package:\n\n[Join the Stacks Discord Server](https://discord.gg/stacksjs)\n\n## Postcardware\n\n\"Software that is free, but hopes for a postcard.\" We love receiving postcards from around the world showing where Stacks is being used! We showcase them on our website too.\n\nOur address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎\n\n## Sponsors\n\nWe would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.\n\n- [JetBrains](https://www.jetbrains.com/)\n- [The Solana Foundation](https://solana.com/)\n\n\u003c!-- Badges --\u003e\n[npm-version-src]: https://img.shields.io/npm/v/bun-ts-starter?style=flat-square\n[npm-version-href]: https://npmjs.com/package/bun-ts-starter\n[github-actions-src]: https://img.shields.io/github/actions/workflow/status/stacksjs/ts-starter/ci.yml?style=flat-square\u0026branch=main\n[github-actions-href]: https://github.com/stacksjs/ts-starter/actions?query=workflow%3Aci\n\n\u003c!-- [codecov-src]: https://img.shields.io/codecov/c/gh/stacksjs/ts-starter/main?style=flat-square\n[codecov-href]: https://codecov.io/gh/stacksjs/ts-starter --\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fbun-plugin-markdown","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstacksjs%2Fbun-plugin-markdown","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstacksjs%2Fbun-plugin-markdown/lists"}