This rune is part of @refrakt-md/docs. Install with npm install @refrakt-md/docs and add "@refrakt-md/docs" to the plugins array in your refrakt.config.json.

Symbol

Code construct documentation. Headings become the construct name, code fences become type signatures, lists become parameter definitions, and blockquotes become typed annotations (returns, throws, deprecation).

The kind attribute controls how Markdown primitives are reinterpreted -- functions get parameter lists, classes get member groups, enums get member definitions.

Function documentation

A function with signature, parameters, return value, and exception documentation.

{% symbol kind="function" lang="typescript" since="1.0.0" %}

## renderContent

Transforms a Markdoc document into a renderable tree using the specified rune definitions.

```typescript
renderContent(source: string, options?: RenderOptions): RenderTree
```

- **source** `string` -- Raw Markdoc content to parse and transform
- **options** `RenderOptions` *(optional)* -- Configuration for the render pass
  - **runes** `RuneMap` -- Custom rune definitions to merge with defaults
  - **variables** `Record<string, any>` -- Template variables available in content

> Returns `RenderTree` -- A framework-agnostic tree for rendering.

> Throws `ParseError` if the source contains invalid Markdoc syntax.

{% /symbol %}

<article data-field="content-section" data-rune="symbol" typeof="TechArticle" data-rune-fields="{&quot;kind&quot;:&quot;function&quot;,&quot;lang&quot;:&quot;typescript&quot;,&quot;since&quot;:&quot;1.0.0&quot;,&quot;deprecated&quot;:&quot;&quot;,&quot;source&quot;:&quot;&quot;}">
  <h2 id="rendercontent" data-name="headline">renderContent</h2>
  <p data-name="blurb">Transforms a Markdoc document into a renderable tree using the specified rune definitions.</p>
  <div data-name="body">
    <div class="rf-codeblock">
      <pre data-language="typescript">
        <code data-language="typescript">renderContent(source: string, options?: RenderOptions): RenderTree
</code>
      </pre>
    </div>
    <ul>
      <li>
        <strong marker="**">source</strong>
        <code>string</code>
        -- Raw Markdoc content to parse and transform
      </li>
      <li>
        <strong marker="**">options</strong>
        <code>RenderOptions</code>
        <em marker="*">(optional)</em>
        -- Configuration for the render pass
        <ul>
          <li>
            <strong marker="**">runes</strong>
            <code>RuneMap</code>
            -- Custom rune definitions to merge with defaults
          </li>
          <li>
            <strong marker="**">variables</strong>
            <code>Record&lt;string, any&gt;</code>
            -- Template variables available in content
          </li>
        </ul>
      </li>
    </ul>
    <blockquote>
      <p>
        Returns
        <code>RenderTree</code>
        -- A framework-agnostic tree for rendering.
      </p>
    </blockquote>
    <blockquote>
      <p>
        Throws
        <code>ParseError</code>
        if the source contains invalid Markdoc syntax.
      </p>
    </blockquote>
  </div>
</article>

functiontypescript

renderContent

Transforms a Markdoc document into a renderable tree using the specified rune definitions.

Since: 1.0.0

renderContent(source: string, options?: RenderOptions): RenderTree

source string -- Raw Markdoc content to parse and transform
options RenderOptions (optional) -- Configuration for the render pass
- runes RuneMap -- Custom rune definitions to merge with defaults
- variables Record<string, any> -- Template variables available in content

Returns RenderTree -- A framework-agnostic tree for rendering.

Throws ParseError if the source contains invalid Markdoc syntax.

<article data-field="content-section" typeof="TechArticle" class="rf-symbol rf-symbol--function rf-symbol--typescript rf-symbol--1.0.0" data-kind="function" data-lang="typescript" data-since="1.0.0" data-deprecated="" data-source="" data-elevation="flat" data-rune="symbol" data-density="full">
  <div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-symbol__eyebrow">
    <span class="rf-badge" data-meta-type="category">function</span>
    <span class="rf-badge" data-meta-type="category">typescript</span>
  </div>
  <header data-name="preamble" class="rf-symbol__preamble" data-section="preamble">
    <h2 id="rendercontent" data-name="headline" class="rf-symbol__headline" data-section="title">renderContent</h2>
    <p data-name="blurb" class="rf-symbol__blurb">Transforms a Markdoc document into a renderable tree using the specified rune definitions.</p>
  </header>
  <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-symbol__metadata">
    <div data-name="row" data-field="since" class="rf-symbol__row">
      <dt data-meta-label="">Since</dt>
      <dd data-meta-type="temporal">1.0.0</dd>
    </div>
  </dl>
  <div data-name="body" class="rf-symbol__body" data-section="body">
    <div class="rf-codeblock">
      <pre data-language="typescript"><code data-language="typescript">renderContent(source: string, options?: RenderOptions): RenderTree
