### Install Typlete Package

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Install the Typlete package using pnpm.

```bash
pnpm add typlete
```

--------------------------------

### Component Output Mode Example

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Example of using transformTypleteMarkdown with output: 'component' for Svelte integration.

```typescript
await transformTypleteMarkdown(markdown, {
	output: 'component'
});
```

--------------------------------

### HTML Output Mode Example

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Example of using transformTypleteMarkdown with output: 'html' for direct HTML/SVG rendering.

```typescript
await transformTypleteMarkdown(markdown, {
	output: 'html'
});
```

--------------------------------

### Markdown Rendering Options with Asset Output

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Markdown helpers accept render options similar to component/server rendering. This example shows asset output with additional options like preamble, textSize, pageMargin, and cache.

```typescript
await transformTypleteMarkdown(markdown, {
	output: 'asset',
	assetDir: 'static/typlete',
	assetBaseUrl: '/typlete',
	preamble: '',
	textSize: '11pt',
	pageMargin: '0pt',
	cache: true
});
```

--------------------------------

### Generated Svelte Components from Markdown

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Example of Svelte component tags produced by the 'component' output mode.

```svelte
<TypstBlock source={'#rect[hello]'} inputMode="raw" />
<TypstBlock source={'alpha + beta'} />
```

--------------------------------

### Markdown Raw Typst Render Block

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Example of a raw Typst render block in Markdown using a typlete-typst fence.

```md
```typlete-typst
#set text(size: 12pt)
#rect[hello]
```
```

--------------------------------

### Markdown Math Render Block

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Example of a math render block in Markdown using a typlete-math fence. Content is treated as a formula body.

```md
```typlete-math
sum_(i=1)^n i = (n(n+1)) / 2
```
```

--------------------------------

### Markdown Typst Source Code Block

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Example of Typst source code remaining as a normal Markdown code block.

```md
```typst
#set text(size: 12pt)
#rect[hello]
```
```

--------------------------------

### Create Server-Side DOMPurify SVG Sanitizer

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Instantiate a DOMPurify SVG sanitizer for server-side use. Requires both 'dompurify' and 'jsdom' packages to be installed.

```typescript
import { createServerDomPurifySvgSanitizer } from 'typlete/server/dompurify';

const sanitize = await createServerDomPurifySvgSanitizer();
```

--------------------------------

### Svelte Configuration for Async Rendering

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Configure Svelte to enable experimental async rendering, which is a requirement for Typlete.

```js
// svelte.config.js
export default {
	compilerOptions: {
		experimental: {
			async: true
		}
	}
};
```

--------------------------------

### Typst Component Input Modes

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Demonstrates math mode (default) and raw mode for TypstInline components.

```svelte
<!-- math mode: Typlete wraps source in Typst math -->
<TypstInline source="alpha + beta" />

<!-- raw mode: Typlete passes source to Typst unchanged -->
<TypstInline inputMode="raw" source={'$alpha + beta$'} />
```

--------------------------------

### MDsveX Preprocessor Configuration for Typlete Components

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Integrate Typlete into MDsveX by running the preprocessor before MDsveX. This converts namespaced Typlete render fences to Svelte component tags. Ensure correct file extensions are listed.

```javascript
// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { mdsvex } from 'mdsvex';
import { createTypstMdsvexPreprocessor } from 'typlete/markdown';

const config = {
	extensions: ['.svelte', '.svx', '.md'],
	preprocess: [
		createTypstMdsvexPreprocessor({
			output: 'component'
		}),
		mdsvex({
			extensions: ['.svx', '.md']
		})
	],
	compilerOptions: {
		experimental: {
			async: true
		}
	},
	kit: {
		adapter: adapter()
	}
};

export default config;
```

--------------------------------

### Basic Svelte Usage with Typst Components

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Use TypstInline and TypstBlock components in Svelte for rendering Typst math.

```svelte
<script lang="ts">
	import { TypstInline, TypstBlock } from 'typlete';
</script>

<p>
	Inline formula: <TypstInline source="integral_0^1 x^2 dif x" />
</p>

<TypstBlock source="sum_(i=1)^n i = (n(n+1)) / 2" />
```

