React Library
Use @myriaddreamin/typst.react.
import { TypstDocument } from '@myriaddreamin/typst.react';
export const App = (artifact: Uint8Array) => {
return (
<div>
<h1>Demo: Embed Your Typst Document in React</h1>
<TypstDocument fill="#343541" artifact={artifact} />
</div>
);
};
import { TypstDocument } from '@myriaddreamin/typst.react';
export const App = (artifact: Uint8Array) => {
return (
<div>
<h1>Demo: Embed Your Typst Document in React</h1>
<TypstDocument fill="#343541" artifact={artifact} />
</div>
);
};
fill property
Fill document with color.
<TypstDocument fill="#343541"/>
<TypstDocument fill="#343541"/>
Note: Current typst.ts doesn't support a transparent background color in some browsers.
artifact property
Render the document with artifact from precompiler.
<TypstDocument artifact={artifact}/>
<TypstDocument artifact={artifact}/>
The artifact can be only in Vector Format to this time.
To get artifact data, please refer to Command Line Interface or All-in-one Node.js Library.
Set renderer initialization option for TypstDocument
Retrieve a typst.InitOptions for initializating the renderer for TypstDocument
TypstDocument.setWasmModuleInitOptions({
getModule: () =>
'http://localhost:20810/typst_ts_renderer_bg.wasm',
});
TypstDocument.setWasmModuleInitOptions({
getModule: () =>
'http://localhost:20810/typst_ts_renderer_bg.wasm',
});
The default value is:
{
beforeBuild: [],
getModule: () => '/node_modules/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
}
{
beforeBuild: [],
getModule: () => '/node_modules/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
}
Example: show document
See typst.react demo for more details.