</code></pre>
    </div>
    <ul>
      <li>
        <strong marker="**">source</strong>
         
        <code>string</code>
         -- Raw Markdoc content to parse and transform
      </li>
      <li>
        <strong marker="**">options</strong>
         
        <code>RenderOptions</code>
         
        <em marker="*">(optional)</em>
         -- Configuration for the render pass
        <ul>
          <li>
            <strong marker="**">runes</strong>
             
            <code>RuneMap</code>
             -- Custom rune definitions to merge with defaults
          </li>
          <li>
            <strong marker="**">variables</strong>
             
            <code>Record&lt;string, any&gt;</code>
             -- Template variables available in content
          </li>
        </ul>
      </li>
    </ul>
    <blockquote>
      <p>
        Returns 
        <code>RenderTree</code>
         -- A framework-agnostic tree for rendering.
      </p>
    </blockquote>
    <blockquote>
      <p>
        Throws 
        <code>ParseError</code>
         if the source contains invalid Markdoc syntax.
      </p>
    </blockquote>
  </div>
</article>

Class documentation

Classes, interfaces, and modules use ### headings for member groups (Constructor, Properties, Methods) and #### headings for individual members.

{% symbol kind="class" lang="typescript" since="1.0.0" %}

## ContentParser

The core parsing engine that transforms raw Markdoc source into an abstract syntax tree.

```typescript
class ContentParser extends EventEmitter
```

### Constructor

```typescript
new ContentParser(config: ParserConfig)
```

- **config** `ParserConfig` -- Parser configuration
  - **strictMode** `boolean` -- Reject unknown runes. *Default: `false`*
  - **maxDepth** `number` -- Maximum nesting depth. *Default: `10`*

### Methods

#### parse

Parse a Markdoc source string into a raw AST.

```typescript
parse(source: string): ASTNode
```

- **source** `string` -- Raw Markdoc content

> Returns `ASTNode` -- The root node of the parsed abstract syntax tree.

#### transform

Transform a parsed AST into a renderable tree.

```typescript
transform(ast: ASTNode, variables?: Record<string, any>): RenderTree
```

- **ast** `ASTNode` -- A parsed AST from the `parse` method
- **variables** `Record<string, any>` *(optional)* -- Template variables

> Returns `RenderTree` -- A framework-agnostic renderable tree.

> Throws `TransformError` if a rune's reinterpretation rules fail.

{% /symbol %}

<article data-field="content-section" data-rune="symbol" typeof="TechArticle" data-rune-fields="{&quot;kind&quot;:&quot;class&quot;,&quot;lang&quot;:&quot;typescript&quot;,&quot;since&quot;:&quot;1.0.0&quot;,&quot;deprecated&quot;:&quot;&quot;,&quot;source&quot;:&quot;&quot;}">
  <h2 id="contentparser" data-name="headline">ContentParser</h2>
  <p data-name="blurb">The core parsing engine that transforms raw Markdoc source into an abstract syntax tree.</p>
  <div data-name="body">
    <div class="rf-codeblock">
      <pre data-language="typescript">
        <code data-language="typescript">class ContentParser extends EventEmitter
</code>
      </pre>
    </div>
    <section data-rune="symbol-group">
      <h3 data-name="label">Constructor</h3>
      <div data-name="body">
        <div class="rf-codeblock">
          <pre data-language="typescript">
            <code data-language="typescript">new ContentParser(config: ParserConfig)
