snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

apps/docs/components/content/example.tsx

@@ -0,0 +1,23 @@
+import { Embed } from '@/components/content/embed'
+import { Article } from '@/types/content-types'
+import { CodeFiles } from './code-files'
+
+export function Example({ article }: { article: Article }) {
+	const server = 'https://examples.tldraw.com'
+	// both are null when the README has no `component:` frontmatter
+	const additionalFiles = article.componentCodeFiles ? JSON.parse(article.componentCodeFiles) : {}
+	const files = [
+		...(article.componentCode ? [{ name: 'App.tsx', content: article.componentCode }] : []),
+		...Object.keys(additionalFiles).map((key) => ({ name: key, content: additionalFiles[key] })),
+	]
+
+	// article.id is in format "sectionId/categoryId/articleId", we need just the articleId
+	const slug = article.id.split('/').pop()
+
+	return (
+		<div className="w-full mt-8">
+			<Embed src={`${server}/${slug}/full?utm_source=docs-embed`} />
+			<CodeFiles files={files} />
+		</div>
+	)
+}