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

Introduction

This page provides comprehensive examples of how Org-Press renders various org-mode syntax elements. Each example shows both the org-mode source and its rendered output.

What You'll Learn

  • Headings and document structure
  • Text formatting (bold, italic, code, etc.)
  • Links and references
  • Lists (ordered, unordered, checkboxes)
  • Tables
  • Source code blocks with syntax highlighting
  • Drawers and special blocks
  • Export options and parameters
  • Quote blocks and examples
  • Rendering modes (dom, sourceOnly, etc.)

Text Formatting

Basic Formatting

  • Bold text using *asterisks*
  • Italic text using /slashes/
  • _Underlined text* using _underscores_
  • Strikethrough using +plus signs+
  • Inline code using equals signs
  • Verbatim text using tildes

Combined Formatting

You can combine formatting: bold italic, *bold code*, and underlined italic.

Special Characters

  • Em dash: ---
  • Ellipsis: ...
  • Copyright: (c)
  • Registered: (r)
  • Trademark: (tm)

Headings and Structure

Org-mode supports hierarchical headings from * (level 1) to ****** (level 6).

Level 2 Heading

Level 3 Heading

Level 4 Heading

Level 5 Heading
Level 6 Heading

Each heading automatically gets an anchor ID for deep linking.

Lists

Unordered Lists

Basic bullet list:

  • First item
  • Second item
    • Nested item
    • Another nested item
  • Third item

Ordered Lists

Numbered list:

  1. First step
  2. Second step
    1. Sub-step A
    2. Sub-step B
  3. Third step

Checklist Items

Task list:

  • Todo item
  • In progress item
  • Completed item
    • Nested completed
    • Nested todo

Description Lists

Term 1

Definition of term 1

Term 2

Definition of term 2 with multiple lines

Term 3

Definition of term 3

Links

Link to another page: Getting Started

Link to a heading on this page: Text Formatting section

Link to website: Org-Mode Official Site

Plain URL: https://example.com

Email: mailto:user@example.com

GitHub - Where the world builds software

Tables

Simple Table

NameAgeCity
Alice30San Francisco
Bob25New York
Charlie35London

Table with Alignment

LeftCenterRight
ABC
AAABBBCCC

Complex Table

FeatureSupportedPriority
Text formattingYesHigh
Code blocksYesHigh
TablesYesMedium
DiagramsYesLow

Source Code Blocks

Basic Code Block

Code Block with TypeScript

Multiple Languages

Python: 

def fibonacci(n):
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)

print(fibonacci(10))

Rust: 

fn main() {
    let numbers = vec![1, 2, 3, 4, 5];
    let sum: i32 = numbers.iter().sum();
    println!("Sum: {}", sum);
}

CSS:

Rendering Modes

:use sourceOnly (display only)

Shows only the code, doesn't execute: 

// This code is displayed but not executed
console.log("Only visible as code");

:use dom (default)

Executes code and shows the result:

:use dom | withSourceCode

Shows both code and result: 

"Both code and result are visible"
Source
"Both code and result are visible"

:use silent

Block executes but output is hidden (useful for setup code):

Server-Side Execution

:use server

By default, code executes in the browser. Use :use server to execute code on the server during build:

Built at 2026-01-25T22:16:49.713Z

Rendering Mode Examples

The Modes API in Org-Press allows customizing how code and results are displayed together using the :use parameter with pipe syntax.

Basic DOM Mode

Show both code and result using the pipe syntax: 

function add(a, b) {
  return a + b;
}

add(2, 3); // Returns 5
Source
function add(a, b) {
  return a + b;
}

add(2, 3); // Returns 5

Source Code Only

Use :use sourceOnly to show only the code without execution: 

const factorial = (n) => n <= 1 ? 1 : n * factorial(n - 1);
factorial(5); // Returns 120

Drawers

Drawers are collapsible sections that can store metadata or content.

Note: Drawers must be within a headline context (not at document root level).

Properties Drawer

Properties are typically used for metadata:

Example with Properties

This heading has properties in a drawer.

AI Conversation Drawer

Special :AI: drawer for recording AI conversations (renders with 🤖 emoji):

Conversation Log

Quote Blocks

This is a quote block. It is typically used for quotations from external sources.

> Nested quotes can be added within the block.

Example Blocks

This is an example block. Text here is displayed verbatim with monospace font. No special formatting is applied.

Named Blocks

Blocks can have names for referencing:

You can reference named blocks in other blocks or import them: 

import utils from "file.org?name=utility-functions";

console.log(utils.capitalize("hello")); // "Hello"

For a comprehensive guide on block imports with many examples, see the Block Imports Guide.

Advanced Features

Tangle Parameter

The :tangle parameter extracts code to external files: 

// This code will be written to src/generated.js during build
export function example() {
  return "tangled code";
}

Block Plugins

Org-Press supports custom block plugins for specialized rendering:

JSCad (3D Models)

Excalidraw (Diagrams)

Summary

This page demonstrates the comprehensive org-mode rendering capabilities of Org-Press:

  • ✅ Full org-mode syntax support
  • ✅ Multiple rendering modes (dom, sourceOnly, silent)
  • ✅ Server and browser runtime execution
  • ✅ Modes API for custom presentations
  • ✅ Drawers with special handling (AI conversations)
  • ✅ Block plugins for specialized content
  • ✅ Named blocks and code import system
  • ✅ Literate programming with :tangle

Next Steps