</code>
          </pre>
        </div>
        <section data-rune="symbol-member">
          <h4 data-name="name"></h4>
          <div data-name="body">
            <strong marker="**">config</strong>
            <code>ParserConfig</code>
            -- Parser configuration
            <ul>
              <li>
                <strong marker="**">strictMode</strong>
                <code>boolean</code>
                -- Reject unknown runes.
                <em marker="*">
                  Default:
                  <code>false</code>
                </em>
              </li>
              <li>
                <strong marker="**">maxDepth</strong>
                <code>number</code>
                -- Maximum nesting depth.
                <em marker="*">
                  Default:
                  <code>10</code>
                </em>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </section>
    <section data-rune="symbol-group">
      <h3 data-name="label">Methods</h3>
      <div data-name="body">
        <section data-rune="symbol-member">
          <h4 data-name="name">parse</h4>
          <div data-name="body">
            <p>Parse a Markdoc source string into a raw AST.</p>
            <div class="rf-codeblock">
              <pre data-language="typescript">
                <code data-language="typescript">parse(source: string): ASTNode
</code>
              </pre>
            </div>
            <ul>
              <li>
                <strong marker="**">source</strong>
                <code>string</code>
                -- Raw Markdoc content
              </li>
            </ul>
            <blockquote>
              <p>
                Returns
                <code>ASTNode</code>
                -- The root node of the parsed abstract syntax tree.
              </p>
            </blockquote>
          </div>
        </section>
        <section data-rune="symbol-member">
          <h4 data-name="name">transform</h4>
          <div data-name="body">
            <p>Transform a parsed AST into a renderable tree.</p>
            <div class="rf-codeblock">
              <pre data-language="typescript">
                <code data-language="typescript">transform(ast: ASTNode, variables?: Record&lt;string, any&gt;): RenderTree
</code>
              </pre>
            </div>
            <ul>
              <li>
                <strong marker="**">ast</strong>
                <code>ASTNode</code>
                -- A parsed AST from the
                <code>parse</code>
                method
              </li>
              <li>
                <strong marker="**">variables</strong>
                <code>Record&lt;string, any&gt;</code>
                <em marker="*">(optional)</em>
                -- Template variables
              </li>
            </ul>
            <blockquote>
              <p>
                Returns
                <code>RenderTree</code>
                -- A framework-agnostic renderable tree.
              </p>
            </blockquote>
            <blockquote>
              <p>
                Throws
                <code>TransformError</code>
                if a rune's reinterpretation rules fail.
              </p>
            </blockquote>
          </div>
        </section>
      </div>
    </section>
  </div>
</article>

classtypescript

ContentParser

The core parsing engine that transforms raw Markdoc source into an abstract syntax tree.

Since: 1.0.0

class ContentParser extends EventEmitter

Constructor

new ContentParser(config: ParserConfig)

config ParserConfig -- Parser configuration

strictMode boolean -- Reject unknown runes. Default: false
maxDepth number -- Maximum nesting depth. Default: 10

Methods

parse

Parse a Markdoc source string into a raw AST.

parse(source: string): ASTNode

source string -- Raw Markdoc content

Returns ASTNode -- The root node of the parsed abstract syntax tree.

transform

Transform a parsed AST into a renderable tree.

transform(ast: ASTNode, variables?: Record<string, any>): RenderTree

ast ASTNode -- A parsed AST from the parse method
variables Record<string, any> (optional) -- Template variables

Returns RenderTree -- A framework-agnostic renderable tree.

Throws TransformError if a rune's reinterpretation rules fail.

<article data-field="content-section" typeof="TechArticle" class="rf-symbol rf-symbol--class rf-symbol--typescript rf-symbol--1.0.0" data-kind="class" data-lang="typescript" data-since="1.0.0" data-deprecated="" data-source="" data-elevation="flat" data-rune="symbol" data-density="full">
  <div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-symbol__eyebrow">
    <span class="rf-badge" data-meta-type="category">class</span>
    <span class="rf-badge" data-meta-type="category">typescript</span>
  </div>
  <header data-name="preamble" class="rf-symbol__preamble" data-section="preamble">
    <h2 id="contentparser" data-name="headline" class="rf-symbol__headline" data-section="title">ContentParser</h2>
    <p data-name="blurb" class="rf-symbol__blurb">The core parsing engine that transforms raw Markdoc source into an abstract syntax tree.</p>
  </header>
  <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-symbol__metadata">
    <div data-name="row" data-field="since" class="rf-symbol__row">
      <dt data-meta-label="">Since</dt>
      <dd data-meta-type="temporal">1.0.0</dd>
    </div>
  </dl>
  <div data-name="body" class="rf-symbol__body" data-section="body">
    <div class="rf-codeblock">
      <pre data-language="typescript"><code data-language="typescript">class ContentParser extends EventEmitter
