ODX

ODX lets you author Olova directly inside regular .md files.

What it does

• top-level --- frontmatter --- is available as frontmatter
• top-level <script> or <script setup> becomes the Olova script block
• top-level <style> blocks are forwarded to Olova
• normal Markdown becomes rendered HTML
• direct HTML or Olova component tags inside the Markdown body stay intact
• fenced olova code blocks still work for isolated live examples
• the final .md file is compiled through the existing olova compiler

Example

---
hello: world
---

<script setup>
import DemoCounter from "./DemoCounter.olova"
import { state } from "olova/core"

const count = state(0)
</script>

<style scoped>
button {
  color: red;
}
</style>

# Counter docs

This is normal Markdown.

The count is: {count}

<DemoCounter />
<button onclick={() => count++}>Count: {count}</button>

Vite usage

import { defineConfig } from "vite";
import { olovaPlugin } from "olova/vite";
import { odxPlugin } from "odx";

export default defineConfig({
  plugins: [odxPlugin(), olovaPlugin()],
});

Then import a Markdown file like a component:

import DocsPage from "./docs/getting-started.md";