Examples

Ox Content provides several examples demonstrating different use cases.

Integration Examples

Vue Integration

Embed Vue 3 components in Markdown using vite-plugin-ox-content-vue.

import { oxContentVue } from 'vite-plugin-ox-content-vue';

export default defineConfig({
  plugins: [
    vue(),
    oxContentVue({
      components: './src/components/*.vue',
    }),
  ],
});

React Integration

Embed React components in Markdown using vite-plugin-ox-content-react.

import { oxContentReact } from 'vite-plugin-ox-content-react';

export default defineConfig({
  plugins: [
    react(),
    oxContentReact({
      components: './src/components/*.tsx',
    }),
  ],
});

Svelte Integration

Embed Svelte 5 components in Markdown using vite-plugin-ox-content-svelte.

import { oxContentSvelte } from 'vite-plugin-ox-content-svelte';

export default defineConfig({
  plugins: [
    svelte(),
    oxContentSvelte({
      components: './src/components/*.svelte',
    }),
  ],
});

Plugin Examples

markdown-it Plugin

Use Ox Content as a markdown-it plugin for existing markdown-it projects.

rehype Plugin

Use Ox Content as a rehype plugin in the unified ecosystem.

Generator Examples

Source Docs Generation

Generate API documentation from JSDoc/TSDoc comments automatically.

oxContent({
  docs: {
    src: ['./src'],
    out: 'docs/api',
    include: ['**/*.ts'],
  },
})

Other Examples

Playground

Interactive web playground for testing Markdown parsing.

Vite SSG

Static Site Generation example using Vite.

Running Examples

# Clone the repository
git clone https://github.com/ubugeeei/ox-content.git
cd ox-content

# Install dependencies
pnpm install

# Run an example
cd examples/integ-vue
pnpm dev