diff --git a/misc_docs/syntax/decorator_as.mdx b/misc_docs/syntax/decorator_as.mdx
index 5926018cc..85eb5cd29 100644
--- a/misc_docs/syntax/decorator_as.mdx
+++ b/misc_docs/syntax/decorator_as.mdx
@@ -1,19 +1,25 @@
 ---
-test: "foo"
+id: "as-decorator"
+keywords: ["as", "decorator"]
+name: "@as"
+summary: "This is the `@as` decorator."
+category: "decorators"
 ---
 
-Use this decorator on record types to alias record names to a different JS attribute name.
+The `@as` decorator is commonly used on record types to alias record field names to a different JavaScript attribute name.
 
-This is mostly useful to map to JS attribute names that cannot be expressed in ReScript (such as keywords).
+This is useful to map to JavaScript attribute names that cannot be expressed in ReScript (such as keywords).
 
 ### Example
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
-```reason
+```res
 type action = {
-  [@bs.as "type"] _type: string,
-};
+  @as("type") type_: string
+}
+
+let action = {type_: "ADD_USER"}
 ```
 
 ```js
@@ -21,6 +27,10 @@ var action = {
   type: "ADD_USER"
 };
 ```
+
 </CodeTab>
 
-Refer to the [Records as Objects](/docs/manual/latest/bind-to-js-object#bind-using-rescript-record) section for a more detailed explanation.
+### References
+
+* [Constrain Arguments Better](/docs/manual/latest/bind-to-js-function#constrain-arguments-better)
+* [Fixed Arguments](/docs/manual/latest/bind-to-js-function#fixed-arguments)
diff --git a/misc_docs/syntax/decorator_deriving.mdx b/misc_docs/syntax/decorator_deriving.mdx
new file mode 100644
index 000000000..a686a3e86
--- /dev/null
+++ b/misc_docs/syntax/decorator_deriving.mdx
@@ -0,0 +1,52 @@
+---
+id: "deriving-decorator"
+keywords: ["deriving", "decorator"]
+name: "@deriving"
+summary: "This is the `@deriving` decorator."
+category: "decorators"
+---
+
+When the `@deriving` decorator is applied to a **record** type,
+it expands the type into a factory function plus a set of
+getter/setter functions for its fields.   
+
+> Note that this is an outdated decorator and you may no longer need to use it.
+> See [Convert Record Type to Abstract Record](/docs/manual/latest/generate-converters-accessors#convert-record-type-to-abstract-record) for more details.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@deriving(abstract)
+type person = {
+  name: string,
+  age: int,
+  job: string,
+}
+
+let joe = person(~name="Joe", ~age=20, ~job="teacher")
+
+let joeName = nameGet(joe)
+let joeAge = ageGet(joe)
+let joeJob = jobGet(joe)
+```
+
+```js
+var joe = {
+  name: "Joe",
+  age: 20,
+  job: "teacher"
+};
+
+var joeName = joe.name;
+var joeAge = joe.age;
+var joeJob = joe.job;
+```
+
+</CodeTab>
+
+### References
+
+* [Convert Record Type to Abstract Record](/docs/manual/latest/generate-converters-accessors#convert-record-type-to-abstract-record)
+
diff --git a/misc_docs/syntax/decorator_get.mdx b/misc_docs/syntax/decorator_get.mdx
new file mode 100644
index 000000000..c3d69e230
--- /dev/null
+++ b/misc_docs/syntax/decorator_get.mdx
@@ -0,0 +1,31 @@
+---
+id: "get-decorator"
+keywords: ["get", "decorator"]
+name: "@get"
+summary: "This is the `@get` decorator."
+category: "decorators"
+---
+
+The `@get` decorator is used to bind to a property of an object.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type window
+@bs.val external window: window = "window"
+@bs.get external getName: window => string = "name"
+
+let name = getName(window)
+```
+
+```js
+var name = window.name;
+```
+
+</CodeTab>
+
+### References
+
+- [Bind using Special `@bs` Getters & Setters](/docs/manual/latest/bind-to-js-object#bind-using-special-bs-getters--setters)
diff --git a/misc_docs/syntax/decorator_get_index.mdx b/misc_docs/syntax/decorator_get_index.mdx
new file mode 100644
index 000000000..8eec67fed
--- /dev/null
+++ b/misc_docs/syntax/decorator_get_index.mdx
@@ -0,0 +1,45 @@
+---
+id: "get-index-decorator"
+keywords: ["get", "index", "decorator"]
+name: "@get_index"
+summary: "This is the `@get_index` decorator."
+category: "decorators"
+---
+
+The `@get_index` decorator is used to access a dynamic property on an object,
+or an index of an array.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type t
+
+@new external create: unit => t = "Object"
+@set_index external set: (t, string, int) => unit = ""
+@get_index external get: (t, string) => int = ""
+
+let o = create()
+o->set("x", 1)
+o->set("y", 3)
+o->set("z", 5)
+
+let value = o->get("y")
+```
+
+```js
+var o = new Object();
+
+o["x"] = 1;
+o["y"] = 3;
+o["z"] = 5;
+
+var value = o["y"];
+```
+
+</CodeTab>
+
+### References
+
+- [Bind using Special `@bs` Getters & Setters](/docs/manual/latest/bind-to-js-object#bind-using-special-bs-getters--setters)
diff --git a/misc_docs/syntax/decorator_inline.mdx b/misc_docs/syntax/decorator_inline.mdx
new file mode 100644
index 000000000..5f630ae19
--- /dev/null
+++ b/misc_docs/syntax/decorator_inline.mdx
@@ -0,0 +1,39 @@
+---
+id: "inline-decorator"
+keywords: ["inline", "decorator"]
+name: "@inline"
+summary: "This is the `@inline` decorator."
+category: "decorators"
+---
+
+The `@inline` decorator tells the compiler to inline its value
+in every place the binding is being used, rather than use a variable.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+module Colors = {
+  @inline
+  let green = "green"
+
+  @inline
+  let red = "red"
+}
+
+let allowedColors = [Colors.green, Colors.red]
+```
+
+```js
+var allowedColors = [
+  "green",
+  "red"
+];
+```
+
+</CodeTab>
+
+### References
+
+- [Inlining Constants](/docs/manual/latest/inlining-constants)
diff --git a/misc_docs/syntax/decorator_int.mdx b/misc_docs/syntax/decorator_int.mdx
new file mode 100644
index 000000000..8cbd6d4ac
--- /dev/null
+++ b/misc_docs/syntax/decorator_int.mdx
@@ -0,0 +1,35 @@
+---
+id: "int-decorator"
+keywords: ["int", "decorator"]
+name: "@int"
+summary: "This is the `@int` decorator."
+category: "decorators"
+---
+
+The `@int` decorator can be used with [polymorphic variants](/docs/manual/latest/polymorphic-variant) and the `@as` decorator on *externals* to modify the compiled JavaScript to use integers for the values instead of strings.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@val external setStatus: @int[
+  @as(0) #NotStarted |
+  @as(1) #Started |
+  @as(2) #Done 
+] => unit = "setStatus"
+
+setStatus(#Done)
+```
+
+```js
+setStatus(2);
+```
+
+</CodeTab>
+
+### References
+
+* [Constrain Arguments Better](/docs/manual/latest/bind-to-js-function#constrain-arguments-better)
+
+
diff --git a/misc_docs/syntax/decorator_meth.mdx b/misc_docs/syntax/decorator_meth.mdx
new file mode 100644
index 000000000..306182d4e
--- /dev/null
+++ b/misc_docs/syntax/decorator_meth.mdx
@@ -0,0 +1,45 @@
+---
+id: "meth-decorator"
+keywords: ["meth", "decorator"]
+name: "@meth"
+summary: "This is the `@meth` decorator."
+category: "decorators"
+---
+
+The `@meth` decorator is used to call a function on a JavaScript object,
+and avoid issues with currying.
+
+### Example
+
+Suppose we have the following JavaScript:
+
+```js
+function say (a, b) {
+  console.log(a, b);
+};
+
+var john = { 
+  say
+};
+```
+
+We can model and bind to this object as follows.
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type person = {@meth "say": (string, string) => unit}
+
+@val external john: person = "john"
+
+john["say"]("hey", "jude")
+```
+
+```js
+john.say("hey", "jude");
+```
+
+</CodeTab>
+
+
+
diff --git a/misc_docs/syntax/decorator_module.mdx b/misc_docs/syntax/decorator_module.mdx
index 4eba66db7..5847a500a 100644
--- a/misc_docs/syntax/decorator_module.mdx
+++ b/misc_docs/syntax/decorator_module.mdx
@@ -1 +1,32 @@
-used for [this](https://google.com) and [that](https://google.com)
+---
+id: "module-decorator"
+keywords: ["module", "decorator"]
+name: "@module"
+summary: "This is the `@module` decorator."
+category: "decorators"
+---
+
+The `@module` decorator is used to bind to a JavaScript module.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@module("path")
+external dirname: string => string = "dirname"
+
+let root = dirname("/User/github")
+```
+
+```js
+var Path = require("path");
+
+var root = Path.dirname("/User/github");
+```
+
+</CodeTab>
+
+### References
+
+* [Import from JavaScript](/docs/manual/latest/import-from-export-to-js#import-from-javascript)
diff --git a/misc_docs/syntax/decorator_new.mdx b/misc_docs/syntax/decorator_new.mdx
index 1a4ed55ee..056a16fcd 100644
--- a/misc_docs/syntax/decorator_new.mdx
+++ b/misc_docs/syntax/decorator_new.mdx
@@ -1,34 +1,32 @@
-This decorator is used whenever you need to bind to a JS class constructor that requires the `new` keword for instantiation.
+---
+id: "new-decorator"
+keywords: ["new", "decorator"]
+name: "@new"
+summary: "This is the `@new` decorator."
+category: "decorators"
+---
+
+The `@new` decorator is used whenever you need to bind to a JavaScript
+class constructor that requires the `new` keword for instantiation.
+
+### Example
 
 <CodeTab labels={["ReScript", "JS Output"]}>
 
 ```res
 type t
-@bs.new external create: unit => t = "Date"
 
-create();
+@new external create: unit => t = "Date"
+
+let now = create()
 ```
 
 ```js
-new Date();
+var now = new Date();
 ```
 
 </CodeTab>
 
-When the object is not available on the global scope, combine it with `@module`:
-
-<CodeTab labels={["ReScript", "JS Output"]}>
-
-```res
-type t;
-@module @bs.new external book: unit => t = "Book";
+### References
 
-let myBook = book();
-```
-
-```js
-var Book = require("Book");
-var myBook = new Book();
-```
-
-</CodeTab>
+* [Bind to a JS Object That's a Class](/docs/manual/latest/bind-to-js-object#bind-to-a-js-object-thats-a-class)
\ No newline at end of file
diff --git a/misc_docs/syntax/decorator_obj.mdx b/misc_docs/syntax/decorator_obj.mdx
new file mode 100644
index 000000000..ae6e14d39
--- /dev/null
+++ b/misc_docs/syntax/decorator_obj.mdx
@@ -0,0 +1,35 @@
+---
+id: "obj-decorator"
+keywords: ["obj", "decorator"]
+name: "@obj"
+summary: "This is the `@obj` decorator."
+category: "decorators"
+---
+
+The `@obj` decorator is used to create functions that return JavaScript objects
+with properties that match the function's parameter labels.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@bs.obj
+external action: (~name: string, unit) => _ = ""
+
+let helloAction = action(~name="Hello")
+```
+
+```js
+function helloAction(param) {
+  return {
+    name: "Hello",
+  }
+}
+```
+
+</CodeTab>
+
+### References
+
+* [Convert External into JS Object Creation Function](/docs/manual/latest/generate-converters-accessors#convert-external-into-js-object-creation-function)
\ No newline at end of file
diff --git a/misc_docs/syntax/decorator_return.mdx b/misc_docs/syntax/decorator_return.mdx
new file mode 100644
index 000000000..3c5da1e31
--- /dev/null
+++ b/misc_docs/syntax/decorator_return.mdx
@@ -0,0 +1,46 @@
+---
+id: "return-decorator"
+keywords: ["return", "decorator"]
+name: "@return"
+summary: "This is the `@return` decorator."
+category: "decorators"
+---
+
+The `@return` decorator is used to control how `null` and `undefined` values are converted to `option` types in ReScript.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type element
+type dom
+
+@send @return(nullable)
+external getElementById: (dom, string) => option<element> = "getElementById"
+
+let test = dom => {
+  let elem = dom->getElementById("haha")
+  switch elem {
+  | None => 1
+  | Some(_) => 2
+  }
+}
+```
+
+```js
+function test(dom) {
+  var elem = dom.getElementById("haha");
+  if (elem == null) {
+    return 1;
+  } else {
+    return 2;
+  }
+}
+```
+
+</CodeTab>
+
+### References
+
+* [Function Nullable Return Value Wrapping](/docs/manual/latest/bind-to-js-function#function-nullable-return-value-wrapping)
\ No newline at end of file
diff --git a/misc_docs/syntax/decorator_scope.mdx b/misc_docs/syntax/decorator_scope.mdx
new file mode 100644
index 000000000..548bd8cee
--- /dev/null
+++ b/misc_docs/syntax/decorator_scope.mdx
@@ -0,0 +1,30 @@
+---
+id: "scope-decorator"
+keywords: ["scope", "decorator"]
+name: "@scope"
+summary: "This is the `@scope` decorator."
+category: "decorators"
+---
+
+The `@scope` decorator is used with other decorators such as `@val` and `@module` to declare a parent scope for the binding.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@scope("Math") @val
+external floor: float => int = "floor"
+
+let result = floor(3.4)
+```
+
+```js
+var result = Math.floor(3.4);
+```
+
+</CodeTab>
+
+### References
+
+* [Global Modules](/docs/manual/latest/bind-to-global-js-values#global-modules)
\ No newline at end of file
diff --git a/misc_docs/syntax/decorator_send.mdx b/misc_docs/syntax/decorator_send.mdx
index b8eafdd7d..74ac8b1b3 100644
--- a/misc_docs/syntax/decorator_send.mdx
+++ b/misc_docs/syntax/decorator_send.mdx
@@ -1 +1,31 @@
-This decorator is used to "send a value" to an instance of an object.
+---
+id: "send-decorator"
+keywords: ["send", "decorator"]
+name: "@send"
+summary: "This is the `@send` decorator."
+category: "decorators"
+---
+
+The `@send` decorator is used to bind to a method on an object.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type document
+@bs.send external getElementById: (document, string) => Dom.element = "getElementById"
+@bs.val external doc: document = "document"
+
+let el = getElementById(doc, "myId")
+```
+
+```js
+var el = document.getElementById("myId");
+```
+
+</CodeTab>
+
+### References
+
+* [Bind to JS Function](/docs/manual/latest/bind-to-js-function)
\ No newline at end of file
diff --git a/misc_docs/syntax/decorator_set.mdx b/misc_docs/syntax/decorator_set.mdx
new file mode 100644
index 000000000..ce2ff896b
--- /dev/null
+++ b/misc_docs/syntax/decorator_set.mdx
@@ -0,0 +1,31 @@
+---
+id: "set-decorator"
+keywords: ["set", "decorator"]
+name: "@set"
+summary: "This is the `@set` decorator."
+category: "decorators"
+---
+
+The `@set` decorator is used to set a property of an object.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type window
+@bs.val external window: window = "window"
+@bs.set external setName: (window, string) => unit = "name"
+
+setName(window, "MyWindow")
+```
+
+```js
+window.name = "MyWindow";
+```
+
+</CodeTab>
+
+### References
+
+- [Bind using Special `@bs` Getters & Setters](/docs/manual/latest/bind-to-js-object#bind-using-special-bs-getters--setters)
diff --git a/misc_docs/syntax/decorator_set_index.mdx b/misc_docs/syntax/decorator_set_index.mdx
new file mode 100644
index 000000000..47d27991a
--- /dev/null
+++ b/misc_docs/syntax/decorator_set_index.mdx
@@ -0,0 +1,45 @@
+---
+id: "set-index-decorator"
+keywords: ["set", "index", decorator"]
+name: "@set_index"
+summary: "This is the `@set_index` decorator."
+category: "decorators"
+---
+
+The `@set_index` decorator is used to set a dynamic property on an object,
+or an index of an array.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type t
+
+@new external create: unit => t = "Object"
+@set_index external set: (t, string, int) => unit = ""
+@get_index external get: (t, string) => int = ""
+
+let o = create()
+o->set("x", 1)
+o->set("y", 3)
+o->set("z", 5)
+
+let value = o->get("y")
+```
+
+```js
+var o = new Object();
+
+o["x"] = 1;
+o["y"] = 3;
+o["z"] = 5;
+
+var value = o["y"];
+```
+
+</CodeTab>
+
+### References
+
+- [Bind using Special `@bs` Getters & Setters](/docs/manual/latest/bind-to-js-object#bind-using-special-bs-getters--setters)
diff --git a/misc_docs/syntax/decorator_string.mdx b/misc_docs/syntax/decorator_string.mdx
new file mode 100644
index 000000000..4b24e7b76
--- /dev/null
+++ b/misc_docs/syntax/decorator_string.mdx
@@ -0,0 +1,33 @@
+---
+id: "string-decorator"
+keywords: ["string", "decorator"]
+name: "@string"
+summary: "This is the `@string` decorator."
+category: "decorators"
+---
+
+The `@string` decorator can be used with [polymorphic variants](/docs/manual/latest/polymorphic-variant) and the `@as` decorator on *externals* to modify the string values used for the variants in the compiled JavaScript.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@val external setStatus: @string[
+  @as("NOT_STARTED") #NotStarted |
+  @as("STARTED") #Started |
+  @as("DONE") #Done 
+] => unit = "setStatus"
+
+setStatus(#NotStarted)
+```
+
+```js
+setStatus("NOT_STARTED");
+```
+
+</CodeTab>
+
+### References
+
+* [Constrain Arguments Better](/docs/manual/latest/bind-to-js-function#constrain-arguments-better)
\ No newline at end of file
diff --git a/misc_docs/syntax/decorator_unboxed.mdx b/misc_docs/syntax/decorator_unboxed.mdx
new file mode 100644
index 000000000..4eb9c7c89
--- /dev/null
+++ b/misc_docs/syntax/decorator_unboxed.mdx
@@ -0,0 +1,35 @@
+---
+id: "unboxed-decorator"
+keywords: ["unboxed", "decorator"]
+name: "@unboxed"
+summary: "This is the `@unboxed` decorator."
+category: "decorators"
+---
+
+The `@unboxed` decorator provides a way to unwrap **variant** constructors
+that have a *single* argument, or **record** objects that have a *single* field.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@unboxed
+type name = Name(string)
+let studentName = Name("Joe")
+
+@unboxed
+type greeting = {message: string}
+let hi = {message: "hello!"}
+```
+
+```js
+var studentName = "Joe";
+var hi = "hello!";
+```
+
+</CodeTab>
+
+### References
+
+* [Unboxed](/docs/manual/latest/unboxed)
\ No newline at end of file
diff --git a/misc_docs/syntax/decorator_unwrap.mdx b/misc_docs/syntax/decorator_unwrap.mdx
new file mode 100644
index 000000000..89337556f
--- /dev/null
+++ b/misc_docs/syntax/decorator_unwrap.mdx
@@ -0,0 +1,35 @@
+---
+id: "unwrap-decorator"
+keywords: ["unwrap", "decorator"]
+name: "@unwrap"
+summary: "This is the `@unwrap` decorator."
+category: "decorators"
+---
+
+The `@unwrap` decorator may be used when binding to external functions
+that accept multiple types for an argument.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@val external padLeft: (
+  @unwrap [#Int(int) | #Str(string)],
+  string
+) => string = "padLeft";
+
+let result1 = padLeft(#Int(7), "eleven");
+let result2 = padLeft(#Str("7"), "eleven");
+```
+
+```js
+var result1 = padLeft(7, "eleven");
+var result2 = padLeft("7", "eleven");
+```
+
+</CodeTab>
+
+### References
+
+* [Modeling Polymorphic Function](/docs/manual/latest/bind-to-js-function#modeling-polymorphic-function)
\ No newline at end of file
diff --git a/misc_docs/syntax/decorator_val.mdx b/misc_docs/syntax/decorator_val.mdx
index 434b0c25b..396621b71 100644
--- a/misc_docs/syntax/decorator_val.mdx
+++ b/misc_docs/syntax/decorator_val.mdx
@@ -1,3 +1,34 @@
-This decorator is used to bind to a value in global scope.
+---
+id: "val-decorator"
+keywords: ["val", "decorator"]
+name: "@val"
+summary: "This is the `@val` decorator."
+category: "decorators"
+---
 
-**Also see:** `@bs.val`
+The `@val` decorator allows you to bind to JavaScript values that are on the global scope.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+type timeoutID
+
+@val
+external setTimeout: (unit => unit, int) => timeoutID = "setTimeout"
+
+let timeoutID = setTimeout(() => Js.log("Hello"), 1000)
+```
+
+```js
+var timeoutID = setTimeout(function (param) {
+  console.log("Hello")
+}, 1000)
+```
+
+</CodeTab>
+
+### References
+
+* [Bind to Global JS Values](/docs/manual/latest/bind-to-global-js-values)
diff --git a/misc_docs/syntax/decorator_variadic.mdx b/misc_docs/syntax/decorator_variadic.mdx
new file mode 100644
index 000000000..78bc14c2d
--- /dev/null
+++ b/misc_docs/syntax/decorator_variadic.mdx
@@ -0,0 +1,30 @@
+---
+id: "variadic-decorator"
+keywords: ["variadic", "decorator"]
+name: "@variadic"
+summary: "This is the `@variadic` decorator."
+category: "decorators"
+---
+
+The `@variadic` decorator is used to model JavaScript functions that take a variable number of arguments, where all arguments are of the same type.
+
+### Example
+
+<CodeTab labels={["ReScript", "JS Output"]}>
+
+```res
+@val @variadic @scope("Math")
+external max: array<int> => int = "max"
+
+let result = max([5, -2, 6, 1])
+```
+
+```js
+var result = Math.max(5, -2, 6, 1);
+```
+
+</CodeTab>
+
+### References
+
+* [Variadic Function Arguments](/docs/manual/latest/bind-to-js-function#variadic-function-arguments)
\ No newline at end of file
diff --git a/pages/syntax-lookup.mdx b/pages/syntax-lookup.mdx
index a132ee277..39a5e8da7 100644
--- a/pages/syntax-lookup.mdx
+++ b/pages/syntax-lookup.mdx
@@ -1,7 +1,7 @@
 ---
 title: "Syntax Lookup"
-description: "Discover ReScript syntax constructs with our discovery tool"
-canonical: "/docs/manual/latest/syntax-discovery"
+description: "Discover ReScript syntax constructs with our lookup tool"
+canonical: "/docs/manual/latest/syntax-lookup"
 ---
 
 import { make as SyntaxLookupWidget } from "src/components/SyntaxLookupWidget"
diff --git a/src/components/SyntaxLookupWidget.js b/src/components/SyntaxLookupWidget.js
index d492d0f6f..7ce88606a 100644
--- a/src/components/SyntaxLookupWidget.js
+++ b/src/components/SyntaxLookupWidget.js
@@ -41,7 +41,9 @@ function SyntaxLookupWidget$Category(Props) {
   var children = Props.children;
   return React.createElement("div", undefined, React.createElement("h3", {
                   className: "font-sans font-medium text-gray-100 tracking-wide text-14 uppercase mb-2"
-                }, title), React.createElement("div", undefined, children));
+                }, title), React.createElement("div", {
+                  className: "flex flex-wrap"
+                }, children));
 }
 
 function toCategory(s) {
@@ -275,7 +277,7 @@ function SyntaxLookupWidget(Props) {
                   };
                   return React.createElement("span", {
                               key: item.name,
-                              className: "first:ml-0 ml-2 cursor-pointer",
+                              className: "mr-2 mb-2 cursor-pointer",
                               onMouseDown: onMouseDown
                             }, React.createElement(SyntaxLookupWidget$Tag, {
                                   text: item.name
diff --git a/src/components/SyntaxLookupWidget.res b/src/components/SyntaxLookupWidget.res
index 7918f3938..ca5c8c3f3 100644
--- a/src/components/SyntaxLookupWidget.res
+++ b/src/components/SyntaxLookupWidget.res
@@ -49,7 +49,7 @@ module Category = {
       <h3 className="font-sans font-medium text-gray-100 tracking-wide text-14 uppercase mb-2">
         {React.string(title)}
       </h3>
-      <div> children </div>
+      <div className="flex flex-wrap"> children </div>
     </div>
   }
 }
@@ -259,7 +259,7 @@ let make = () => {
             ReactEvent.Mouse.preventDefault(evt)
             setState(_ => ShowDetails(item))
           }
-          <span className="first:ml-0 ml-2 cursor-pointer" onMouseDown key=item.name>
+          <span className="mr-2 mb-2 cursor-pointer" onMouseDown key=item.name>
             <Tag text={item.name} />
           </span>
         })