diff --git a/misc_docs/syntax/controlflow_ifelse.mdx b/misc_docs/syntax/controlflow_ifelse.mdx
index 3cc3c48d3..4bdbb9ede 100644
--- a/misc_docs/syntax/controlflow_ifelse.mdx
+++ b/misc_docs/syntax/controlflow_ifelse.mdx
@@ -1,5 +1,9 @@
 ---
-test: "foo"
+id: "if-else"
+keywords: ["if", "else"]
+name: "if / else"
+summary: "This is the `if / else` control flow."
+category: "controlflow"
 ---
 
 Use `if / else` expressions to express a value trough a `true` / `false` condition.
diff --git a/package.json b/package.json
index e210e7714..e6774bd40 100644
--- a/package.json
+++ b/package.json
@@ -43,7 +43,7 @@
     "test": "node scripts/test-examples.js && node scripts/test-hrefs.js",
     "check-dead-code": "reanalyze -dce",
     "check-for-exceptions": "reanalyze -exception",
-    "update-index": "node scripts/extract-indices.js && node scripts/extract-tocs.js && node -r esm scripts/generate_feed.js > public/blog/feed.xml",
+    "update-index": "node scripts/extract-indices.js && node scripts/extract-tocs.js && node scripts/extract-syntax.js && node -r esm scripts/generate_feed.js > public/blog/feed.xml",
     "now-build": "yarn run build",
     "export": "next export",
     "start": "next start -p $PORT",
diff --git a/scripts/extract-syntax.js b/scripts/extract-syntax.js
new file mode 100644
index 000000000..22cf0fd7f
--- /dev/null
+++ b/scripts/extract-syntax.js
@@ -0,0 +1,37 @@
+const matter = require("gray-matter");
+const glob = require("glob");
+const path = require("path");
+const fs = require("fs");
+
+const processFile = filepath => {
+  const raw = fs.readFileSync(filepath, "utf8");
+  const { data } = matter(raw);
+
+  const syntaxPath = path.resolve("./misc_docs/syntax");
+  const relFilePath = path.relative(syntaxPath, filepath);
+  const parsedPath = path.parse(relFilePath);
+
+  if (data.id && data.keywords && data.name && data.summary && data.category) {
+    return {
+      file: parsedPath.name,
+      id: data.id,
+      keywords: data.keywords,
+      name: data.name,
+      summary: data.summary,
+      category: data.category
+    }
+  }
+
+  console.error("Metadata missing in " + parsedPath.name + ".mdx")
+  return null;
+};
+
+const extractSyntax = async version => {
+  const SYNTAX_MD_DIR = path.join(__dirname, "../misc_docs/syntax");
+  const SYNTAX_INDEX_FILE = path.join(__dirname, "../index_data/syntax_index.json");
+  const syntaxFiles = glob.sync(`${SYNTAX_MD_DIR}/*.md?(x)`);
+  const syntaxIndex = syntaxFiles.map(processFile).filter(Boolean).sort((a, b) => a.name.localeCompare(b.name))
+  fs.writeFileSync(SYNTAX_INDEX_FILE, JSON.stringify(syntaxIndex), "utf8");
+};
+
+extractSyntax()
diff --git a/src/components/SyntaxLookupWidget.js b/src/components/SyntaxLookupWidget.js
index c7e13ef05..d492d0f6f 100644
--- a/src/components/SyntaxLookupWidget.js
+++ b/src/components/SyntaxLookupWidget.js
@@ -11,23 +11,17 @@ import * as Belt_Array from "bs-platform/lib/es6/belt_Array.js";
 import * as Belt_Option from "bs-platform/lib/es6/belt_Option.js";
 import * as Caml_option from "bs-platform/lib/es6/caml_option.js";
 import * as GithubSlugger from "github-slugger";
