How to render responsively?

[OverflowCat]

After obtaining the vector artifact on the front-end, how should I set different rendering widths? I've tried setting the width of #page, but neither auto nor specified values have been successful. Additionally, renderDom doesn't render completely for me. But renderCanvas can't access addViewportChange. What's the difference between these two?

[Myriad-Dreamin]

I've tried setting the width of #page, but neither auto nor specified values have been successful.

For a responsive layout, you should prepare a vector artifact containing multiple layout first. Currently, it only supports a "width variable" for layout, though you can change height as well according to the x-page-width:

typst.ts/crates/reflexo-typst/src/export/dynamic_layout.rs

Lines 175 to 181 in 5cc1c42

	inputs: Some({
	let mut dict = TypstDict::new();
	dict.insert("x-page-width".into(), current_width.into_value());
	dict.insert("x-target".into(), self.target.clone().into_value());
	Arc::new(Prehashed::new(dict))
	}),

To get it work at typst side, you can check https://github.com/Myriad-Dreamin/shiroa/blob/main/packages/shiroa/sys.typ.

//! Variables for typst.ts's dyn-svg controlling the layout
//! Here is a good example of dynamic layout template: <https://github.com/Myriad-Dreamin/shiroa/blob/308e0aacc2578e9a0c424d20332c6711d1df8d1c/contrib/typst/gh-pages.typ>

/// The default target is _pdf_.
/// `typst.ts` will set it to _web_ when rendering a dynamic layout.
///
/// Example:
/// ```typc
/// #let is-web-target() = target.starts-with("web")
/// #let is-pdf-target() = target.starts-with("pdf")
/// ```
#let target = sys.inputs.at("x-target", default: "pdf")

/// It is in default A4 paper size (21cm)
/// example:
/// ```typc
/// set page(
///   width: page-width,
///   height: auto, // Also, for a website, we don't need pagination.
/// ) if is-web-target;
/// ```
#let page-width = sys.inputs.at("x-page-width", default: 21cm)

Additionally, renderDom doesn't render completely for me. But renderCanvas can't access addViewportChange. What's the difference between these two?

These are "low-level" apis and I haven't done rich documentation. renderCanvas just renders pages of some document in canvas incrementally and it is not responsively. renderDom doesn't implement new export but it combines three more low-level render apis. The arch of renderDom can be seen here: #490 (comment). Relationship: renderDom internally uses renderCanvas for rendering the non-interactive part of documents.

As a good example, you can check short commit history of https://github.com/dark-flames/apollo-typst and https://github.com/Myriad-Dreamin/apollo-typst