Embed Telva in common layout/runtime scenarios including readonly, dark mode, scrolling containers, and iframe hosting.

React Integration Contexts

This page maps common host-app scenarios to concrete Telva integration patterns.

Standard full editor

import { Telva } from 'telva'

export default function Basic() {
  return (
    <div style={{ position: 'relative', width: '100%', height: 640 }}>
      <Telva />
    </div>
  )
}

Embedded blocks in page content

Use explicit fixed heights to keep editors stable in long pages.

import { Telva } from 'telva'

export default function Embedded() {
  return (
    <div style={{ padding: '2% 10%' }}>
      <div style={{ position: 'relative', width: '100%', height: 500, overflow: 'hidden' }}>
        <Telva id="small-a" />
      </div>

      <div
        style={{
          position: 'relative',
          width: '100%',
          height: 500,
          overflow: 'hidden',
          marginTop: 32,
        }}
      >
        <Telva id="small-b" />
      </div>
    </div>
  )
}

Read-only from a `.tldr` file

import * as React from 'react'
import { TVFile, Telva } from 'telva'

export default function ReadOnlyPreview() {
  const [file, setFile] = React.useState<TVFile>()

  React.useEffect(() => {
    fetch('/Example.tldr')
      .then((r) => r.json())
      .then((data) => setFile(data))
  }, [])

  return (
    <div style={{ position: 'relative', width: '100%', height: 560 }}>
      <Telva readOnly document={file?.document} />
    </div>
  )
}

Dark mode host

<Telva darkMode />

This controls the app-level dark-mode state exposed by Telva settings.

Scrolling container integration

Telva can run inside oversized scroll regions. Keep the editor itself inside a positioned child wrapper.

<div style={{ height: 1600, width: 1600, padding: 200 }}>
  <div style={{ width: '100%', height: '100%', position: 'relative' }}>
    <Telva />
  </div>
</div>

IFrame hosting

You can embed another Telva route in an iframe when isolation is required:

<iframe
  src="http://localhost:3000/r/hello"
  style={{ width: '100%', height: '50%', border: 'none' }}
/>

Integration checklist

provide deterministic width + height on the parent container
assign a stable id per persistent editor instance
avoid SSR rendering for the editor itself
use readOnly for preview/use-case flows instead of custom input blocking

React Integration Contexts

On this page