diff --git a/js/src/forum/addSummaryExcerpt.tsx b/js/src/forum/addSummaryExcerpt.tsx
index 71f6479..5bf43d8 100755
--- a/js/src/forum/addSummaryExcerpt.tsx
+++ b/js/src/forum/addSummaryExcerpt.tsx
@@ -8,6 +8,7 @@ import ItemList from 'flarum/common/utils/ItemList';
 import Tag from 'flarum/tags/models/Tag';
 import Model from 'flarum/common/Model';
 import type Mithril from 'mithril';
+import Excerpt from './components/Excerpt';
 
 export default function addSummaryExcerpt() {
   if (app.initializers.has('flarum-tags')) {
@@ -47,11 +48,8 @@ export default function addSummaryExcerpt() {
       return;
     }
 
-    if (!excerptPost?.contentHtml?.()) return;
-    const content = richExcerpt ? m.trust(truncate(excerptPost.contentHtml(), excerptLength)) : truncate(excerptPost.contentPlain(), excerptLength);
-
     if (excerptPost) {
-      const excerpt = <div>{content}</div>;
+      const excerpt = <Excerpt post={excerptPost} length={excerptLength} richExcerpt={richExcerpt} />;
 
       items.add(onMobile ? 'excerptM' : 'excerpt', excerpt, -100);
     }
diff --git a/js/src/forum/components/Excerpt.tsx b/js/src/forum/components/Excerpt.tsx
new file mode 100644
index 0000000..d22c75b
--- /dev/null
+++ b/js/src/forum/components/Excerpt.tsx
@@ -0,0 +1,40 @@
+import Component, { ComponentAttrs } from 'flarum/common/Component';
+import Post from 'flarum/common/models/Post';
+import { truncate } from 'flarum/common/utils/string';
+import type Mithril from 'mithril';
+
+export interface ExcerptAttrs extends ComponentAttrs {
+  post: Post;
+  length: number;
+  richExcerpt: boolean;
+}
+
+export default class Excerpt extends Component<ExcerptAttrs> {
+  post!: Post;
+  length!: number;
+  richExcerpt!: boolean;
+
+  oninit(vnode: Mithril.Vnode<ExcerptAttrs, this>) {
+    super.oninit(vnode);
+
+    this.post = this.attrs.post;
+    this.length = this.attrs.length;
+    this.richExcerpt = this.attrs.richExcerpt;
+  }
+
+  view() {
+    return <div>{m.trust(this.getContent())}</div>;
+  }
+
+  getContent(): string {
+    return this.richExcerpt ? truncate(this.contentRich() ?? '', this.length) : truncate(this.contentPlain() ?? '', this.length);
+  }
+
+  contentRich() {
+    return this.post.contentHtml();
+  }
+
+  contentPlain() {
+    return this.post.contentPlain();
+  }
+}
diff --git a/js/src/forum/components/index.ts b/js/src/forum/components/index.ts
new file mode 100644
index 0000000..85966a4
--- /dev/null
+++ b/js/src/forum/components/index.ts
@@ -0,0 +1,5 @@
+import Excerpt from './Excerpt';
+
+export const components = {
+  Excerpt,
+};
diff --git a/js/src/forum/index.ts b/js/src/forum/index.ts
index 1526f21..3a133a1 100644
--- a/js/src/forum/index.ts
+++ b/js/src/forum/index.ts
@@ -1,8 +1,9 @@
 import app from 'flarum/forum/app';
-
 import addSummaryExcerpt from './addSummaryExcerpt';
 import addUserPreference from './addUserPreference';
 
+export * from './components';
+
 app.initializers.add('ianm-synopsis', () => {
   addSummaryExcerpt();
   addUserPreference();