[Question] Typst Page Not Compatible with Aria Theme Layout in Astro

[JigaoLuo]

Hi everyone,

I’m a big fan of Typst and trying to use it within Astro for blogging.

I’m using the Aria theme, but I’ve run into a problem: the theme's CSS layout doesn’t apply to pages rendered from Typst. I’ve created a minimal reproduction using a fresh Aria setup: https://github.com/JigaoLuo/issue-demo We can see the Typst page just shows up as raw HTML without any of the theme styling:

I’ve added layout info in the frontmatter as required by Aria, but I’m not sure if that’s actually helping:

#metadata(
  (
    layout: "../../layouts/post.astro",
    title: "Typst Test page",
    description: "TEST Typst",
    dateFormatted: "Jul 27, 2025",
  )
)<frontmatter>

I’m still new to Astro and already got some help from @hongjr03, but I feel like I might be missing something simple. Thanks in advance if you have time to take a look!

[OverflowCat]

Currently layout is not supported — the layout is just something like a syntax sugar, implemented by Astro's mdx integration. Although Astro do supports layout for md and mdx files in content collections mode, content layer in Astro v5 does not supoort layout for pure md files. In my own blog I added a extension field in frontmatter and checks it to determine if it needs an extra wrapper. As content collections may be deprecated in the future, I wonder if it is worth supporting it.

As for the theme you use, a workaround is to remove the layout prop in your .md & .typ files, and manually pass the data the layout needs in src/pages/post/[slug].astro:

---
...
import Layout from "../../layouts/post.astro";
const { entry } = Astro.props;
const {Content, remarkPluginFrontmatter} = await entry.render();
---

<Layout frontmatter={remarkPluginFrontmatter}>
  <Content />
</Layout>

[JigaoLuo]

Thanks! I was able to reproduce your suggestion and made the update. There are still a few rendering issues with Typst, but I think this is already a great starting point. Really appreciate your help @OverflowCat @hongjr03!

[JigaoLuo]

@OverflowCat One last thing before I close this issue: Would it be a good idea to document that layout is currently unsupported—and likely won’t be supported in the future?

[syrkis]

I think so.

[OverflowCat]

I think using different layouts is a valid point -- I'm going to check if the layout is easy to implement first.

[JigaoLuo]

No problem—feel free to close the issue whenever it works for you.

[JigaoLuo]

This is the repository I used for the reproduction mentioned above. I’ve removed the public link but uploaded the project here as a ZIP file, in case anyone wants to take a look at the issue.

issue-demo-main.zip

[JigaoLuo]

Hi @OverflowCat ,

Sorry to jump back in—some content in the example above didn’t display properly, and it seems Typst is rendering inconsistently.

First, I’ve re-synced the example to the repo: https://github.com/JigaoLuo/issue-demo. You’ll see the issues I marked: the image isn’t loading, and text color and styles aren’t applied. I also checked the HTML output—there’s no image tag inserted at all.

• the issues: https://github.com/JigaoLuo/issue-demo/blob/main/src/content/post/typst-astro-demo.html.typ#L29-L56
• the output:

Second, I tested the same example in a separate playground of this repo, and there the image and text rendered correctly in Typst. So I suspect this might be a combined issue with my theme setup.

Lastly, if it's not appropriate to raise this issue there, I’m happy to open a separate issue. Thanks again for your time and support.

[OverflowCat]

This is a limitation by typst itself. You need either wrap all image elements in #html.frame, or create img elements with src=/public image dirs by #html.elem.

On 2025، 3-ئاۋغۇست، يە، 22:12 Jigao Luo @.***> wrote:

JigaoLuo left a comment (OverflowCat/astro-typst#26) https://github.com/OverflowCat/astro-typst/issues/26#issuecomment-3148449939

Hi @OverflowCat https://github.com/OverflowCat ,

Sorry to jump back in—some content in the example above didn’t display properly, and it seems Typst is rendering inconsistently.

First, I’ve re-synced the example to the repo: https://github.com/JigaoLuo/issue-demo. You’ll see the issues I marked: the image isn’t loading, and text color and styles aren’t applied. I also checked the HTML output—there’s no image tag inserted at all.

• the issues: https://github.com/JigaoLuo/issue-demo/blob/main/src/content/post/typst-astro-demo.html.typ#L29-L56
• the output:

image.png (view on web) https://github.com/user-attachments/assets/6ba78e41-300e-4f3c-91f7-1e23d83474d3

Second, I tested the same example in a separate playground of this repo, and there the image and text rendered correctly in Typst. So I suspect this might be a combined issue with my theme setup.

— Reply to this email directly, view it on GitHub https://github.com/OverflowCat/astro-typst/issues/26#issuecomment-3148449939, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEZ3LCSEZAFPWGAESONJUED3LYKD3AVCNFSM6AAAAACCPAHRRWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCNBYGQ2DSOJTHE . You are receiving this because you were mentioned.Message ID: @.***>

[JigaoLuo]

Thanks—I’ve found two ways to add images.

#html.elem("img", attrs: (src: "/assets/images/typst.png", style: "height:20pt"))

#html.frame(text([TEXT #image("/public/assets/images/typst.png", height: 20pt)])

One limitation I’m facing is that, regardless of the method, the image always appears on a new line rather than inline.

---

In the playground for this repo, I noticed you can directly use #image, without relying on the experimental #html. And there is nice overview I found helpful: https://typst.app/blog/2025/typst-0.13/#a-first-look-at-html-export

[OverflowCat]

Wrapping the #image in #html.frame in a #box may help, I guess.

On 2025، 4-ئاۋغۇست، دۈ، 02:10 Jigao Luo @.***> wrote:

JigaoLuo left a comment (OverflowCat/astro-typst#26) https://github.com/OverflowCat/astro-typst/issues/26#issuecomment-3148608888

Thanks—I’ve found two ways to add images.

#html.elem("img", attrs: (src: "/assets/images/typst.png", style: "height:20pt")) #html.frame(text([TEXT #image("/public/assets/images/typst.png", height: 20pt)])

One limitation I’m facing is that, regardless of the method, the image always appears on a new line rather than inline.

In the playground for this repo, I noticed you can directly use #image, without relying on the experimental #html. And there is nice overview I found helpful: https://typst.app/blog/2025/typst-0.13/#a-first-look-at-html-export

— Reply to this email directly, view it on GitHub https://github.com/OverflowCat/astro-typst/issues/26#issuecomment-3148608888, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEZ3LCTU5YDOSLWABAIVTK33LZGA7AVCNFSM6AAAAACCPAHRRWVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTCNBYGYYDQOBYHA . You are receiving this because you were mentioned.Message ID: @.***>

[JigaoLuo]

Thanks — I tried both approaches, but neither managed to keep the image inline.

#html.frame(box[#text[Text #image("/public/assets/images/A.png") ] ])

#box[#html.frame[#text[Text #image("/public/assets/images/A.png") ] ]]

When I inspect the HTML in the browser, the text and image always end up in separate scopes: I think it is again a Typst thing as the HTML support is now only experimental. Thanks!

[JigaoLuo]

Hi @OverflowCat If you don’t mind, I’d like to add this #image thing as an additional example to your examples page. I hope it’ll be helpful for others who want to use it.

[OverflowCat]

PR is welcome :)