</code></pre>
    </div>
    <section class="rf-symbol-group" data-rune="symbol-group" data-density="full">
      <h3 data-name="label" class="rf-symbol-group__label">Constructor</h3>
      <div data-name="body" class="rf-symbol-group__body">
        <div class="rf-codeblock">
          <pre data-language="typescript"><code data-language="typescript">new ContentParser(config: ParserConfig)
</code></pre>
        </div>
        <section class="rf-symbol-member" data-rune="symbol-member" data-density="full">
          <h4 data-name="name" class="rf-symbol-member__name"></h4>
          <div data-name="body" class="rf-symbol-member__body">
            <strong marker="**">config</strong>
             
            <code>ParserConfig</code>
             -- Parser configuration
            <ul>
              <li>
                <strong marker="**">strictMode</strong>
                 
                <code>boolean</code>
                 -- Reject unknown runes. 
                <em marker="*">
                  Default: 
                  <code>false</code>
                </em>
              </li>
              <li>
                <strong marker="**">maxDepth</strong>
                 
                <code>number</code>
                 -- Maximum nesting depth. 
                <em marker="*">
                  Default: 
                  <code>10</code>
                </em>
              </li>
            </ul>
          </div>
        </section>
      </div>
    </section>
    <section class="rf-symbol-group" data-rune="symbol-group" data-density="full">
      <h3 data-name="label" class="rf-symbol-group__label">Methods</h3>
      <div data-name="body" class="rf-symbol-group__body">
        <section class="rf-symbol-member" data-rune="symbol-member" data-density="full">
          <h4 data-name="name" class="rf-symbol-member__name">parse</h4>
          <div data-name="body" class="rf-symbol-member__body">
            <p>Parse a Markdoc source string into a raw AST.</p>
            <div class="rf-codeblock">
              <pre data-language="typescript"><code data-language="typescript">parse(source: string): ASTNode
</code></pre>
            </div>
            <ul>
              <li>
                <strong marker="**">source</strong>
                 
                <code>string</code>
                 -- Raw Markdoc content
              </li>
            </ul>
            <blockquote>
              <p>
                Returns 
                <code>ASTNode</code>
                 -- The root node of the parsed abstract syntax tree.
              </p>
            </blockquote>
          </div>
        </section>
        <section class="rf-symbol-member" data-rune="symbol-member" data-density="full">
          <h4 data-name="name" class="rf-symbol-member__name">transform</h4>
          <div data-name="body" class="rf-symbol-member__body">
            <p>Transform a parsed AST into a renderable tree.</p>
            <div class="rf-codeblock">
              <pre data-language="typescript"><code data-language="typescript">transform(ast: ASTNode, variables?: Record&lt;string, any&gt;): RenderTree
</code></pre>
            </div>
            <ul>
              <li>
                <strong marker="**">ast</strong>
                 
                <code>ASTNode</code>
                 -- A parsed AST from the 
                <code>parse</code>
                 method
              </li>
              <li>
                <strong marker="**">variables</strong>
                 
                <code>Record&lt;string, any&gt;</code>
                 
                <em marker="*">(optional)</em>
                 -- Template variables
              </li>
            </ul>
            <blockquote>
              <p>
                Returns 
                <code>RenderTree</code>
                 -- A framework-agnostic renderable tree.
              </p>
            </blockquote>
            <blockquote>
              <p>
                Throws 
                <code>TransformError</code>
                 if a rune's reinterpretation rules fail.
              </p>
            </blockquote>
          </div>
        </section>
      </div>
    </section>
  </div>
</article>

Enum documentation

Enum members are defined as a list with name "value" -- description format.

{% symbol kind="enum" lang="typescript" since="1.2.0" %}

## RuneCategory

Classification categories for runes in the registry.

```typescript
enum RuneCategory
```

- **Layout** `"layout"` -- Core structural runes (section, grid, columns)
- **Content** `"content"` -- Content structure runes (tabs, accordion, callout)
- **Data** `"data"` -- Data display and reference runes (datatable, chart, codegroup)
- **Interactive** `"interactive"` -- User interaction runes (form, quiz, poll)

{% /symbol %}

