Solid Integration Example#

Demonstrates embedding Solid components in Markdown.

Setup#

The example depends on workspace packages, so install from the repository root:

vp install

pnpm

pnpm install

bun

bun install

npm

npm install

yarn

yarn

Then start the example:

Tab 1Tab 2Tab 3Tab 4Tab 5

vp run integ-solid

pnpm run integ-solid

bun run integ-solid

npm run integ-solid

yarn integ-solid

Tab 1

vp run integ-solid

Tab 2

pnpm run integ-solid

Tab 3

bun run integ-solid

Tab 4

npm run integ-solid

Tab 5

yarn integ-solid

Configuration#

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

export default defineConfig({
  plugins: [
    oxContentSolid({
      srcDir: "docs",
      // Auto-discover all Solid components
      components: "./src/components/*.tsx",
    }),
    solid({ extensions: [".md", ".markdown", ".mdx"], compiler: "native" }),
  ],
});

Solid's JSX is compile-time only, so oxContentSolid() has to run first (it produces the JSX) and solid() has to be told about the Markdown extensions while using Solid 2's native compiler. See the package reference.

Components#

Counter#

import { createSignal } from "solid-js";

export default function Counter(props: { start?: number }) {
  const [count, setCount] = createSignal(props.start ?? 0);

  return (
    <div class="counter">
      <button onClick={() => setCount(count() - 1)}>-</button>
      <span>{count()}</span>
      <button onClick={() => setCount(count() + 1)}>+</button>
    </div>
  );
}

Alert#

import type { JSX } from "solid-js";

export default function Alert(props: {
  type?: "info" | "success" | "warning";
  title?: string;
  children?: JSX.Element;
}) {
  return (
    <div class={`alert alert-${props.type ?? "info"}`}>
      {props.title ? <strong class="alert-title">{props.title}</strong> : null}
      <div class="alert-body">{props.children}</div>
    </div>
  );
}

Usage in Markdown#

# My Documentation

<Counter start={10} />

<Alert type="warning">
  Be careful with this feature!
</Alert>

Solid Notes#

Signals — createSignal returns a getter/setter pair; read state by calling the getter (count()), not by reading a value.
Props stay reactive — do not destructure props. Destructuring reads every value once during setup and drops the reactivity.
No virtual DOM — components run once and updates are applied directly to the DOM nodes that depend on the changed signal.

File Structure#

integ-solid/
├── docs/
│   └── index.md
├── src/
│   ├── components/
│   │   ├── Counter.tsx
│   │   └── Alert.tsx
│   ├── App.tsx
│   ├── main.tsx
│   └── styles.css
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

Last updated: 2026-09-05