Examples#

Copy as MarkdownView Markdown

Ox Content provides runnable examples and small source snippets demonstrating different use cases.

Small built-in feature snippets live in the repository under examples/builtin-features/.

Integration Examples#

Vue Integration#

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

import { oxContentVue } from "@ox-content/vite-plugin-vue";

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

React Integration#

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

import { oxContentReact } from "@ox-content/vite-plugin-react";

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

Svelte Integration#

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

import { oxContentSvelte } from "@ox-content/vite-plugin-svelte";

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

Solid Integration#

Embed Solid components in Markdown using @ox-content/vite-plugin-solid.

import { defineConfig } from "vite";
import solid from "@solidjs/vite-plugin";
import { oxContentSolid } from "@ox-content/vite-plugin-solid";

export default defineConfig({
  plugins: [
    oxContentSolid({
      components: "./src/components/*.tsx",
    }),
    // Solid's JSX is compile-time only, so this plugin runs after
    // oxContentSolid() and needs the Markdown extensions.
    solid({ extensions: [".md", ".markdown", ".mdx"], compiler: "native" }),
  ],
});

Plugin Examples#

Code Annotations#

Opt-in code block annotations with both custom attributes and VitePress-compatible notation.

oxContent({
  highlight: true,
  codeAnnotations: {
    notation: "both",
  },
});

Package Manager Tabs#

Opt in to package-manager tabs, then author one npm command and render it as vp/pnpm/bun/npm/yarn install tabs.

<pm>npm install -D vite</pm>

unplugin mdast Bridge#

Run custom mdast plugins and existing remark/unified plugins on top of Ox Content's native parser, with documented compatibility boundaries and bridge performance notes.

unplugin markdown-it Token Bridge#

Run markdown-it plugins first and then read the resulting token stream from downstream unified plugins.

Generator Examples#

Source Docs Generation#

Generate API documentation from JSDoc/TSDoc comments automatically.

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

OG Image Examples#

OG Viewer#

Dev tool for previewing Open Graph metadata of all pages. Accessible at /__og-viewer during development.

Custom OG Image Templates#

Generate per-page Open Graph images with a custom template. Pass arbitrary frontmatter data as props.

oxContent({
  ogImage: true,
  ogImageOptions: {
    template: "./og-template.ts",
  },
});

Other Examples#

Code Play#

On-demand sample execution through @ox-content/code-play, with stdio, stderr, config, provenance, and timing viewers. Live fences on the docs page; a standalone Vite app is examples/code-play.

Playground#

Interactive web playground for testing Markdown parsing.

Vite SSG#

Static Site Generation example using Vite.

Built-in MDX#

Default-on MDX for .mdx files: static HTML, island placeholders, ESM that is not executed, and {expression} that is not evaluated. A sibling .md file stays GFM. Runnable app: examples/mdx.

Running Examples#

Clone the repository and install dependencies:

git clone https://github.com/ubugeeei-prod/ox-content.git
cd ox-content

vp install

pnpm install

bun install

npm install

yarn

Run examples from the repository root:

vp run integ-vue
vp run ssg-vite
vp run mdx
vp run plugin-markdown-it
vp run --filter ./examples/code-play dev

pnpm run integ-vue
pnpm run ssg-vite
pnpm run mdx
pnpm run plugin-markdown-it
pnpm --filter ./examples/code-play dev

bun run integ-vue
bun run ssg-vite
bun run mdx
bun run plugin-markdown-it
bun --filter ./examples/code-play dev

npm run integ-vue
npm run ssg-vite
npm run mdx
npm run plugin-markdown-it
npm --workspace ./examples/code-play run dev

yarn integ-vue
yarn ssg-vite
yarn mdx
yarn plugin-markdown-it
yarn workspace ox-content-code-play-example dev