<article data-field="content-section" data-rune="symbol" typeof="TechArticle" data-rune-fields="{&quot;kind&quot;:&quot;enum&quot;,&quot;lang&quot;:&quot;typescript&quot;,&quot;since&quot;:&quot;1.2.0&quot;,&quot;deprecated&quot;:&quot;&quot;,&quot;source&quot;:&quot;&quot;}">
  <h2 id="runecategory" data-name="headline">RuneCategory</h2>
  <p data-name="blurb">Classification categories for runes in the registry.</p>
  <div data-name="body">
    <div class="rf-codeblock">
      <pre data-language="typescript">
        <code data-language="typescript">enum RuneCategory
</code>
      </pre>
    </div>
    <ul>
      <li>
        <strong marker="**">Layout</strong>
        <code>&quot;layout&quot;</code>
        -- Core structural runes (section, grid, columns)
      </li>
      <li>
        <strong marker="**">Content</strong>
        <code>&quot;content&quot;</code>
        -- Content structure runes (tabs, accordion, callout)
      </li>
      <li>
        <strong marker="**">Data</strong>
        <code>&quot;data&quot;</code>
        -- Data display and reference runes (datatable, chart, codegroup)
      </li>
      <li>
        <strong marker="**">Interactive</strong>
        <code>&quot;interactive&quot;</code>
        -- User interaction runes (form, quiz, poll)
      </li>
    </ul>
  </div>
</article>

enumtypescript

RuneCategory

Classification categories for runes in the registry.

Since: 1.2.0

enum RuneCategory

Layout "layout" -- Core structural runes (section, grid, columns)
Content "content" -- Content structure runes (tabs, accordion, callout)
Data "data" -- Data display and reference runes (datatable, chart, codegroup)
Interactive "interactive" -- User interaction runes (form, quiz, poll)

<article data-field="content-section" typeof="TechArticle" class="rf-symbol rf-symbol--enum rf-symbol--typescript rf-symbol--1.2.0" data-kind="enum" data-lang="typescript" data-since="1.2.0" data-deprecated="" data-source="" data-elevation="flat" data-rune="symbol" data-density="full">
  <div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-symbol__eyebrow">
    <span class="rf-badge" data-meta-type="category">enum</span>
    <span class="rf-badge" data-meta-type="category">typescript</span>
  </div>
  <header data-name="preamble" class="rf-symbol__preamble" data-section="preamble">
    <h2 id="runecategory" data-name="headline" class="rf-symbol__headline" data-section="title">RuneCategory</h2>
    <p data-name="blurb" class="rf-symbol__blurb">Classification categories for runes in the registry.</p>
  </header>
  <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-symbol__metadata">
    <div data-name="row" data-field="since" class="rf-symbol__row">
      <dt data-meta-label="">Since</dt>
      <dd data-meta-type="temporal">1.2.0</dd>
    </div>
  </dl>
  <div data-name="body" class="rf-symbol__body" data-section="body">
    <div class="rf-codeblock">
      <pre data-language="typescript"><code data-language="typescript">enum RuneCategory
</code></pre>
    </div>
    <ul>
      <li>
        <strong marker="**">Layout</strong>
         
        <code>&quot;layout&quot;</code>
         -- Core structural runes (section, grid, columns)
      </li>
      <li>
        <strong marker="**">Content</strong>
         
        <code>&quot;content&quot;</code>
         -- Content structure runes (tabs, accordion, callout)
      </li>
      <li>
        <strong marker="**">Data</strong>
         
        <code>&quot;data&quot;</code>
         -- Data display and reference runes (datatable, chart, codegroup)
      </li>
      <li>
        <strong marker="**">Interactive</strong>
         
        <code>&quot;interactive&quot;</code>
         -- User interaction runes (form, quiz, poll)
      </li>
    </ul>
  </div>
</article>

Type alias

Type aliases are the simplest form -- just a name, description, and type definition.

{% symbol kind="type" lang="typescript" %}

## RuneMap

A mapping of rune names to their definitions. Used to register custom runes or override built-in rune behavior.

```typescript
type RuneMap = Record<string, RuneDefinition>
```

{% /symbol %}

