diff --git a/.gitignore b/.gitignore
index f162de5..bfc6df1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -105,3 +105,10 @@ dist
 
 lib
 package-lock.json
+yarn.lock
+
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+!.yarn/sdks
+!.yarn/versions
diff --git a/package.json b/package.json
index 7ed571d..558675f 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,14 @@
   "license": "MIT",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "require": "./lib/index.js",
+      "default": "./lib/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "directories": {
     "src": "src",
     "test": "__tests__"
@@ -34,9 +42,7 @@
     "url": "git+https://github.com/AwesomeHamster/koishi-plugin-ffxiv-macrodict.git"
   },
   "scripts": {
-    "build": "yarn build:tsup --minify",
-    "dev": "yarn build:tsup",
-    "build:tsup": "tsup",
+    "build": "atsc",
     "test": "mocha -r tsx -r yml-register --extension .spec.ts ./__tests__",
     "lint": "eslint src/**/*.ts && yarn prettier --check",
     "format": "yarn prettier --write",
@@ -81,6 +87,7 @@
     "@types/pug": "^2.0.6",
     "@typescript-eslint/eslint-plugin": "^7.3.1",
     "@typescript-eslint/parser": "^7.3.1",
+    "atsc": "^2.0.1",
     "chai": "^4.3.4",
     "esbuild-plugin-yaml": "^0.0.1",
     "eslint": "^8.57.0",
@@ -90,14 +97,14 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-promise": "^6.1.1",
     "koishi": "^4.17.2",
-    "koishi-plugin-puppeteer": "^3.3.1",
+    "koishi-plugin-puppeteer": "^3.8.3",
     "markdown-magic": "^2.6.1",
     "mocha": "^9.1.3",
     "prettier": "^2.7.1",
     "tsup": "^8.0.1",
     "tsx": "^4.7.1",
     "typescript": "^5.3.3",
-    "yml-register": "^1.1.0"
+    "yml-register": "^1.2.5"
   },
   "peerDependencies": {
     "koishi": "^4.15.7",
diff --git a/src/config.ts b/src/config.ts
index 7f067b3..afeac49 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -1,5 +1,7 @@
 import { Schema } from 'koishi'
 
+import enUS from './locales/en-US.schema.yml'
+import zhCN from './locales/zh-CN.schema.yml'
 import { Locale, locales } from './utils'
 
 export interface Config {
@@ -15,7 +17,8 @@ export const Config: Schema<Config> = Schema.object({
     .default('auto'),
   threshold: Schema.number().default(3),
 }).i18n({
-  'zh': require('./locales/zh-CN/macrodict.schema.yml'),
-  'zh-CN': require('./locales/zh-CN/macrodict.schema.yml'),
-  'en': require('./locales/en-US/macrodict.schema.yml'),
+  'zh': zhCN,
+  'zh-CN': zhCN,
+  'en': enUS,
+  'en-US': enUS,
 })
diff --git a/src/locales/en-US/macrodict.schema.yml b/src/locales/en-US.schema.yml
similarity index 100%
rename from src/locales/en-US/macrodict.schema.yml
rename to src/locales/en-US.schema.yml
diff --git a/src/locales/en-US/macrodict.yml b/src/locales/en-US.yml
similarity index 100%
rename from src/locales/en-US/macrodict.yml
rename to src/locales/en-US.yml
diff --git a/src/locales/index.ts b/src/locales/index.ts
index cf68949..ba8692a 100644
--- a/src/locales/index.ts
+++ b/src/locales/index.ts
@@ -1,8 +1,11 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
 import { Context } from 'koishi'
 
+import enUS from './en-US.yml'
+import zhCN from './zh-CN.yml'
+
 export function apply(ctx: Context) {
-  ctx.i18n.define('en', require('./en-US/macrodict.yml'))
-  ctx.i18n.define('zh', require('./zh-CN/macrodict.yml'))
-  ctx.i18n.define('zh-CN', require('./zh-CN/macrodict.yml'))
+  ctx.i18n.define('en', enUS)
+  ctx.i18n.define('en-US', enUS)
+  ctx.i18n.define('zh', zhCN)
+  ctx.i18n.define('zh-CN', zhCN)
 }
diff --git a/src/locales/zh-CN/macrodict.schema.yml b/src/locales/zh-CN.schema.yml
similarity index 100%
rename from src/locales/zh-CN/macrodict.schema.yml
rename to src/locales/zh-CN.schema.yml
diff --git a/src/locales/zh-CN/macrodict.yml b/src/locales/zh-CN.yml
similarity index 100%
rename from src/locales/zh-CN/macrodict.yml
rename to src/locales/zh-CN.yml
diff --git a/src/parser.ts b/src/parser.tsx
similarity index 70%
rename from src/parser.ts
rename to src/parser.tsx
index 8986734..d763d40 100644
--- a/src/parser.ts
+++ b/src/parser.tsx
@@ -14,19 +14,19 @@ const keyMap: { [k: string]: string } = {
 /**
  * Parse a macro definition text.
  */
-export function parseMacroDescription(description: string, format: 'html' | 'text' = 'html'): string {
+export function parseMacroDescription(description: string, format: 'html' | 'text' = 'html') {
   const renderer = new Renderer(format)
   let index = 0
-  let result = ''
+  const result: (JSX.IntrinsicElements | string)[] = []
   while (index < description.length) {
     const sub = description.substring(index)
     if (/^\ue070/.test(sub)) {
       // A weird character in Japanese macro description
-      result += '→'
+      result.push('→')
       index += 1
     } else if (/^<Indent\/>/.test(sub)) {
       // The soft indent(?) in French / German macro description
-      result += ' '
+      result.push(' ')
       index += 9
     } else if (/^<SoftHyphen\/>/.test(sub)) {
       // remove soft hyphen that is used in deutschen makro
@@ -43,7 +43,7 @@ export function parseMacroDescription(description: string, format: 'html' | 'tex
       if (!m) {
         throw new Error('parse error')
       }
-      result += renderer.span(m[1], 'highlight')
+      result.push(renderer.span(m[1], 'highlight'))
       index += m[0].length
     } else if (/^<Gui\((\d+)\)\/>/.test(sub)) {
       // replace <Gui(x)/> to corresponding keys
@@ -51,20 +51,20 @@ export function parseMacroDescription(description: string, format: 'html' | 'tex
       if (!m) {
         throw new Error('parse error')
       }
-      result += renderer.kbd(keyMap[m[1]] || m[1])
+      result.push(renderer.kbd(keyMap[m[1]] || m[1]))
       index += m[0].length
     } else if (/^<(\w+)>/.test(sub)) {
       const m = /^<(\w+)>/.exec(sub)
       if (!m) {
         throw new Error('parse error')
       }
-      result += `&lt;${m[1]}&gt;`
+      result.push(`&lt;${m[1]}&gt;`)
       index += m[0].length
     } else if (/^\n/.test(sub)) {
-      result += renderer.br()
+      result.push(renderer.br())
       index += 1
     } else {
-      result += description[index]
+      result.push(description[index])
       index += 1
     }
   }
@@ -79,19 +79,19 @@ class Renderer {
     this.html = format === 'html'
   }
 
-  p(text: string, className?: string): string {
-    return this.html ? `<p${className ? ` class="${className}"` : ''}>${text}</p>` : `${text}\n`
+  p(text: string, className = '') {
+    return this.html ? <p className={className}>{text}</p> : `${text}\n`
   }
 
-  span(text: string, className?: string): string {
-    return this.html ? `<span${className ? ` class="${className}"` : ''}>${text}</span>` : ` ${text} `
+  span(text: string, className = '') {
+    return this.html ? <span className={className}>{text}</span> : ` ${text} `
   }
 
-  kbd(text: string, className?: string): string {
-    return this.html ? `<kbd${className ? ` class="${className}"` : ''}>${text}</kbd>` : `[${text}]`
+  kbd(text: string, className = '') {
+    return this.html ? <kbd className={className}>{text}</kbd> : `[${text}]`
   }
 
-  br(): string {
-    return this.html ? '<br>' : '\n'
+  br() {
+    return this.html ? <br /> : '\n'
   }
 }
diff --git a/src/search.ts b/src/search.tsx
similarity index 69%
rename from src/search.ts
rename to src/search.tsx
index f7d29ad..3a29554 100644
--- a/src/search.ts
+++ b/src/search.tsx
@@ -1,6 +1,6 @@
 import type {} from 'koishi-plugin-puppeteer'
 import { get as getMacro, search as searchMacro, nameToIdMap } from 'ffxiv-textcommand-data'
-import { Context, Element, h, Service } from 'koishi'
+import { Context, Element, Service } from 'koishi'
 
 import { parseMacroDescription } from './parser'
 import { Locale } from './utils'
@@ -45,25 +45,14 @@ export class Search extends Service {
   }
 
   async render(macro: Macro, info: { about: string; copyright: string }, lang: string): Promise<Element> {
-    const { puppeteer } = this.ctx
-
-    if (!puppeteer) {
-      throw new Error('Not found puppeteer.')
-    }
-
     const { name, description } = macro
     const descriptionHtml = parseMacroDescription(description)
 
-    const page = await puppeteer.page()
-
     const { about, copyright } = info
 
-    await page.setContent(`
-<!DOCTYPE html>
-<html lang=${lang}>
-  <head>
-    <meta charset="UTF-8" />
-    <style>
+    return (
+      <html lang={lang}>
+        <style>{`
     body {
       margin: 0;
       padding: 0;
@@ -125,49 +114,22 @@ export class Search extends Service {
     footer > div #about {
       text-align: right;
       line-height: 0.8em;
-    }    
-    </style>
-    <title>Macro</title>
-  </head>
-  <body>
-    <main id="container">
-      <div>
-        <h1 id="macro-name">${name}</h1>
-        <hr />
-      </div>
-      <div id="macro-description">${descriptionHtml}</div>
-    </main>
-    <footer>
-      <div>
-        <div id="copyright">${copyright}</div>
-        <div id="about">${about}</div>
-      </div>
-      <p>
-        FINAL FANTASY XIV © 2010 - 2023 SQUARE ENIX CO., LTD. All Rights Reserved.
-      </p>
-    </footer>
-  </body>
-</html>
-    `)
-
-    // set the viewport to the same size as the page
-    const width = await page.evaluate(() => {
-      const ele = document.body
-      return ele.scrollWidth
-    })
-    await page.setViewport({
-      width,
-      height: 200,
-    })
-
-    // take a screenshot
-    const screenshot = (await page.screenshot({
-      fullPage: true,
-      type: 'png',
-    })) as Buffer
-
-    // don't forget to close the page
-    await page.close()
-    return h.image(screenshot, 'image/png')
+    }`}</style>
+        <main id='container'>
+          <div>
+            <h1 id='macro-name'>{name}</h1>
+            <hr />
+          </div>
+          <div id='macro-description'>{descriptionHtml}</div>
+        </main>
+        <footer>
+          <div>
+            <div id='copyright'>{copyright}</div>
+            <div id='about'>{about}</div>
+          </div>
+          <p>FINAL FANTASY XIV © 2010 - 2023 SQUARE ENIX CO., LTD. All Rights Reserved.</p>
+        </footer>
+      </html>
+    )
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index cb4da45..1fa2bcc 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,8 +1,14 @@
 {
-  "extends": "@hamster-bot/tsconfig",
+  "extends": "@hamster-bot/tsconfig/tsconfig.base.json",
   "compilerOptions": {
-    "outDir": "dist",
-    "types": ["mocha"]
+    "rootDir": "src",
+    "outDir": "lib",
+    "declaration": true,
+    "composite": true,
+    "incremental": true,
+    "types": ["mocha", "yml-register/types"],
+    "jsx": "react-jsx",
+    "jsxImportSource": "@satorijs/element"
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts", "src/**/*.tsx"]
 }