Astro

Use @orgajs/astro to write Astro pages in Org Mode (.org) and compile them with orgx.

Quick Start

  1. Install the integration:
pnpm add @orgajs/astro
  1. Register it in astro.config.mjs:
import { defineConfig } from 'astro/config'
import orgMode from '@orgajs/astro'
 
export default defineConfig({
  integrations: [orgMode()]
})
  1. Create a page at src/pages/index.org:
* Hello from Org Mode
 
This page is rendered from Org Mode in Astro.
  1. Start Astro:
pnpm astro dev

Major Features

Native .org pages in Astro

Any file in src/pages/*.org is treated as a page route, just like Astro files in other supported formats.

Org metadata support

Org keywords such as #+title:, #+description:, and #+slug: are parsed and exposed as entry metadata for Astro content handling.

orgx-powered compilation

Under the hood, this integration uses orgx (via @orgajs/rollup), so you get:

  • Org Mode parsing to JSX-compatible output
  • JavaScript imports/exports inside Org documents
  • Unified/rehype/recma pipeline compatibility

Inline JSX components

You can embed JSX directly in Org files, including imported components. 

#+jsx: import Card from '../components/Card.astro'
 
Here is a Card rendered inline:
 
#+jsx: <Card title="Inline component">Hello from Org + JSX</Card>
 
#+begin_export jsx
<section className="hero">
  <h2>JSX export block</h2>
  <p>You can also write larger JSX blocks.</p>
</section>
#+end_export

Use #+jsx: for single-line JSX/imports and #+begin_export jsx for multi-line blocks.