MDX 多框架组件演示

MDX 让你在 Markdown 里直接嵌入任意前端组件——不需要额外的 iframe，不需要单独页面，直接写在文章里。

React 计数器

下面这个交互组件是用 React 写的，直接 import 进来就能用：

点击次数: 0

Tsx
import Counter from './Counter.tsx';
 
<Counter label="点击次数" client:load />;

client:load 指令告诉 Astro 在页面加载时立即激活这个 React 组件。

Vue 开关

这个用 Vue 3 SFC（单文件组件）写的，语法和普通 .vue 文件完全一致：

深色模式: 关

Vue
<script setup lang="ts">
import { ref } from 'vue';
const on = ref(false);
</script>
 
<template>
  <button @click="on = !on">{{ on ? '开' : '关' }}</button>
</template>

Svelte 选色器

Svelte 组件同样直接可用，编译后零运行时开销：

主题色 #2563eb #2563eb

Svelte
<script lang="ts">
  export let label = '选色器';
  let color = '#2563eb';
</script>
 
<input type="color" bind:value={color} />
<span>{color}</span>

支持的组件格式

 Table

格式	适用场景	构建时	编辑器预览
`.tsx` / `.jsx`	交互 UI、数据可视化	✅	✅
`.vue`	Vue 生态组件	✅	🚧
`.svelte`	轻量交互	✅	🚧
`.astro`	静态布局组件	✅	—
`.svg`	内联矢量图	✅	✅
`.html`	原生 HTML 片段	✅	✅

编辑器预览：React 组件可以在在线编辑器实时预览；Vue/Svelte 需要构建步骤，目前仅支持发布后查看。

使用方式

在你的 .mdx 文件顶部 import 组件，然后像 HTML 标签一样直接使用：

Mdx
---
title: 我的文章
---
 
import MyChart from './MyChart.tsx';
 
正文内容……
 
<MyChart data={[1, 2, 3]} client:load />
 
更多正文……

client:* 指令控制水合时机：

client:load — 页面加载时立即激活
client:visible — 滚动到视口时激活（适合重型组件）
client:idle — 浏览器空闲时激活
省略 — 静态渲染，无 JS（适合纯展示组件）