:view-source
GitHub
⚠️Early Alpha — Org-press is experimental. Perfect for hackers and tinkerers, not ready for production. Documentation may be incomplete or inaccurate.

Getting Started

Get up and running with org-press in under 5 minutes.

Prerequisites

  • Node.js 18+ or Bun
  • npm, pnpm, or yarn

Quick Start

1. Create a New Project

mkdir my-docs
cd my-docs
npm init -y
npm install org-press

2. Create Configuration

Create .org-press/config.ts: 

import type { OrgPressUserConfig } from "org-press/config-types";

const config: OrgPressUserConfig = {
  contentDir: "content",
  outDir: "dist",
};

export default config;

3. Create Your First Page

Create content/index.org: 

#+TITLE: My Documentation
#+DESCRIPTION: Welcome to my site

* Welcome

This is my first org-press page!

** Interactive Button (Client-side)

#+begin_src javascript :use dom
// Simple DOM-based counter (no React needed)
let count = 0;
const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d', '#95e1d3'];

export function render() {
  const btn = document.createElement('button');
  btn.textContent = `Clicked ${count} times`;
  btn.style.cssText = `
    padding: 1rem 2rem;
    font-size: 1.2rem;
    background: ${colors[count % colors.length]};
    border: none;
    border-radius: 8px;
    cursor: pointer;
  `;
  btn.onclick = () => {
    count++;
    btn.textContent = `Clicked ${count} times`;
    btn.style.background = colors[count % colors.length];
  };
  return btn;
}
#+end_src

** Project Files (Server-side)

#+begin_src javascript :use server
import fs from 'node:fs';

const tree = (dir, indent = '') => {
  const items = fs.readdirSync(dir);
  return items.map(item => {
    const isDir = fs.statSync(`${dir}/${item}`).isDirectory();
    return `${indent}${isDir ? 'D' : 'F'} ${item}`;
  }).join('\n');
};
tree('.');
#+end_src

4. Start Development Server

npx orgp dev

Open http://localhost:5173 to see your site with hot reload.

5. Build for Production

npx orgp build

Your site is now in dist/ ready for deployment.

Project Structure

my-docs/ ├── .org-press/ │ └── config.ts # Configuration ├── content/ │ ├── index.org # Homepage │ └── guide/ # Additional pages │ └── intro.org ├── dist/ # Built output └── package.json

Add Scripts to package.json

For convenience, add these scripts: 

{
  "scripts": {
    "dev": "orgp dev",
    "build": "orgp build",
    "preview": "orgp preview"
  }
}

Then use npm run dev, npm run build, etc.

Adding React Support

Want to use React components with hooks? Install the React plugin:

1. Install Dependencies

npm install @org-press/react react react-dom

2. Update Configuration

Update .org-press/config.ts: 

import type { OrgPressUserConfig } from "org-press/config-types";
+import { reactPlugin } from "@org-press/react";

const config: OrgPressUserConfig = {
  contentDir: "content",
  outDir: "dist",
+  plugins: [reactPlugin],
};

export default config;

3. Use React Components

Now you can use :use react with hooks: 

#+begin_src tsx :use react
import React, { useState } from 'react';

export function render() {
  const [count, setCount] = useState(0);
  const colors = ['#ff6b6b', '#4ecdc4', '#ffe66d', '#95e1d3'];

  return (
    <button
      onClick={() => setCount(c => c + 1)}
      style={{
        padding: '1rem 2rem',
        fontSize: '1.2rem',
        background: colors[count % colors.length],
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
      }}
    >
      Clicked {count} times
    </button>
  );
}
#+end_src

The key difference: :use react properly renders components through React's reconciler, enabling hooks like useState, useEffect, etc.

Writing Content

Basic Syntax

#+TITLE: Page Title
#+DESCRIPTION: SEO description

* Heading 1

Paragraph text with *bold*, /italic/, =code=, and ~verbatim~.

** Heading 2

- Bullet list
- Another item

1. Numbered list
2. Second item

*** Heading 3

[[https://example.com][Link text]]

Code Blocks

#+begin_src javascript
console.log("Hello world");
#+end_src

#+begin_src typescript :use dom | withSourceCode
const x: number = 42;
x * 2;
#+end_src

#+begin_src css
.highlight { color: blue; }
#+end_src

Next Steps