Skip to main content
Components in TemplateDX look like JSX but behave differently at runtime: they are 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

  • Only default imports are supported. import { Thing } from './file.mdx' throws at bundle time — named imports are explicitly rejected per bundler.ts:185-196.
  • Imported files must be .mdx. The bundler recognizes .mdx specifically; other extensions aren’t inlined.
  • Use {props.*} for data, {props.children} for body content. Both are populated by the bundler from the parent’s JSX attributes and child nodes.
  • No React runtime. Hooks, event handlers, refs — none of these do anything 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...
The <Blog> tag is replaced with the contents of blog.mdx, with props.title resolved to "Turtles" and props.children resolved 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: conditional rendering (<If>), iteration (<ForEach>), raw passthrough (<Raw>), or custom extensions you implement as a TagPlugin.