-import Decorator_asMdx from "misc_docs/syntax/decorator_as.mdx";
-import Decorator_moduleMdx from "misc_docs/syntax/decorator_module.mdx";
-import Controlflow_ifelseMdx from "misc_docs/syntax/controlflow_ifelse.mdx";
-import Operators_float_additionMdx from "misc_docs/syntax/operators_float_addition.mdx";
-import Operators_float_divisionMdx from "misc_docs/syntax/operators_float_division.mdx";
-import Operators_integer_additionMdx from "misc_docs/syntax/operators_integer_addition.mdx";
-import Operators_integer_divisionMdx from "misc_docs/syntax/operators_integer_division.mdx";
-import Operators_float_subtractionMdx from "misc_docs/syntax/operators_float_subtraction.mdx";
-import Operators_integer_subtractionMdx from "misc_docs/syntax/operators_integer_subtraction.mdx";
-import Operators_float_multiplicationMdx from "misc_docs/syntax/operators_float_multiplication.mdx";
-import Operators_string_concatenationMdx from "misc_docs/syntax/operators_string_concatenation.mdx";
-import Operators_integer_multiplicationMdx from "misc_docs/syntax/operators_integer_multiplication.mdx";
+
+var indexData = (require('index_data/syntax_index.json'));
 
 var render = (function(c) {
       return React.createElement(c, {});
     });
 
+var requireSyntaxFile = (function(name) {
+    return require("misc_docs/syntax/" + name + ".mdx").default
+  });
+
 function toString(t) {
   switch (t) {
     case /* Decorators */0 :
@@ -50,163 +44,37 @@ function SyntaxLookupWidget$Category(Props) {
                 }, title), React.createElement("div", undefined, children));
 }
 