<article data-field="content-section" data-rune="symbol" typeof="TechArticle" data-rune-fields="{&quot;kind&quot;:&quot;type&quot;,&quot;lang&quot;:&quot;typescript&quot;,&quot;since&quot;:&quot;&quot;,&quot;deprecated&quot;:&quot;&quot;,&quot;source&quot;:&quot;&quot;}">
  <h2 id="runemap" data-name="headline">RuneMap</h2>
  <p data-name="blurb">A mapping of rune names to their definitions. Used to register custom runes or override built-in rune behavior.</p>
  <div data-name="body">
    <div class="rf-codeblock">
      <pre data-language="typescript">
        <code data-language="typescript">type RuneMap = Record&lt;string, RuneDefinition&gt;
</code>
      </pre>
    </div>
  </div>
</article>

typetypescript

RuneMap

A mapping of rune names to their definitions. Used to register custom runes or override built-in rune behavior.

type RuneMap = Record<string, RuneDefinition>

<article data-field="content-section" typeof="TechArticle" class="rf-symbol rf-symbol--type rf-symbol--typescript" data-kind="type" data-lang="typescript" data-since="" data-deprecated="" data-source="" data-elevation="flat" data-rune="symbol" data-density="full">
  <div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-symbol__eyebrow">
    <span class="rf-badge" data-meta-type="category">type</span>
    <span class="rf-badge" data-meta-type="category">typescript</span>
  </div>
  <header data-name="preamble" class="rf-symbol__preamble" data-section="preamble">
    <h2 id="runemap" data-name="headline" class="rf-symbol__headline" data-section="title">RuneMap</h2>
    <p data-name="blurb" class="rf-symbol__blurb">A mapping of rune names to their definitions. Used to register custom runes or override built-in rune behavior.</p>
  </header>
  <div data-name="body" class="rf-symbol__body" data-section="body">
    <div class="rf-codeblock">
      <pre data-language="typescript"><code data-language="typescript">type RuneMap = Record&lt;string, RuneDefinition&gt;
</code></pre>
    </div>
  </div>
</article>

Heading levels

Symbol uses fixed heading levels: the construct name is at h2, groups (Constructor, Properties, Methods) split at h3, and individual members at h4.

Deprecated construct

Set the deprecated attribute to mark a construct as deprecated. Add a source attribute to link to the source code.

{% symbol kind="function" deprecated="2.0.0" source="https://github.com/example/blob/main/src/legacy.ts#L42" %}

## legacyRender

This function is deprecated. Use `renderContent` instead.

```typescript
legacyRender(source: string): any
```

{% /symbol %}

<article data-field="content-section" data-rune="symbol" typeof="TechArticle" data-rune-fields="{&quot;kind&quot;:&quot;function&quot;,&quot;lang&quot;:&quot;typescript&quot;,&quot;since&quot;:&quot;&quot;,&quot;deprecated&quot;:&quot;2.0.0&quot;,&quot;source&quot;:&quot;https://github.com/example/blob/main/src/legacy.ts#L42&quot;}">
  <h2 id="legacyrender" data-name="headline">legacyRender</h2>
  <p data-name="blurb">
    This function is deprecated. Use
    <code>renderContent</code>
    instead.
  </p>
  <div data-name="body">
    <div class="rf-codeblock">
      <pre data-language="typescript">
        <code data-language="typescript">legacyRender(source: string): any
</code>
      </pre>
    </div>
  </div>
</article>

functiontypescriptSource

legacyRender

This function is deprecated. Use renderContent instead.

Deprecated: 2.0.0

legacyRender(source: string): any

<article data-field="content-section" typeof="TechArticle" class="rf-symbol rf-symbol--function rf-symbol--typescript rf-symbol--2.0.0 rf-symbol--https://github.com/example/blob/main/src/legacy.ts#L42" data-kind="function" data-lang="typescript" data-since="" data-deprecated="2.0.0" data-source="https://github.com/example/blob/main/src/legacy.ts#L42" data-elevation="flat" data-rune="symbol" data-density="full">
  <div data-name="eyebrow" data-zone="eyebrow" data-zone-layout="bar" class="rf-symbol__eyebrow">
    <span class="rf-badge" data-meta-type="category">function</span>
    <span class="rf-badge" data-meta-type="category">typescript</span>
    <a href="https://github.com/example/blob/main/src/legacy.ts#L42" data-meta-type="link" data-align="end">Source</a>
  </div>
  <header data-name="preamble" class="rf-symbol__preamble" data-section="preamble">
    <h2 id="legacyrender" data-name="headline" class="rf-symbol__headline" data-section="title">legacyRender</h2>
    <p data-name="blurb" class="rf-symbol__blurb">
      This function is deprecated. Use 
      <code>renderContent</code>
       instead.
    </p>
  </header>
  <dl data-name="metadata" data-zone="metadata" data-zone-layout="definition-list" class="rf-symbol__metadata">
    <div data-name="row" data-field="deprecated" class="rf-symbol__row">
      <dt data-meta-label="">Deprecated</dt>
      <dd>
        <span class="rf-badge" data-meta-type="status">2.0.0</span>
      </dd>
    </div>
  </dl>
  <div data-name="body" class="rf-symbol__body" data-section="body">
    <div class="rf-codeblock">
      <pre data-language="typescript"><code data-language="typescript">legacyRender(source: string): any
