Demo

Typography

Tailwind Typography and Typst helps styling inline code, coloured inline code: fn foo<T: Clone>(f: fn(T) -> ()), bold, italics, bold italics, highlighted text, underlined text, overlined text, “quoted text”, “quote’s ‘effect’ in quoted text”, SmallCaps, ~~strikethrough text~~, _subscripts, ^superscripts, UPPERCASE TEXT, And a _{“comprehensive”} ^EXAMPLE

Lorem

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri tamen permagna accessio potest, si aliquod aeternum et infinitum impendere malum nobis opinemur. Quod idem licet transferre in voluptatem, ut postea variari voluptas distinguique possit, augeri amplificarique non possit. At etiam Athenis, ut e patre audiebam facete et urbane Stoicos irridente, statua est in quo a nobis philosophia defensa et collaudata est, cum id, quod maxime placeat, facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et.

Typst on Wikipedia

See also: original page on wikipedia.org
Try hovering your cursor on the footnotes! ¹You can put arbitrary content in the footnote. Like this: ${log}_{𝑎} 𝑢 = \frac{{log}_{𝑏} 𝑢}{{log}_{𝑏} 𝑎}$ .

Typst (/ˈtaɪpst/) ²The stuff we’re using is an open-source ³Meaning that the software’s source is available to everyone typesetting ⁴Basically meaning putting a bunch of text together system and corresponding markup language. The Typst compiler ⁵A translator in the computer science sense. is free ⁶Free as in freedom, not as in free lunch software and is distributed under the Apache License 2.0 license. ⁷Very cool license

The system is designed for writing and formatting scientific ^HScience related texts and mathematical ^IMathematical as in math formulas. Typst supports simple formatting ^JSee the typography chapter for details for common formatting applications, customizable functions, an integrated scripting language, and mathematical typesetting. It is designed to be an alternative to LaTeX. ^KOhh this is the baddie

The compiler is developed by Typst GmbH, ^xiiNice company with nice people which maintains ^xiiiMaintain is the act of maintaining and supports the software’s development, and operates a proprietary ^xivHave you heard of open source? Maybe yes. Try it out, it’s super cool collaborative ^xvLots of people can edit together simultaneously cloud-based ^xviNo need to store files locally editor, offering both free and paid services in a manner similar to Overleaf, ^xviiBaddie which allows users to preview their work while writing and includes a collaboration feature.

History

Typst has been developed since 2019 and was first published in 2022 by Laurenz Mädje and Martin Haug for their masters theses at Technische Universität Berlin. In March 2023, the Typst compiler was released as open-source, and the beta version of its web app was simultaneously announced. As of 2025, the web app is out of beta.

According to GitHub, Typst was the second fastest-growing programming language by percentage in 2025.

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Note that these headings are not outlined, so they would not appear on the sidebar.

Framed text:

Math

Inline: the root formula is $𝑥 = \frac{- 𝑏 \pm \sqrt{𝑏^{2} - 4 𝑎 𝑐}}{2 𝑎}$ and the Chudnovsky algorithm is $\frac{1}{𝜋} = \frac{\sqrt{10005}}{4270934400} \sum_{𝑘 = 0}^{\infty} \frac{{(- 1)}^{𝑘 (6 𝑘)!} (545140134 𝑘 + 13591409)}{(3 𝑘)! {(𝑘!)}^{3} {(640320)}^{3 𝑘}}$ with Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim aeque doleamus animo, cum corpore dolemus, fieri. and $𝐴 = \int_{𝑎}^{𝑏} (𝑓 (𝑥) - 𝑔 (𝑥)) d 𝑥$ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.

\frac{1}{𝜋} = \frac{\sqrt{10005}}{4270934400} \sum_{𝑘 = 0}^{\infty} \frac{{(- 1)}^{𝑘 (6 𝑘)!} (545140134 𝑘 + 13591409)}{(3 𝑘)! {(𝑘!)}^{3} {(640320)}^{3 𝑘}}

Figure 2: The Chudnovsky algorithm

𝜇 = \frac{1}{𝑛} \sum_{}^{𝑛} 𝑖 = 1 𝑥_{𝑖}

Figure 3: Something to do with math

𝑃 (𝐴 | 𝐵) = \frac{𝑃 (𝐵 | 𝐴) 𝑃 (𝐴)}{𝑃 (𝐵)}

Figure 4: Something to do with math

𝑓^{'} (𝑥) = lim_{ℎ \to 0} \frac{𝑓 (𝑥 + ℎ) - 𝑓 (𝑥)}{ℎ}

Figure 5: Something to do with math

lim_{𝑛 \to \infty} {(1 + \frac{1}{𝑛})}^{𝑛} = 𝑒

Figure 6: Something to do with math

𝑓 (𝑥) = \sum_{𝑛 = 0}^{\infty} \frac{𝑓^{(𝑛)} (𝑎)}{𝑛!} {(𝑥 - 𝑎)}^{𝑛}

Figure 7: Something to do with math

𝑥 + 𝑦^{\frac{2}{𝑘 + 1}}

Figure 8: Something to do with math

𝑥_{𝑦_{𝑏}^{𝑎}}^{𝑧_{𝑐}^{𝑑}}

Figure 9: Something to do with math

det (𝐴) = \sum_{𝜎 \in 𝑆_{𝑛}} 𝜀 (𝜎) \prod_{𝑖 = 1}^{𝑛} 𝑎_{𝑖, 𝜎_{𝑖}}

Figure 10: Something to do with math

{\underset{𝑘 + 𝑙 elements}{\underset{⏟}{\overset{𝑘 𝑎's}{\overset{⏞}{𝑎, \dots, 𝑎}}, \overset{𝑙 𝑏's}{\overset{⏞}{𝑏, \dots, 𝑏}}}}}

Figure 11: Something to do with math

det | \begin{matrix} 𝑐_{0} & 𝑐_{1} & 𝑐_{2} & \dots & 𝑐_{𝑛} \\ 𝑐_{1} & 𝑐_{2} & 𝑐_{3} & \dots & 𝑐_{𝑛 + 1} \\ 𝑐_{2} & 𝑐_{3} & 𝑐_{4} & \dots & 𝑐_{𝑛 + 2} \\ ⋮ & ⋮ & ⋮ & ⋱ & ⋮ \\ 𝑐_{𝑛} & 𝑐_{𝑛 + 1} & 𝑐_{𝑛 + 2} & \dots & 𝑐_{2 𝑛} \end{matrix} | > 0

Figure 12: Something to do with math

Lists

Unordered list:

Foo
Bar
Baz
- Fizz
- Buzz
  - Qux
    - Quux
      - Quux
        
        Quuux
        
        Quuuux

Numbered list:

Foo
Bar
Baz
1. Fizz
2. Buzz
  1. Qux
    1. Quux
      1. Quux
        
        Quuux
        
        Quuuux

Prime Number Table

1	2	3	4	5	6	7	8	9	10
11	12	13	14	15	16	17	18	19	20
21	22	23	24	25	26	27	28	29	30
31	32	33	34	35	36	37	38	39	40
41	42	43	44	45	46	47	48	49	50
51	52	53	54	55	56	57	58	59	60
61	62	63	64	65	66	67	68	69	70
71	72	73	74	75	76	77	78	79	80
81	82	83	84	85	86	87	88	89	90
91	92	93	94	95	96	97	98	99	100

CJK

Tiles

日本利用壓電瓷磚將腳步轉化為電能。這些瓷磚捕捉來自你腳步的動能。當你行走時，你的重量和動作會對瓷磚產生壓力。瓷磚會輕微彎曲，從而產生機械應力。瓷磚內部的壓電材料將這種應力轉化為電能。每一步都會產生少量電荷，而數百萬步結合在一起就能產生足夠的電力來驅動 LED 燈、數字顯示屏和傳感器。在像澀谷車站這樣繁忙的地方，每天大約有 240 萬個腳步為這一系統作出貢獻。這些電能可以被儲存或立即使用，從而減少對傳統電力來源的依賴，並支持可持續的城市基礎設施。這種方法將日常運動轉化為實用的可再生能源。

I am a Cat

吾輩（わがはい）は猫である。名前はまだ無い。

どこで生れたかとんと見当（けんとう）がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪（どうあく）な種族であったそうだ。この書生というのは時々我々を捕（つかま）えて煮（に）て食うという話である。しかしその当時は何という考もなかったから別段恐しいとも思わなかった。ただ彼の掌（てのひら）に載せられてスーと持ち上げられた時何だかフワフワした感じがあったばかりである。掌の上で少し落ちついて書生の顔を見たのがいわゆる人間というものの見始（みはじめ）であろう。この時妙なものだと思った感じが今でも残っている。第一毛をもって装飾されべきはず

CJK Vertical Layout

Please note that Typst itself doesn’t yet support vertical layout. The following is done by using the writing-mode: vertical-rl CSS property.

中華民國臨時約法

第一章　總綱

第一條　中華民國由中華人民組織之。

第二條　中華民國之主權屬於國民全體。

第三條　中華民國領土，爲二十二行省、內外蒙古、西藏、靑海。

第四條　中華民國以參議院、臨時大總統、國務院、法院行使其統治權。

第二章　人民

第五條　中華民國人民一律平等，無種族、階級、宗教之區別。

第六條　人民得享有左列各項之自由權：
　一、人民之身體，非依法律不得逮捕、拘禁、審問、處罰。
　二、人民之家宅，非依法律不得侵入或搜索。
　三、人民有保有財產及營業之自由。
　四、人民有言論、著作、刊行及集會結社之自由。
　五、人民有書信秘密之自由。
　六、人民有居住遷徙之自由。
　七、人民有信敎之自由。

第七條　人民有請願於議會之權。

第八條　人民有陳訴於行政官署之權。

第九條　人民有訴訟於法院受其審判之權。

第十條　人民對於官吏違法損害權利之行爲，有陳訴於平政院之權。

第十一條　人民有應任官考試之權。

第十二條　人民有選舉及被選舉之權。

第十三條　人民依法律有納稅之義務。

第十四條　人民依法律有服兵之義務。

第十五條　本章所載人民之權利，有認爲增進公益、維持治安或非常緊急必要時，得依法律限制之。

第三章　參議院

第十六條　中華民國之立法權，以參議院行之。

第十七條　參議院以第十八條所定各地方選派之參議員組織之。

第十八條　參議員每行省、內蒙古、外蒙古、西藏各選派五人，靑海選派一人。其選派方法，由各地方自定之。參議院會議時，每參議員有一表決權。

第十九條　參議院之職權如左︰
　一、議決一切法律案。
　二、議決臨時政府之豫算、決算。
　三、議決全國之稅法、幣制及度量衡之準則。
　四、議決公債之募集及國庫有負擔之契約。
　五、承諾第三十四條、三十五條、四十條事件。
　六、答覆臨時政府諮詢事件。
　七、受理人民之請願。
　八、得以關於法律及其他事件之意見建議於政府。
　九、得提出質問書於國務員，並要求其出席答覆。
　十、得咨請臨時政府查辦官吏納賄違法事件。
　十一、參議院對於臨時大總統認爲有謀叛行爲時，得以總員五分四以上之出席，出席員四分三以上之可決，彈劾之。
　十二、參議院對於國務員認爲失職或違法時，得以總員四分三以上之出席，出席員三分二以上之可決，彈劾之。

第二十條　參議院得自行集會、開會、閉會。

第二十一條　參議院之會議，須公開之。但有國務員之要求，或出席參議員過半數之可決者，得秘密之。

第二十二條　參議院議決事件，咨由臨時大總統公布施行。

第二十三條　臨時大總統對於參議院議決事件，如否認時，得於咨達後十日內聲明理由，咨院覆議。但參議院對於覆議事件，如有到會參議員三分二以上仍執前議時，仍照第二十二條辦理。

第二十四條　參議院議長，由參議員用記名投票法互選之，以得票滿投票總數之半者爲當選。

第二十五條　參議院參議員於院內之言論及表決，對於院外不負責任。

第二十六條　參議院參議員除現行犯及關於內亂、外患之犯罪外，會期中非得本院許可，不得逮捕。

第二十七條　參議院法，由參議院自定之。

第二十八條　參議院以國會成立之日解散，其職權由國會行之。

（下略）

¹ You can put arbitrary content in the footnote. Like this: ${log}_{𝑎} 𝑢 = \frac{{log}_{𝑏} 𝑢}{{log}_{𝑏} 𝑎}$ .
²The stuff we’re using
³Meaning that the software’s source is available to everyone
⁴Basically meaning putting a bunch of text together
⁵A translator in the computer science sense.
⁶Free as in freedom, not as in free lunch
⁷Very cool license
^HScience related
^IMathematical as in math
^JSee the typography chapter for details
^KOhh this is the baddie
^xiiNice company with nice people
^xiiiMaintain is the act of maintaining
^xivHave you heard of open source? Maybe yes. Try it out, it’s super cool
^xvLots of people can edit together simultaneously
^xviNo need to store files locally
^xviiBaddie

1	2	3	4	5	6	7	8	9	10
11	12	13	14	15	16	17	18	19	20
21	22	23	24	25	26	27	28	29	30
31	32	33	34	35	36	37	38	39	40
41	42	43	44	45	46	47	48	49	50
51	52	53	54	55	56	57	58	59	60
61	62	63	64	65	66	67	68	69	70
71	72	73	74	75	76	77	78	79	80
81	82	83	84	85	86	87	88	89	90
91	92	93	94	95	96	97	98	99	100

1	2	3	4	5	6	7	8	9	10
11	12	13	14	15	16	17	18	19	20
21	22	23	24	25	26	27	28	29	30
31	32	33	34	35	36	37	38	39	40
41	42	43	44	45	46	47	48	49	50
51	52	53	54	55	56	57	58	59	60
61	62	63	64	65	66	67	68	69	70
71	72	73	74	75	76	77	78	79	80
81	82	83	84	85	86	87	88	89	90
91	92	93	94	95	96	97	98	99	100