https://github.com/zakarialaoui10/van-mdx
Markdown for Vanjs
https://github.com/zakarialaoui10/van-mdx
javascript markdown mdx moro preprocessor remark unified vanjs vite
Last synced: 11 months ago
JSON representation
Markdown for Vanjs
- Host: GitHub
- URL: https://github.com/zakarialaoui10/van-mdx
- Owner: zakarialaoui10
- License: mit
- Created: 2025-07-18T23:06:16.000Z (12 months ago)
- Default Branch: main
- Last Pushed: 2025-07-27T20:42:12.000Z (11 months ago)
- Last Synced: 2025-07-27T22:22:55.951Z (11 months ago)
- Topics: javascript, markdown, mdx, moro, preprocessor, remark, unified, vanjs, vite
- Language: JavaScript
- Homepage:
- Size: 206 KB
- Stars: 9
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# van-mdx
A Markdown preprocessor for [Vanjs](https://vanjs.org/).
It combines the simplicity of Markdown syntax with the power and flexibility of ***Javascript***
## Demos :
- ***Hello World*** :
[](https://stackblitz.com/fork/github/zakarialaoui10/van-mdx/tree/main/examples/hello-world?file=src%2Fcontent%2FArticle.mdx)
## Install :
```bash
npm i van-mdx@latest
```
## Config :
```js
import {defineConfig} from "vite"
import VanMdx from "van-mdx/vite"
export default defineConfig({
plugins : [
VanMdx()
]
})
```
## Usage :
- ***Article.mdx :***
```jsx
---
title : "Van-Mdx Starter"
name : "world"
__props__ :
background : "tomato"
data : []
---
import data from "./data.js";
import InteractiveComponent from "./InteractiveComponent.js";
# Hello {name}
```
```js
// main.js
import van from "vanjs-core"
import InteractiveArticle,{title} from "./Article.mdx"
const {article} = van.tags;
const Article_1 = article(
InteractiveArticle({
background : "yellow"
})
)
van.add(
Article_1
)
```
## Features :
- ***Simple Integration :*** Write Markdown as usual, and inject Vanjs components wherever needed.
- ***Extensible :*** Create custom interactive components using `Vanjs` and use them in any Markdown file.
- ***Reusable :*** `Van-Mdx` exports a default functional component, allowing you to call it multiple times with different data, enabling dynamic and versatile use.
- ***Frontmatter Support :*** Use `YAML` syntax in to include metadata like titles, descriptions, or configurations in your Markdown files, and define props to pass data dynamically to Zikojs components.
- ***Markdown Support :*** Use standard Markdown syntax for writing content.
- ***HTML Support :*** Use standard HTML syntax for writing content.
- ***JSX Syntax :*** Declare component using Vanjs Hyperscript syntax, and render it using JSX
- ***Props :*** Pass data to components through props, enabling dynamic rendering and customization of content within your Markdown files.
- ***Attributes:***
- ***ESM : :*** Supports ECMAScript Modules (ESM), allowing you to import and export modules
- ***Expressions :*** Van-Mdx lets you use JS expressions inside curly braces, like Hello {name}. These expressions can be full JS programs, as long as they evaluate to something renderable. For example, you can use an IIFE like this:
```js
Hello {(()=>{
const names = ["world", "everyone"];
const {length} = names
return names[Math.floor(Math.random()*length)]
})()}
```
- ***Internal scripts :*** Include JS logic that runs alongside Van-Mdx components but isn't rendered in the output. They can initialize variables or perform side effects...
- ***Interleaving :*** You can use inline markdown elements inside HTML or Vanjs Components
```jsx
***Hello {name}***
```
# ⭐️ Show your support
If you appreciate the project, kindly demonstrate your support by giving it a star!
# Licence
This projet is licensed under the terms of MIT License