Solid Library
import { TypstDocument } from "@myriaddreamin/typst.solid";
import { createResource } from "solid-js";
export const App = (artifact: Uint8Array) => {
const getArtifactData = async () => {
const response = await fetch(
"http://localhost:3000/readme.artifact.sir.in"
).then((response) => response.arrayBuffer());
return new Uint8Array(response);
};
const [vec] = createResource(getArtifactData);
return (
<div>
<h1>Demo: Embed Your Typst Document in Solid</h1>
<TypstDocument fill="#343541" artifact={vec()} />
</div>
);
};
import { TypstDocument } from "@myriaddreamin/typst.solid";
import { createResource } from "solid-js";
export const App = (artifact: Uint8Array) => {
const getArtifactData = async () => {
const response = await fetch(
"http://localhost:3000/readme.artifact.sir.in"
).then((response) => response.arrayBuffer());
return new Uint8Array(response);
};
const [vec] = createResource(getArtifactData);
return (
<div>
<h1>Demo: Embed Your Typst Document in Solid</h1>
<TypstDocument fill="#343541" artifact={vec()} />
</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: () => 'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
}
{
beforeBuild: [],
getModule: () => 'https://cdn.jsdelivr.net/npm/@myriaddreamin/typst-ts-renderer/pkg/typst_ts_renderer_bg.wasm',
}
Example: show document
See typst.solid demo for more details.