</code></pre>
    </div>
  </div>
</article>

Attributes

Attribute	Type	Required	Description
`kind`	`"function" \| "class" \| "interface" \| "enum" \| "type" \| "module" \| "hook" \| "component"`	—	Symbol category that controls grouping behavior and icon display.
`lang`	`string`	—	Programming language used for syntax highlighting in code examples.
`since`	`string`	—	Version when this symbol was introduced (e.g. "1.2.0").
`deprecated`	`string`	—	Deprecation notice with version or reason; leave empty if not deprecated.
`source`	`string`	—	URL to the source file or repository for this symbol.

Universal attributes

The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.

Attribute	Type	Required	Description
`bg`	`string`	—	Background preset applied to this block
`bg-from`	`string`	—	Gradient start colour — a semantic token name (→ var(--rf-color-*))
`bg-gradient`	`"to-t" \| "to-b" \| "to-l" \| "to-r" \| "to-tr" \| "to-br" \| "to-bl" \| "to-tl"`	—	Gradient direction (bounded named set)
`bg-gradient-type`	`"linear" \| "radial" \| "conic"`	—	Gradient type
`bg-to`	`string`	—	Gradient end colour — a semantic token name
`bg-via`	`string`	—	Optional middle gradient stop — a semantic token name
`scrim`	`"top" \| "bottom" \| "left" \| "right" \| "none"`	—	Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim
`scrim-blur`	`"none" \| "sm" \| "md" \| "lg"`	—	Frost scrim blur amount
`scrim-strength`	`"sm" \| "md" \| "lg"`	—	Gradient scrim strength
`scrim-tone`	`"dark" \| "light"`	—	Whether the scrim darkens (for light text) or lightens (for dark text)
`scrim-type`	`"gradient" \| "frost"`	—	Scrim treatment: gradient (default) or frost (backdrop blur)

The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`elevation`	`"sunken" \| "flush" \| "flat" \| "raised" \| "floating" \| "overlay" \| "none" \| "sm" \| "md" \| "lg"`	—	Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.

Attribute	Type	Required	Description
`reveal`	`"none" \| "fade" \| "slide" \| "scale" \| "blur"`	—	Scroll-reveal entrance character (none\|fade\|slide\|scale\|blur); the theme owns the choreography
`stagger`	`boolean`	—	Cascade this block's items in as it reveals (no-op on single-child runes)

Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.

Attribute	Type	Required	Description
`prominence`	`"quiet" \| "normal" \| "prominent" \| "display"`	—	Section-header emphasis (only on page-section-header family runes)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.

Attribute	Type	Required	Description
`substrate`	`"dots" \| "grid" \| "lines" \| "cross" \| "checker" \| "none"`	—	Generated surface pattern
`substrate-fill`	`"inherit" \| "inset"`	—	Surface fill the pattern sits on (full colour stays with tint)
`substrate-opacity`	`"sm" \| "md" \| "lg"`	—	Pattern ink strength
`substrate-size`	`"sm" \| "md" \| "lg"`	—	Pattern cell size
`substrate-target`	`"self" \| "media"`	—	Which surface the pattern fills (overrides the rune/theme default)

Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.

Attribute	Type	Required	Description
`tint`	`string`	—	Color tint preset applied to this block
`tint-mode`	`"auto" \| "dark" \| "light"`	—	Whether the tint adapts to auto, dark, or light mode

The track a block rune occupies.

Attribute	Type	Required	Description
`width`	`"compact" \| "narrow" \| "content" \| "wide" \| "full"`	—	Maximum width constraint for this block

Not available	Why
dropcap, reading	this rune declares no prose body
frame	this rune declares neither a `frameTarget` nor a media section

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing