Jsx Md

@theseus.run/jsx-md

JSX runtime that outputs Markdown strings. No React, no virtual DOM. render() is synchronous and returns a plain string. Same input → same string every time.

Setup

tsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxImportSource": "@theseus.run/jsx-md"
  }
}

Import:

import { render, H1, H2, P, Ul, Li, Bold, Code } from "@theseus.run/jsx-md"

Authoring rules

1. Prefer components over inline markdown syntax.

// WRONG
**bold** and `code`

// CORRECT
bold and code

2. Bare JSX text for plain prose. {'...'} only when the string contains a character JSX cannot represent as bare text.

Characters requiring {'...'}: ` ` { } '`

Characters safe as bare text: letters, spaces, digits, . , : ; ! ? — – - ( ) [ ] " & * + = | / \

// WRONG — unnecessary wrapper
P1{': Guard clauses over nesting.'}

// CORRECT — bare text
P1: Guard clauses over nesting.

// CORRECT — must wrap, contains single quote
P1{": Dead code: delete, don't comment out."}

// CORRECT — must wrap, contains backtick
{'Format: `ROI≈X.X`'}

3. Md is an escape hatch only. Legitimate use: 4+ mixed inline spans where decomposition adds noise. Never use Md for content that decomposes cleanly into components.

// Legitimate — 6 code spans mixed with bold
{'**P0**: Type = `TKey`. Not `TFuncKey`, `string`, or ``.'}

// Not legitimate — decompose instead
{'**P1**: Guard clauses over nesting.'}
// → P1: Guard clauses over nesting.

Primitives

Full table with output shapes: [references/primitives.md](references/primitives.md).

| Category | Components | |---|---| | Block | H1–H6, P, Hr, Codeblock, Blockquote | | List | Ul, Ol, Li, TaskList, Task | | Table | Table, Tr, Th, Td | | Inline | Bold, Code, Italic, Strikethrough, Br, Sup, Sub, Kbd, Link, Img | | Escape | Escape (component), escapeMarkdown (function) | | Raw | Md | | Other | HtmlComment, Details, Callout |

Key props:

• Codeblock — lang?: string, indent?: number
• Task — done?: boolean (- [x] when true, - [ ] when false/omitted)
• Th — align?: 'left' | 'center' | 'right'
• Callout — type: 'note' | 'tip' | 'important' | 'warning' | 'caution' (required)
• Details — summary: string (required)
• Link — href: string (required)
• Img — src: string, alt?: string

Nesting: Ul/Ol inside Li is fully supported. DepthContext tracks depth and computes indentation automatically — never count spaces manually.

Context API

Same shape as React — createContext, useContext, Context.Provider. Synchronous only. Not safe for concurrent render() calls in the same process.

import { render, createContext, useContext, Ul, Li, Code } from "@theseus.run/jsx-md"

const HarnessCtx = createContext('copilot')

const StepsSection = () => {
  const harness = useContext(HarnessCtx)
  return (
    
      Always verify output before claiming done.
      {harness === 'opencode' && Use task() for multi-step subtasks.}
    
  )
}

const prompt = render(
  
    
  
)

useContext returns the default when called outside a Provider. Providers nest — innermost wins.

XML intrinsics

Any lowercase JSX tag renders as an XML block. No imports, no registration. Use for Anthropic-style prompt structure (`, , `).

const ReviewerPrompt = ({ repo, examples }: Props) => (
  <>
    
      Repository: {repo}. Language: TypeScript.
    
    
      Role
      You are a precise code reviewer.
    
    {examples.length > 0 && (
      
        {examples.map((ex, i) => (
          
            {ex}
          
        ))}
      
    )}
  
)

Attribute serialization:

• index={1} → index="1"
• active={true} → active (bare attribute)
• active={false} / active={null} / active={undefined} → omitted
• Empty content → self-closing: ``
• Object value → throws — use JSON.stringify() to convert first

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: theseus-run
• Source: theseus-run/theseus
• License: MIT
• Homepage: https://www.theseus.run

Install and usage instructions live in the source repository linked above.