Skip to main content
Components in TemplateDX look like JSX but behave differently at runtime: they’re inlined at bundle time, not invoked as a render function. When you import Blog from './blog.mdx' and use <Blog>, TemplateDX’s bundler substitutes the imported file’s AST directly into the parent at parse time. There is no React render cycle, no hooks, no event handlers, just template composition.

​
Constraints

  • TemplateDX accepts only default imports. import { Thing } from './file.mdx' throws at bundle time; the bundler explicitly rejects named imports per bundler.ts:209.
  • The bundler parses imports as MDX regardless of extension. It inlines any file the content loader can read; use .mdx or .md by convention.
  • Use {props.*} for data, {props.children} for body content. The bundler populates both from the parent’s JSX attributes and child nodes.
  • No React runtime. Hooks, event handlers, and refs do nothing inside a TemplateDX component. If you find yourself reaching for them, you probably want a custom tag plugin instead.

​
Example

Given blog.mdx:
blog.mdx
# {props.title}

{props.children}
And the parent template:
index.mdx
import Blog from './blog.mdx';

# Example

<Blog title="Turtles">
  Turtles are really cool...
</Blog>
TemplateDX renders: 
# Example

# Turtles

Turtles are really cool...
TemplateDX replaces the <Blog> tag with the contents of blog.mdx, resolving props.title to "Turtles" and props.children to the child body.

​
When to use a component vs. a tag

  • Components: for static template fragments you want to compose. Think partials: a shared <SystemPrompt> header, a reusable <FewShotExamples> block.
  • Tags: for logic that needs runtime behavior such as conditional rendering (<If>), iteration (<ForEach>), raw passthrough (<Raw>), or custom extensions you implement as a TagPlugin.