RenderedHTML

Renders children as HTML within a CodeBlock component.

Security

This component should only be used for educational purposes. Always sanitize user-provided content before passing it to RenderedHTML.

Examples

Basic

View Source

Input

<h1 style={{ fontSize: '6rem' }}>Hello World</h1>

Output

<h1 style="font-size: 6rem">Hello World</h1>

import { CodeBlock, RenderedHTML } from 'renoun/components'

export function Basic() {
  return (
    <div style={{ display: 'grid', gap: '2rem' }}>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Input</h2>
        <CodeBlock language="jsx">
          {`<h1 style={{ fontSize: '6rem' }}>Hello World</h1>`}
        </CodeBlock>
      </div>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Output</h2>
        <RenderedHTML includeHtml={false}>
          <h1 style={{ fontSize: '6rem' }}>Hello World</h1>
        </RenderedHTML>
      </div>
    </div>
  )
}

Include Html

View Source

Input

export default function Page() {
  return (
    <>
      <h1>Hello World</h1>
      <style href="h1" precedence="low">
        {`h1 { font-size: 6rem;}`}
      </style>
    </>
  )
}

Output

<html>
  <head>
    <style data-precedence="low" data-href="h1">
      h1 {
        font-size: 6rem;
      }
    </style>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

import { CodeBlock, RenderedHTML } from 'renoun/components'

export function IncludeHtml() {
  return (
    <div style={{ display: 'grid', gap: '2rem' }}>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Input</h2>
        <CodeBlock allowErrors language="jsx">
          {`export default function Page() {\nreturn <><h1>Hello World</h1>\n<style href="h1" precedence="low">\n{\`h1 { font-size: 6rem;}\`}\n</style></>\n}`}
        </CodeBlock>
      </div>
      <div style={{ display: 'grid', gap: '1rem' }}>
        <h2>Output</h2>
        <RenderedHTML>
          <h1>Hello World</h1>
          <style href="h1" precedence="low">{`h1 { font-size: 6rem; }`}</style>
        </RenderedHTML>
      </div>
    </div>
  )
}

API Reference

RenderedHTML

({ children, includeHtml, ...props }: { children: React.ReactNode; includeHtml?: boolean; } & Omit<CodeBlockProps, "language" | "children">) => Promise<React.JSX.Element>

Renders children as HTML within a CodeBlock component.

Parameters

Properties

children *

React.ReactNode

The React element(s) to render as HTML.

includeHtml

boolean | undefined= true

Whether or not to wrap children in html, head, and body tags.

path

string | undefined

Name or path of the code block. Ordered file names will be stripped from the name e.g. 01.index.tsx becomes index.tsx.

workingDirectory

string | undefined

The working directory to use when analyzing the source code. This will read the local file system contents from the workingDirectory joined with the path prop instead of creating a virtual file.

highlightedLines

string | undefined

A string of comma separated lines and ranges to highlight e.g. '1, 3-5, 7'.

focusedLines

string | undefined

A string of comma separated lines and ranges to focus e.g. '6-8, 12'.

unfocusedLinesOpacity

number | undefined

Opacity of unfocused lines when using focusedLines.

allowCopy

string | boolean | undefined

Show or hide a button that copies the source code to the clipboard. Accepts a boolean or a string that will be copied.

allowErrors

string | boolean | undefined

Whether or not to allow errors. Accepts a boolean or comma-separated list of allowed error codes.

showErrors

boolean | undefined

Show or hide error diagnostics.

showLineNumbers

boolean | undefined

Show or hide line numbers.

showToolbar

boolean | undefined

Show or hide the toolbar.

shouldAnalyze

boolean | undefined

Whether or not to analyze the source code for type errors and provide quick information on hover.

shouldFormat

boolean | undefined

Whether or not to format the source code using prettier if installed.

css

{ container?: CSSObject; toolbar?: CSSObject; lineNumbers?: CSSObject; token?: CSSObject; popover?: CSSObject; copyButton?: CSSObject; } | undefined

CSS styles to apply to code block elements.

className

{ container?: string; toolbar?: string; lineNumbers?: string; token?: string; popover?: string; copyButton?: string; } | undefined

Class names to apply to code block elements.

style

{ container?: React.CSSProperties; toolbar?: React.CSSProperties; lineNumbers?: React.CSSProperties; token?: React.CSSProperties; popover?: React.CSSProperties; copyButton?: React.CSSProperties; } | undefined

Styles to apply to code block elements.

Returns

Promise<Element>

Last updated 03/09/25