diff --git a/.editorconfig b/.editorconfig
index c6c8b36..0f17867 100644
--- a/.editorconfig
+++ b/.editorconfig
@@ -1,9 +1,9 @@
 root = true
 
 [*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
 charset = utf-8
-trim_trailing_whitespace = true
+end_of_line = lf
+indent_size = 2
+indent_style = space
 insert_final_newline = true
+trim_trailing_whitespace = true
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..80eb13a
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,23 @@
+jobs:
+  main:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: node
+      - run: npm install
+      - run: npm test
+      - uses: JamesIves/github-pages-deploy-action@releases/v4
+        with:
+          branch: gh-pages
+          commit-message: .
+          folder: dest
+          git-config-email: tituswormer@gmail.com
+          git-config-name: Titus Wormer
+          single-commit: true
+name: main
+on:
+  push:
+    branches:
+      - website
diff --git a/.gitignore b/.gitignore
index ebce694..e6c13f1 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,5 +1,9 @@
-.DS_Store
-*.log
+dest/
 node_modules/
+*.d.ts
+*.log
+*.map
+*.tsbuildinfo
+.DS_Store
 yarn.lock
-dest/
+!/types.d.ts
diff --git a/.npmrc b/.npmrc
index 43c97e7..3757b30 100644
--- a/.npmrc
+++ b/.npmrc
@@ -1 +1,2 @@
+ignore-scripts=true
 package-lock=false
diff --git a/.prettierignore b/.prettierignore
index 46c3855..50bbfdc 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,3 @@
 dest/
+*.html
+*.md
diff --git a/.travis.yml b/.travis.yml
deleted file mode 100644
index 9e4b306..0000000
--- a/.travis.yml
+++ /dev/null
@@ -1,12 +0,0 @@
-language: node_js
-node_js: node
-deploy:
-  provider: pages
-  local_dir: dest
-  target_branch: gh-pages
-  skip_cleanup: true
-  github_token: $GITHUB_TOKEN
-  email: tituswormer@gmail.com
-  name: Titus Wormer
-  on:
-    branch: website
diff --git a/package.json b/package.json
index ca6aa9f..91fd313 100644
--- a/package.json
+++ b/package.json
@@ -1,68 +1,45 @@
 {
-  "name": "www-retext-keywords",
-  "private": true,
-  "license": "MIT",
-  "repository": "retextjs/retext-keywords",
-  "bugs": "https://github.com/retextjs/retext-keywords/issues",
   "author": "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)",
-  "contributors": [
-    "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)"
-  ],
-  "devDependencies": {
-    "browserify": "^16.0.0",
-    "cssnano": "^4.0.0",
-    "debounce": "^1.0.0",
-    "global": "^4.0.0",
-    "postcss-cli": "^6.0.0",
-    "postcss-preset-env": "^6.0.0",
-    "prettier": "^1.0.0",
-    "rehype-cli": "^8.0.0",
-    "rehype-preset-minify": "^4.0.0",
-    "rehype-prevent-favicon-request": "^2.0.0",
-    "remark-cli": "^7.0.0",
-    "retext-pos": "^2.0.0",
-    "remark-preset-wooorm": "^6.0.0",
-    "retext-english": "^3.0.0",
-    "retext-keywords": "^5.0.0",
-    "stylelint": "^11.0.0",
-    "stylelint-config-standard": "^19.0.0",
-    "tinyify": "^2.0.0",
-    "unified": "^8.0.0",
-    "vfile": "^4.0.0",
-    "virtual-dom": "^2.0.0",
-    "xo": "^0.25.0"
-  },
-  "scripts": {
-    "format": "remark . -qfo && prettier --write \"**/*.js\" && xo --fix && stylelint src/index.css --fix",
-    "build:js": "browserify src -p tinyify -o dest/index.js",
-    "build:css": "postcss src/index.css -o dest/index.css",
-    "build:html": "rehype -u preset-minify -u prevent-favicon-request src -o dest",
-    "build": "npm run build:js && npm run build:css && npm run build:html",
-    "test": "npm run format && npm run build"
-  },
-  "prettier": {
-    "tabWidth": 2,
-    "useTabs": false,
-    "singleQuote": true,
-    "bracketSpacing": false,
-    "semi": false,
-    "trailingComma": "none"
-  },
-  "xo": {
-    "prettier": true,
-    "esnext": false,
-    "rules": {
-      "unicorn/prefer-node-append": "off"
-    }
-  },
-  "stylelint": {
-    "extends": "stylelint-config-standard"
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",
     "not ie <= 8"
   ],
+  "bugs": "https://github.com/retextjs/retext-keywords/issues",
+  "contributors": [
+    "Titus Wormer <tituswormer@gmail.com> (https://wooorm.com)"
+  ],
+  "devDependencies": {
+    "@types/nlcst": "^2.0.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "cssnano": "^7.0.0",
+    "devlop": "^1.0.0",
+    "esbuild": "^0.24.0",
+    "postcss-cli": "^11.0.0",
+    "postcss-preset-env": "^10.0.0",
+    "prettier": "^3.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "rehype-cli": "^12.0.0",
+    "rehype-preset-minify": "^7.0.0",
+    "rehype-prevent-favicon-request": "^4.0.0",
+    "remark-cli": "^12.0.0",
+    "remark-preset-wooorm": "^10.0.0",
+    "retext-english": "^5.0.0",
+    "retext-keywords": "^8.0.0",
+    "retext-pos": "^5.0.0",
+    "retext-stringify": "^4.0.0",
+    "stylelint": "^16.0.0",
+    "stylelint-config-standard": "^36.0.0",
+    "type-coverage": "^2.0.0",
+    "typescript": "^5.0.0",
+    "unified": "^11.0.0",
+    "vfile": "^6.0.0",
+    "xo": "^0.59.0"
+  },
+  "license": "MIT",
+  "name": "www-retext-keywords",
   "postcss": {
     "plugins": {
       "postcss-preset-env": {},
@@ -71,9 +48,44 @@
       }
     }
   },
+  "prettier": {
+    "bracketSpacing": false,
+    "semi": false,
+    "singleQuote": true,
+    "tabWidth": 2,
+    "trailingComma": "none",
+    "useTabs": false
+  },
+  "private": true,
   "remarkConfig": {
     "plugins": [
-      "preset-wooorm"
+      "remark-preset-wooorm"
     ]
+  },
+  "repository": "retextjs/retext-keywords",
+  "typeCoverage": {
+    "atLeast": 100,
+    "strict": true
+  },
+  "type": "module",
+  "scripts": {
+    "build": "tsc --build --clean && tsc --build && type-coverage",
+    "format": "remark --frail --output --quiet -- . && prettier --log-level warn --write -- . && xo && stylelint src/index.css --fix",
+    "generate:css": "postcss --output dest/index.css -- src/index.css",
+    "generate:html": "rehype --frail --output dest/ --quiet --use rehype-preset-minify --use rehype-prevent-favicon-request -- src/",
+    "generate:js:module": "esbuild src/index.jsx --bundle --conditions=browser,production --define:process.env.NODE_ENV=\\\"production\\\" --format=esm --loader:.js=jsx --log-level=warning --minify --outfile=dest/index.module.js --target=es2020",
+    "generate:js:nomodule": "esbuild src/index.jsx --bundle --conditions=browser,production --define:process.env.NODE_ENV=\\\"production\\\" --loader:.js=jsx --log-level=warning --minify --outfile=dest/index.nomodule.js --target=es6",
+    "generate:js": "npm run generate:js:module && npm run generate:js:nomodule",
+    "generate": "npm run generate:css && npm run generate:html && npm run generate:js",
+    "test": "npm run build && npm run format && npm run generate"
+  },
+  "stylelint": {
+    "extends": "stylelint-config-standard"
+  },
+  "xo": {
+    "prettier": true,
+    "rules": {
+      "logical-assignment-operators": "off"
+    }
   }
 }