--------------------------------

### Transform Markdown to Asset Output

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Best for static sites. Writes SVG files to assetDir and inserts normal Markdown image links. Ensure assetDir and assetBaseUrl are correctly configured.

```typescript
await transformTypleteMarkdown(markdown, {
	output: 'asset',
	assetDir: 'static/typlete',
	assetBaseUrl: '/typlete'
});
```

--------------------------------

### Raw Typst Rendering in Svelte

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Use inputMode="raw" with TypstBlock to render full Typst markup fragments without math delimiters.

```svelte
<TypstBlock inputMode="raw" source={'#rect(radius: 6pt, inset: 10pt)[#strong[Raw Typst]]'} />
```

--------------------------------

### Server-Side Typst SVG Rendering

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Use renderTypstSvgServer to render Typst content to SVG on the server.

```typescript
import { renderTypstSvgServer } from 'typlete/server';

const svg = await renderTypstSvgServer({
	source: 'integral_0^1 x^2 dif x',
	mode: 'block',
	inputMode: 'math',
	preamble: '',
	textSize: '11pt',
	pageMargin: '0pt',
	cache: true
});
```

--------------------------------

### Transform Markdown to Markdown Image Output

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Use this for renderers that do not support raw HTML but accept Markdown images. Renders SVG and inserts it as a data:image/svg+xml Markdown image.

```typescript
await transformTypleteMarkdown(markdown, {
	output: 'markdown-image'
});
```

--------------------------------

### MDsveX Typlete Component Import Injection

Source: https://github.com/antepodeum/typlete/blob/main/README.md

For 'output: component', the preprocessor injects necessary imports. Disable injection if another MDsveX hook already imports these components.

```typescript
createTypstMdsvexPreprocessor({
	output: 'component',
	injectComponentImports: false
});
```

--------------------------------

### Create DOMPurify SVG Sanitizer

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Instantiate a DOMPurify SVG sanitizer for client-side use. This is optional and helps sanitize compiler-produced SVG by stripping embedded script tags and attributes.

```typescript
import { createDomPurifySvgSanitizer } from 'typlete/sanitizers/dompurify';

const sanitize = await createDomPurifySvgSanitizer();
```

--------------------------------

### Error Handling in Svelte Components

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Configure error display for Typst rendering failures using errorMode and throwOnError props.

```svelte
<TypstBlock source={formula} errorMode="badge" />
<TypstBlock source={formula} errorMode="none" />
```

--------------------------------

### Transform Markdown with Typlete

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Use transformTypleteMarkdown to process Markdown content for Svelte component output.

```typescript
import { transformTypleteMarkdown } from 'typlete/markdown';

const output = await transformTypleteMarkdown(markdown, {
	output: 'component'
});
```

--------------------------------

### Typst Component Props

Source: https://github.com/antepodeum/typlete/blob/main/README.md

TypeScript type definitions for common props supported by Typlete components.

```typescript
type TypstMode = 'inline' | 'block';
type TypstInputMode = 'math' | 'raw' | 'markup';
type TypstSvgSanitizer = (svg: string) => string;

source?: string;
inputMode?: TypstInputMode;
preamble?: string;
textSize?: string;
pageMargin?: string;
cache?: boolean;
sanitize?: TypstSvgSanitizer;
ariaLabel?: string;
title?: string;
loadingLabel?: string;
throwOnError?: boolean;
errorMode?: 'badge' | 'none';
class?: string;
```

--------------------------------

### Inline Formulas in MDsveX

Source: https://github.com/antepodeum/typlete/blob/main/README.md

Using TypstInline component for inline formulas within Markdown content.

```md
The value is <TypstInline source="alpha + beta" />.
```

--------------------------------

### Typlete Markdown Output Modes

Source: https://github.com/antepodeum/typlete/blob/main/README.md

TypeScript type definition for the possible output modes of transformTypleteMarkdown.

```typescript
type TypleteMarkdownOutput = 'component' | 'html' | 'markdown-image' | 'asset';
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.