Typst math typesetting for the web.
You can load this library either by using a script tag, or installing it with npm.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/wypst.min.css" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/dist/wypst.min.js" crossorigin="anonymous"></script>
<script>
wypst.initialize().then(() => {
wypst.renderToString("x + y"); // Test it out!
})
</script>Keep in mind that the javascript file is 17M, so if your internet is slow it might take some seconds to load.
If having the wasm inlined directly is an incovenience, install the npm package
npm install wypstYou may then load the wasm binary
import wypst from 'wypst';
import wasm from 'wypst/dist/wypst.wasm';
await wypst.initialize(wasm);
wypst.renderToString("x + y"); // Test it out!Keep in mind that you will probably need to tell your bundler how to load a .wasm file. If you have difficulties you can open an issue.
To render a Typst math expression, you can use either render or renderToString, as the example below shows:
wypst.render('sum_(n >= 1) 1/n^2 = pi^2/6', element); // Renders into the HTML element
wypst.renderToString('sum_(n >= 1) 1/n^2 = pi^2/6'); // Renders into an HTML stringAll help is welcome. Please see CONTRIBUTING.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent