diff --git a/packages/viewer/cypress/e2e/typesetting.spec.ts b/packages/viewer/cypress/e2e/typesetting.spec.ts
new file mode 100644
index 00000000..4ea0869e
--- /dev/null
+++ b/packages/viewer/cypress/e2e/typesetting.spec.ts
@@ -0,0 +1,17 @@
+import { deduce, setup } from '../support'
+
+beforeEach(setup)
+
+it('renders internal links', () => {
+  cy.visit('dev/preview')
+  deduce()
+
+  cy.get('[data-testid=input]').type(
+    // {{} is Cypress escaping for {. See https://docs.cypress.io/api/commands/type#Arguments
+    `{{}S000001} is {{}P000001} as noted in {{}S000001|P000001}`,
+  )
+
+  cy.get('[data-testid=output]').contains(
+    'Discrete topology on a two-point set is $T_0$ as noted in Discrete topology on a two-point set | $T_0$',
+  )
+})
diff --git a/packages/viewer/src/components/Dev/Preview.svelte b/packages/viewer/src/components/Dev/Preview.svelte
index 2dd52f9a..d0e1b0ee 100644
--- a/packages/viewer/src/components/Dev/Preview.svelte
+++ b/packages/viewer/src/components/Dev/Preview.svelte
@@ -11,7 +11,12 @@
 <div class="row">
   <div class="col-sm">
     <div class="input-group">
-      <textarea bind:value={body} class="form-control" {rows} />
+      <textarea
+        bind:value={body}
+        class="form-control"
+        data-testid="input"
+        {rows}
+      />
     </div>
     <div class="input-group">
       <div class="form-check">
@@ -31,7 +36,7 @@
       }}
     />
   </div>
-  <div class="col-sm">
+  <div class="col-sm" data-testid="output">
     <Typeset {body} {truncated} />
   </div>
 </div>
diff --git a/packages/viewer/src/components/Shared/Typeset.svelte b/packages/viewer/src/components/Shared/Typeset.svelte
index 80e049cf..2006a9b3 100644
--- a/packages/viewer/src/components/Shared/Typeset.svelte
+++ b/packages/viewer/src/components/Shared/Typeset.svelte
@@ -15,7 +15,18 @@
       return
     }
 
-    container.innerHTML = await $typeset(text, truncated_)
+    try {
+      container.innerHTML = await $typeset(text, truncated_)
+    } catch (e: any) {
+      // FIXME: this is a kludgey fix for the fact that the {id} parser throws
+      // assertion errors on incomplete / unbalanced sets of {}s. The better fix
+      // is to make it more robust.
+      if (e?.name === 'Assertion') {
+        console.warn(e)
+      } else {
+        throw e
+      }
+    }
 
     /**
      * We're adding "real" <a/> tags to the DOM, even for parsed internal
diff --git a/packages/viewer/src/parser/internalLinks.ts b/packages/viewer/src/parser/internalLinks.ts
index c31cecbf..b771f9ff 100644
--- a/packages/viewer/src/parser/internalLinks.ts
+++ b/packages/viewer/src/parser/internalLinks.ts
@@ -9,6 +9,20 @@ export function internal(
   return function linker([kind, id]: ['S' | 'P' | 'T', string]) {
     switch (kind) {
       case 'S':
+        // Support e.g. {S001|P002} as a link to the trait
+        const match = /(?<sid>\d+)\|P(?<pid>\d+)/.exec(id)
+        if (match?.groups) {
+          const { sid, pid } = match.groups
+          const space = spaces.find(Number(sid))
+          const property = properties.find(Number(pid))
+          return {
+            href: `/spaces/S${sid}/properties/P${pid}`,
+            title: `${space ? space.name : 'S' + sid} | ${
+              property ? property.name : 'P' + pid
+            }`,
+          }
+        }
+
         const space = spaces.find(Number(id))
         return {
           href: `/spaces/S${id}`,