dioxus-typst 0.2.0

Typst component for Dioxus
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110

# dioxus-typst

A Dioxus component for rendering Typst documents as HTML.

> **Note:** Typst's HTML export is experimental. Pin your `typst` version and test output carefully.

## Usage

```rust
use dioxus::prelude::*;
use dioxus_typst::Typst;

#[component]
fn BlogPost() -> Element {
    let content = r#"
= My Post

Some *typst* content with `code` and math: $E = m c^2$
"#;

    rsx! {
        article {
            Typst { source: content.to_string() }
        }
    }
}
```

### With Files

Provide images, bibliographies, or other files via `CompileOptions`:

```rust
use dioxus_typst::{Typst, CompileOptions};

let options = CompileOptions::new()
    .with_file("/refs.bib", bib_bytes)
    .with_file("/figure.png", image_bytes);

rsx! {
    Typst {
        source: content,
        options: options,
    }
}
```

### Custom Class

The component wraps output in `<div class="typst-content">` by default:

```rust
rsx! {
    Typst {
        source: content,
        class: "my-custom-class".to_string(),
    }
}
```

### With Packages

```rust
let options = CompileOptions::new()
    .with_package(
        PackageSpec::from_str("@preview/cetz:0.2.2").unwrap(),
        package_files, // HashMap<String, Vec<u8>>
    );

rsx! {
    Typst {
        source: content,
        options: options,
    }
}
```

## Styling

Typst outputs semantic HTML without CSS. Style with your own:

```css
.typst-content h1 {
  font-size: 1.75rem;
}
.typst-content h2 {
  font-size: 1.5rem;
}
.typst-content p {
  margin: 0.75rem 0;
}
.typst-content pre {
  padding: 1rem;
  background: var(--surface);
  border-radius: 4px;
  overflow-x: auto;
}
```

## Feature Flags

| Feature             | Default | Description                                   |
| ------------------- | ------- | --------------------------------------------- |
| `download-packages` | ✕       | Automatically download missing Typst packages |

## Limitations

- Typst HTML export is experimental and may change
- No automatic CSS generation from Typst styles
- External files must be provided via `CompileOptions`