-var allItems = [
-  {
-    id: "module-decorator",
-    keywords: ["@bs.module"],
-    name: "@module",
-    summary: "This is the `@module` decorator.",
-    category: /* Decorators */0,
-    component: Decorator_moduleMdx
-  },
-  {
-    id: "as-decorator",
-    keywords: ["@bs.as"],
-    name: "@as",
-    summary: "This is the `@as` decorator.",
-    category: /* Decorators */0,
-    component: Decorator_asMdx
-  },
-  {
-    id: "if-else",
-    keywords: [
-      "if",
-      "else",
-      "if else"
-    ],
-    name: "if / else",
-    summary: "This is the `if / else` control flow structure.",
-    category: /* ControlFlow */1,
-    component: Controlflow_ifelseMdx
-  },
-  {
-    id: "uncurried-function",
-    keywords: ["uncurried"],
-    name: "(.) => {}",
-    summary: "This is an `uncurried` function.",
-    category: /* Other */3,
-    component: Controlflow_ifelseMdx
-  },
-  {
-    id: "integer-addition",
-    keywords: [
-      "plus",
-      "add",
-      "addition",
-      "sum",
-      "int",
-      "integer"
-    ],
-    name: "+",
-    summary: "This is the `integer addition` operator.",
-    category: /* Operators */2,
-    component: Operators_integer_additionMdx
-  },
-  {
-    id: "integer-subtraction",
-    keywords: [
-      "subtract",
-      "minus",
-      "subtraction",
-      "int",
-      "integer"
-    ],
-    name: "-",
-    summary: "This is the `integer subtraction` operator.",
-    category: /* Operators */2,
-    component: Operators_integer_subtractionMdx
-  },
-  {
-    id: "integer-multiplication",
-    keywords: [
-      "multiply",
-      "multiplication",
-      "int",
-      "integer"
-    ],
-    name: "*",
-    summary: "This is the `integer multiplication` operator.",
-    category: /* Operators */2,
-    component: Operators_integer_multiplicationMdx
-  },
-  {
-    id: "integer-division",
-    keywords: [
-      "divide",
-      "division",
-      "int",
-      "integer"
-    ],
-    name: "/",
-    summary: "This is the `integer division` operator.",
-    category: /* Operators */2,
-    component: Operators_integer_divisionMdx
-  },
-  {
-    id: "float-addition",
-    keywords: [
-      "plus",
-      "add",
-      "addition",
-      "sum",
-      "float"
-    ],
-    name: "+.",
-    summary: "This is the `floating point addition` operator.",
-    category: /* Operators */2,
-    component: Operators_float_additionMdx
-  },
-  {
-    id: "float-subtraction",
-    keywords: [
-      "subtract",
-      "minus",
-      "subtraction",
-      "float"
-    ],
-    name: "-.",
-    summary: "This is the `floating point subtraction` operator.",
-    category: /* Operators */2,
-    component: Operators_float_subtractionMdx
-  },
-  {
-    id: "float-multiplication",
-    keywords: [
-      "multiply",
-      "multiplication",
-      "float"
-    ],
-    name: "*.",
-    summary: "This is the `floating point multiplication` operator.",
-    category: /* Operators */2,
-    component: Operators_float_multiplicationMdx
-  },
-  {
-    id: "float-division",
-    keywords: [
-      "divide",
-      "division",
-      "float"
-    ],
-    name: "/.",
-    summary: "This is the `floating point division` operator.",
-    category: /* Operators */2,
-    component: Operators_float_divisionMdx
-  },
-  {
-    id: "string-concatenation",
-    keywords: [
-      "concat",
-      "concatenation",
-      "add",
-      "string"
-    ],
-    name: "++",
-    summary: "This is the `string concatenation` operator.",
-    category: /* Operators */2,
-    component: Operators_string_concatenationMdx
+function toCategory(s) {
+  switch (s) {
+    case "controlflow" :
+        return /* ControlFlow */1;
+    case "decorators" :
+        return /* Decorators */0;
+    case "operators" :
+        return /* Operators */2;
+    default:
+      return /* Other */3;
   }
-];
+}
+
+function toItem(syntaxData) {
+  var file = syntaxData.file;
+  var id = syntaxData.id;
+  var keywords = syntaxData.keywords;
+  var name = syntaxData.name;
+  var summary = syntaxData.summary;
+  var category = syntaxData.category;
+  return {
+          id: id,
+          keywords: keywords,
+          name: name,
+          summary: summary,
+          category: toCategory(category),
+          component: requireSyntaxFile(file)
+        };
+}
+
+var allItems = Belt_Array.map(indexData, toItem);
 
 var fuseOpts = {
   shouldSort: false,
@@ -481,4 +349,4 @@ export {
   make ,
   
 }
-/* allItems Not a pure module */
+/* indexData Not a pure module */
diff --git a/src/components/SyntaxLookupWidget.res b/src/components/SyntaxLookupWidget.res
index 017110e1f..7918f3938 100644
--- a/src/components/SyntaxLookupWidget.res
+++ b/src/components/SyntaxLookupWidget.res
@@ -1,3 +1,15 @@
+// Structure defined by `scripts/extract-syntax.js`
+type syntaxData = {
+  "file": string,
+  "id": string,
+  "keywords": array<string>,
+  "name": string,
+  "summary": string,
+  "category": string,
+}
+
+let indexData: array<syntaxData> = %raw("require('index_data/syntax_index.json')")
+
 module MdxComp = {
   type props
   type t = Js.t<props> => React.element
@@ -14,41 +26,11 @@ module MdxComp = {
   /* external frontmatter: t => Js.Json.t = "frontmatter" */
 }
 
-@module("misc_docs/syntax/decorator_module.mdx")
-external decorator_module: MdxComp.t = "default"
-
-@module("misc_docs/syntax/decorator_as.mdx")
-external decorator_as: MdxComp.t = "default"
-
-@module("misc_docs/syntax/controlflow_ifelse.mdx")
-external controlflow_ifelse: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_integer_addition.mdx")
-external operators_integer_addition: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_integer_subtraction.mdx")
-external operators_integer_subtraction: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_integer_multiplication.mdx")
-external operators_integer_multiplication: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_integer_division.mdx")
-external operators_integer_division: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_float_addition.mdx")
-external operators_float_addition: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_float_subtraction.mdx")
-external operators_float_subtraction: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_float_multiplication.mdx")
-external operators_float_multiplication: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_float_division.mdx")
-external operators_float_division: MdxComp.t = "default"
-
-@module("misc_docs/syntax/operators_string_concatenation.mdx")
-external operators_string_concatenation: MdxComp.t = "default"
+let requireSyntaxFile: string => MdxComp.t = %raw(`
+  function(name) {
+    return require("misc_docs/syntax/" + name + ".mdx").default
+  }
+`)
 
 module Category = {
   type t = Decorators | ControlFlow | Operators | Other
@@ -81,112 +63,34 @@ type item = {
   component: MdxComp.t,
 }
 
-let allItems = [
-  {
-    id: "module-decorator",
-    keywords: ["@bs.module"],
-    name: "@module",
-    summary: "This is the `@module` decorator.",
-    category: Decorators,
-    component: decorator_module,
-  },
-  {
-    id: "as-decorator",
-    keywords: ["@bs.as"],
-    name: "@as",
-    summary: "This is the `@as` decorator.",
-    category: Decorators,
-    component: decorator_as,
-  },
-  {
-    id: "if-else",
-    keywords: ["if", "else", "if else"],
-    name: "if / else",
-    summary: "This is the `if / else` control flow structure.",
-    category: ControlFlow,
-    component: controlflow_ifelse,
-  },
-  {
-    id: "uncurried-function",
-    keywords: ["uncurried"],
-    name: "(.) => {}",
-    summary: "This is an `uncurried` function.",
-    category: Other,
-    component: controlflow_ifelse,
-  },
-  {
-    id: "integer-addition",
-    keywords: ["plus", "add", "addition", "sum", "int", "integer"],
-    name: "+",
-    summary: "This is the `integer addition` operator.",
-    category: Operators,
-    component: operators_integer_addition,
-  },
-  {
-    id: "integer-subtraction",
-    keywords: ["subtract", "minus", "subtraction", "int", "integer"],
-    name: "-",
-    summary: "This is the `integer subtraction` operator.",
-    category: Operators,
-    component: operators_integer_subtraction,
-  },
-  {
-    id: "integer-multiplication",
-    keywords: ["multiply", "multiplication", "int", "integer"],
-    name: "*",
-    summary: "This is the `integer multiplication` operator.",
-    category: Operators,
-    component: operators_integer_multiplication,
-  },
-  {
-    id: "integer-division",
-    keywords: ["divide", "division", "int", "integer"],
-    name: "/",
-    summary: "This is the `integer division` operator.",
-    category: Operators,
-    component: operators_integer_division,
-  },
-  {
-    id: "float-addition",
-    keywords: ["plus", "add", "addition", "sum", "float"],
-    name: "+.",
-    summary: "This is the `floating point addition` operator.",
-    category: Operators,
-    component: operators_float_addition,
-  },
-  {
-    id: "float-subtraction",
-    keywords: ["subtract", "minus", "subtraction", "float"],
-    name: "-.",
-    summary: "This is the `floating point subtraction` operator.",
-    category: Operators,
-    component: operators_float_subtraction,
-  },
-  {
-    id: "float-multiplication",
-    keywords: ["multiply", "multiplication", "float"],
-    name: "*.",
-    summary: "This is the `floating point multiplication` operator.",
-    category: Operators,
-    component: operators_float_multiplication,
-  },
-  {
-    id: "float-division",
-    keywords: ["divide", "division", "float"],
-    name: "/.",
-    summary: "This is the `floating point division` operator.",
-    category: Operators,
-    component: operators_float_division,
-  },
-  {
-    id: "string-concatenation",
-    keywords: ["concat", "concatenation", "add", "string"],
-    name: "++",
-    summary: "This is the `string concatenation` operator.",
-    category: Operators,
-    component: operators_string_concatenation,
-  },
-]
+let toCategory = (s: string): Category.t => {
+  switch s {
+    | "decorators" => Decorators
+    | "controlflow" => ControlFlow
+    | "operators" => Operators
+    | _ => Other
+  }
+}
+
+let toItem = (syntaxData: syntaxData): item => {
+  let file = syntaxData["file"]
+  let id = syntaxData["id"]
+  let keywords = syntaxData["keywords"]
+  let name = syntaxData["name"]
+  let summary = syntaxData["summary"]
+  let category = syntaxData["category"]
+  let item: item = {
+    id: id,
+    keywords: keywords,
+    name: name,
+    summary: summary,
+    category: toCategory(category),
+    component: requireSyntaxFile(file) 
+  }
+  item
+}
+
+let allItems = indexData->Belt.Array.map(toItem)
 
 let fuseOpts = Fuse.Options.t(
   ~shouldSort=false,