diff --git a/readme.md b/readme.md
index c01db49..550e80f 100644
--- a/readme.md
+++ b/readme.md
@@ -4,9 +4,9 @@
 
 ## Related
 
-*   [retext-sentiment](https://github.com/retextjs/retext-sentiment)
-*   [retext-pos](https://github.com/retextjs/retext-pos)
-*   [readability](https://github.com/wooorm/readability)
-*   [write-music](https://github.com/wooorm/write-music)
-*   [common-words](https://github.com/wooorm/common-words)
-*   [short-words](https://github.com/wooorm/short-words)
+* [retext-sentiment](https://github.com/retextjs/retext-sentiment)
+* [retext-pos](https://github.com/retextjs/retext-pos)
+* [readability](https://github.com/wooorm/readability)
+* [write-music](https://github.com/wooorm/write-music)
+* [common-words](https://github.com/wooorm/common-words)
+* [short-words](https://github.com/wooorm/short-words)
diff --git a/src/index.css b/src/index.css
index cb76909..7d873f4 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,15 +1,49 @@
-html {
-  font-family: system-ui;
-  background-color: hsl(0, 0%, 95%);
-  word-break: break-word;
+* {
+  box-sizing: border-box;
+  line-height: calc(1em + 1ex);
+}
+
+a {
+  color: #0367d8;
+  text-decoration: none;
+  transition: 200ms;
+  transition-property: color;
+}
+
+a:focus,
+a:hover,
+a:target {
+  color: inherit;
 }
 
 body {
   margin: 0;
 }
 
+code {
+  font-size: 16px;
+}
+
+h1,
+p {
+  margin-bottom: calc(1em + 1ex);
+  margin-top: calc(1em + 1ex);
+}
+
+h1 {
+  font-size: 3em;
+  font-weight: 100;
+  text-align: center;
+}
+
+html {
+  background-color: hsl(0deg 0% 95%);
+  font-family: system-ui;
+  word-break: break-word;
+}
+
 main {
-  background-color: hsl(0, 0%, 97.5%);
+  background-color: hsl(0deg 0% 97.5%);
   position: relative;
   max-width: 40em;
   margin: 0 auto;
@@ -21,25 +55,17 @@ main > div {
 }
 
 section {
-  margin: calc(2em + 2ex) calc(-2em - 2ex);
-  padding: calc(2em + 2ex);
-  border: 0 solid hsl(214, 13%, 90%);
+  border: 0 solid hsl(214deg 13% 90%);
   border-top-width: 1px;
   border-bottom-width: 1px;
+  margin: calc(2em + 2ex) calc(-2em - 2ex);
+  padding: calc(2em + 2ex);
 }
 
 section + section {
   margin-top: calc(-2em - 2ex - 1px);
 }
 
-section > :first-child {
-  margin-top: 0;
-}
-
-section > :last-child {
-  margin-bottom: 0;
-}
-
 section:first-child {
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;
@@ -54,120 +80,95 @@ section:last-child {
   margin-bottom: 0;
 }
 
-.highlight {
-  background-color: hsl(0, 0%, 100%);
-}
-
-* {
-  line-height: calc(1em + 1ex);
-  box-sizing: border-box;
-}
-
-p,
-h1 {
-  margin-top: calc(1em + 1ex);
-  margin-bottom: calc(1em + 1ex);
-}
-
-h1 {
-  font-size: 3em;
-  font-weight: 100;
-  text-align: center;
-}
-
-a {
-  text-decoration: none;
-  color: #0367d8;
-  transition: 200ms;
-  transition-property: color;
-}
-
-a:hover,
-a:focus,
-a:target {
-  color: inherit;
+section > :first-child {
+  margin-top: 0;
 }
 
-code {
-  font-size: 16px;
+section > :last-child {
+  margin-bottom: 0;
 }
 
 template {
   display: none;
 }
 
-.editor {
-  position: relative;
-  max-width: 100%;
-  overflow: hidden;
-}
-
 textarea,
 .draw {
   /* Can’t use a nice font: kerning renders differently in textareas. */
+  background: transparent;
+  box-sizing: border-box;
+  border: none;
   font-family: monospace;
   font-size: 16px;
+  height: 100%;
   letter-spacing: normal;
   line-height: 1.5;
-  white-space: pre-wrap;
-  word-wrap: break-word;
-  background: transparent;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
   margin: 0;
-  padding: 0;
-  width: 100%;
-  height: 100%;
+  outline: none;
   overflow: hidden;
+  padding: 0;
   resize: none;
-}
-
-.draw {
-  -webkit-print-color-adjust: exact;
-  color: transparent;
+  white-space: pre-wrap;
+  width: 100%;
+  word-wrap: break-word;
 }
 
 textarea {
+  color: inherit;
   position: absolute;
   top: 0;
-  color: inherit;
 }
 
 .credits {
   text-align: center;
 }
 
-@media (min-width: 40em) and (min-height: 20em) {
+.draw {
+  -webkit-print-color-adjust: exact;
+  color: transparent;
+  print-color-adjust: exact;
+}
+
+.editor {
+  overflow: hidden;
+  position: relative;
+  max-width: 100%;
+}
+
+.highlight {
+  background-color: hsl(0deg 0% 100%);
+}
+
+@media (width >= 40em) and (height >= 20em) {
   main {
     /* Go all Tschichold when supported */
-    margin: 11.1vh 22.2vw 22.2vh 11.1vw;
-    border: 1px solid hsl(214, 13%, 90%);
+    border: 1px solid hsl(214deg 13% 90%);
     border-radius: 3px;
+    margin: 11.1vh 22.2vw 22.2vh 11.1vw;
   }
 }
 
 @media (prefers-color-scheme: dark) {
   html {
-    background-color: hsl(214, 13%, 7.5%);
-    color: hsl(214, 13%, 95%);
+    background-color: hsl(214deg 13% 7.5%);
+    color: hsl(214deg 13% 95%);
   }
 
   main {
-    background-color: hsl(214, 13%, 5%);
+    background-color: hsl(214deg 13% 5%);
   }
 
-  @media (min-width: 40em) and (min-height: 20em) {
+  @media (width >= 40em) and (height >= 20em) {
     main {
-      border-color: hsl(214, 13%, 12.5%);
+      border-color: hsl(214deg 13% 12.5%);
     }
   }
 
-  .highlight {
-    background-color: hsl(214, 13%, 2.5%);
+  section {
+    border-color: hsl(214deg 13% 12.5%);
   }
 
-  section {
-    border-color: hsl(214, 13%, 12.5%);
+  .highlight {
+    background-color: hsl(214deg 13% 2.5%);
   }
 }
diff --git a/src/index.html b/src/index.html
index ecaab6c..d56f22e 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,14 +1,14 @@
 <!doctype html>
 <meta charset=utf8>
 <title>retext-keywords</title>
-<meta property=og:title content=retext-keywords>
-<meta name=viewport content=width=device-width,initial-scale=1>
-<meta name=description content="Detect key words and phrases">
-<meta property=og:description content="Detect key words and phrases">
-<meta property=og:image content=https://raw.githubusercontent.com/retextjs/retext-keywords/website/screenshot.png>
-<link rel=stylesheet href=index.css>
+<meta content=retext-keywords property=og:title>
+<meta content=initial-scale=1,width=device-width name=viewport>
+<meta content="Detect key words and phrases" name=description>
+<meta content="Detect key words and phrases" property=og:description>
+<meta content=https://raw.githubusercontent.com/retextjs/retext-keywords/website/screenshot.png property=og:image>
+<link href=index.css rel=stylesheet>
 <main></main>
-<template>Keyword extraction with Retext: First four paragraphs on Term Extraction from Wikipedia.
+<template>Keyword extraction with retext: First four paragraphs on Term Extraction from Wikipedia.
 
 Terminology mining, term extraction, term recognition, or glossary extraction, is a subtask of information extraction. The goal of terminology extraction is to automatically extract relevant terms from a given corpus.
 
@@ -17,4 +17,5 @@
 One of the first steps to model the knowledge domain of a virtual community is to collect a vocabulary of domain-relevant terms, constituting the linguistic surface manifestation of domain concepts. Several methods to automatically extract technical terms from domain-specific document warehouses have been described in the literature.
 
 Typically, approaches to automatic term extraction make use of linguistic processors (part of speech tagging, phrase chunking) to extract terminological candidates, i.e. syntactically plausible terminological noun phrases, NPs (e.g. compounds "credit card", adjective-NPs "local tourist information office", and prepositional-NPs "board of directors" - in English, the first two constructs are the most frequent). Terminological entries are then filtered from the candidate list using statistical and machine learning methods. Once filtered, because of their low ambiguity and high specificity, these terms are particularly useful for conceptualizing a knowledge domain or for supporting the creation of a domain ontology. Furthermore, terminology extraction is a very useful starting point for semantic similarity, knowledge management, human translation and machine translation, etc.</template>
-<script src=index.js></script>
+<script src=index.module.js type=module></script>
+<script nomodule src=index.nomodule.js></script>
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index 6214dc9..0000000
--- a/src/index.js
+++ /dev/null
@@ -1,181 +0,0 @@
-var doc = require('global/document')
-var win = require('global/window')
-var createElement = require('virtual-dom/create-element')
-var diff = require('virtual-dom/diff')
-var patch = require('virtual-dom/patch')
-var h = require('virtual-dom/h')
-var debounce = require('debounce')
-var vfile = require('vfile')
-var unified = require('unified')
-var english = require('retext-english')
-var pos = require('retext-pos')
-var keywords = require('retext-keywords')
-
-var darkQuery = '(prefers-color-scheme: dark)'
-
-var ceil = Math.ceil
-
-var processor = unified()
-  .use(english)
-  .use(pos)
-  .use(keywords)
-  .use(add)
-
-var main = doc.querySelector('main')
-
-var state = {
-  value: doc.querySelector('template').innerHTML
-}
-
-win.matchMedia(darkQuery).addListener(onmediachange)
-
-var tree = render(state)
-var dom = main.appendChild(createElement(tree))
-
-function onchangevalue(ev) {
-  var prev = state.value
-  var next = ev.target.value
-
-  if (prev !== next) {
-    state.value = next
-    onchange()
-  }
-}
-
-function onchange() {
-  var next = render(state)
-  dom = patch(dom, diff(tree, next))
-  tree = next
-}
-
-function render(state) {
-  var file = vfile(state.value)
-  var tree = processor.runSync(processor.parse(file), file)
-  var change = debounce(onchangevalue, 4)
-  var key = 0
-
-  setTimeout(resize, 4)
-
-  return h('div', [
-    h('section.highlight', [h('h1', {key: 'title'}, 'Keywords')]),
-    h('div', {key: 'editor', className: 'editor'}, [
-      h('div', {key: 'draw', className: 'draw'}, pad(all(tree, []))),
-      h('textarea', {
-        key: 'area',
-        value: state.value,
-        oninput: change,
-        onpaste: change,
-        onkeyup: change,
-        onmouseup: change
-      })
-    ]),
-    h('section.credits', {key: 'credits'}, [
-      h('p', [
-        h(
-          'a',
-          {href: 'https://github.com/retextjs/retext-keywords'},
-          'Project'
-        ),
-        ' • ',
-        h(
-          'a',
-          {href: 'https://github.com/retextjs/retext-keywords/tree/website'},
-          'Fork this website'
-        ),
-        ' • ',
-        h(
-          'a',
-          {
-            href:
-              'https://github.com/retextjs/retext-keywords/blob/master/license'
-          },
-          'MIT'
-        ),
-        ' • ',
-        h('a', {href: 'https://wooorm.com'}, '@wooorm')
-      ])
-    ])
-  ])
-
-  function all(node, parentIds) {
-    var children = node.children
-    var length = children.length
-    var index = -1
-    var results = []
-
-    while (++index < length) {
-      results = results.concat(one(children[index], parentIds.concat(index)))
-    }
-
-    return results
-  }
-
-  function one(node, parentIds) {
-    var result = 'value' in node ? node.value : all(node, parentIds)
-    var id = parentIds.join('-') + '-' + key
-    var score = node.data && node.data.score
-
-    if (score !== undefined) {
-      result = h(
-        'span',
-        {key: id, style: {backgroundColor: color(score)}},
-        result
-      )
-      key++
-    }
-
-    return result
-  }
-
-  // Trailing white-space in a `textarea` is shown, but not in a `div` with
-  // `white-space: pre-wrap`.
-  // Add a `br` to make the last line feed explicit.
-  function pad(nodes) {
-    var tail = nodes[nodes.length - 1]
-
-    if (typeof tail === 'string' && tail.charAt(tail.length - 1) === '\n') {
-      nodes.push(h('br', {key: 'break'}))
-    }
-
-    return nodes
-  }
-}
-
-function rows(node) {
-  if (node) {
-    return (
-      ceil(
-        node.getBoundingClientRect().height /
-          parseInt(win.getComputedStyle(node).lineHeight, 10)
-      ) + 1
-    )
-  }
-}
-
-function resize() {
-  dom.querySelector('textarea').rows = rows(dom.querySelector('.draw'))
-}
-
-function color(value) {
-  return 'hsla(133, 62%, 51%, ' + (value / 2).toFixed(2) + ')'
-}
-
-function onmediachange() {
-  onchange()
-}
-
-function add() {
-  this.use(adder)
-
-  function adder() {
-    return transformer
-  }
-
-  function transformer(tree, file) {
-    file.data.keywords.forEach(function(keyword) {
-      keyword.matches.forEach(function(match) {
-        match.node.data.score = keyword.score
-      })
-    })
-  }
-}
diff --git a/src/index.jsx b/src/index.jsx
new file mode 100644
index 0000000..958fa34
--- /dev/null
+++ b/src/index.jsx
@@ -0,0 +1,123 @@
+/* eslint-env browser */
+/// <reference lib="dom" />
+
+/**
+ * @import {Nodes, Parents, Root} from 'nlcst'
+ */
+
+import ReactDom from 'react-dom/client'
+import React from 'react'
+import retextEnglish from 'retext-english'
+import retextKeywords from 'retext-keywords'
+import retextPos from 'retext-pos'
+import {unified} from 'unified'
+import {VFile} from 'vfile'
+
+const $main = /** @type {HTMLElement} */ (document.querySelector('main'))
+const $template = /** @type {HTMLTemplateElement} */ (
+  document.querySelector('template')
+)
+
+const processor = unified()
+  .use(retextEnglish)
+  .use(retextPos)
+  .use(retextKeywords)
+
+const root = ReactDom.createRoot($main)
+
+root.render(React.createElement(Playground))
+
+function Playground() {
+  const [text, setText] = React.useState($template.innerHTML)
+  const file = new VFile(text)
+
+  const tree = /** @type {Root} */ (
+    processor.runSync(processor.parse(file), file)
+  )
+
+  if (file.data.keywords) {
+    for (const keyword of file.data.keywords) {
+      for (const match of keyword.matches) {
+        const data = match.node.data || (match.node.data = {})
+        data.score = keyword.score
+      }
+    }
+  }
+
+  return (
+    <div>
+      <section className="highlight">
+        <h1>
+          <code>retext-keywords</code>
+        </h1>
+      </section>
+      <div className="editor">
+        <div className="draw">
+          {all(tree)}
+          {/* Trailing whitespace in a `textarea` is shown,
+          but not in a `div` with `white-space: pre-wrap`;
+          add a `br` to make the last newline explicit. */}
+          {/\n[ \t]*$/.test(text) ? <br /> : undefined}
+        </div>
+        <textarea
+          className="write"
+          onChange={(event) => setText(event.target.value)}
+          rows={text.split('\n').length + 1}
+          spellCheck="false"
+          value={text}
+        />
+      </div>
+      <section className="credits">
+        <p>
+          <a href="https://github.com/retextjs/retext-keywords">
+            <code>retext-keywords</code>
+          </a>{' '}
+          •{' '}
+          <a href="https://github.com/retextjs/retext-keywords/tree/website">
+            Fork this website
+          </a>{' '}
+          •{' '}
+          <a href="https://github.com/retextjs/retext-keywords/markdown-tm-language/blob/src/license">
+            MIT
+          </a>{' '}
+          • <a href="https://github.com/wooorm">@wooorm</a>
+        </p>
+      </section>
+    </div>
+  )
+}
+
+/**
+ * @param {Parents} parent
+ * @returns {Array<JSX.Element | string>}
+ */
+function all(parent) {
+  /** @type {Array<JSX.Element | string>} */
+  const results = []
+
+  for (const child of parent.children) {
+    const result = one(child)
+    if (Array.isArray(result)) {
+      results.push(...result)
+    } else {
+      results.push(result)
+    }
+  }
+
+  return results
+}
+
+/**
+ * @param {Nodes} node
+ * @returns {Array<JSX.Element | string> | JSX.Element | string}
+ */
+function one(node) {
+  const result = 'value' in node ? node.value : all(node)
+  const score = node.type === 'WordNode' ? node.data?.score : undefined
+
+  if (score === undefined) return result
+
+  const backgroundColor = 'hsla(133, 62%, 51%, ' + (score / 2).toFixed(2) + ')'
+
+  return <span style={{backgroundColor}}>{result}</span>
+}
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..01e9066
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "checkJs": true,
+    "customConditions": ["development"],
+    "declarationMap": true,
+    "declaration": true,
+    "emitDeclarationOnly": true,
+    "exactOptionalPropertyTypes": true,
+    "jsx": "preserve",
+    "lib": ["dom", "es2023"],
+    "module": "node16",
+    "strict": true,
+    "target": "es2023"
+  },
+  "exclude": ["dest/", "node_modules/"],
+  "include": ["**/*.jsx", "**/*.js", "types.d.ts"]
+}
diff --git a/types.d.ts b/types.d.ts
new file mode 100644
index 0000000..34f7221
--- /dev/null
+++ b/types.d.ts
@@ -0,0 +1,12 @@
+declare module 'nlcst' {
+  // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+  interface WordData {
+    /**
+     * Registered by `types.js` from `retext-keywords` (website branch).
+     */
+    score?: number | undefined
+  }
+}
+
+// Turn into a module.
+export {}
diff --git a/types.js b/types.js
new file mode 100644
index 0000000..c172e67
--- /dev/null
+++ b/types.js
@@ -0,0 +1,2 @@
+// Note: types exposed from `types.d.ts`.
+export {}