diff --git a/compiler/forget/packages/playground/components/Editor/index.tsx b/compiler/forget/packages/playground/components/Editor/index.tsx
index dd8e8cee3d..3ab6e36ce0 100644
--- a/compiler/forget/packages/playground/components/Editor/index.tsx
+++ b/compiler/forget/packages/playground/components/Editor/index.tsx
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { parse } from "@babel/parser";
+import { parse, ParserPlugin } from "@babel/parser";
 import traverse, { NodePath } from "@babel/traverse";
 import * as t from "@babel/types";
 import {
@@ -39,8 +39,18 @@ function parseFunctions(
 ): Array<NodePath<t.FunctionDeclaration>> {
   const items: Array<NodePath<t.FunctionDeclaration>> = [];
   try {
+    const isFlow = source
+      .trim()
+      .split("\n", 1)[0]
+      .match(/\s*\/\/\s*\@flow\s*/);
+    let type_transform: ParserPlugin;
+    if (isFlow) {
+      type_transform = "flow";
+    } else {
+      type_transform = "typescript";
+    }
     const ast = parse(source, {
-      plugins: ["typescript", "jsx"],
+      plugins: [type_transform, "jsx"],
       sourceType: "module",
     });
     traverse(ast, {
@@ -150,7 +160,7 @@ export default function Editor() {
 
   return (
     <>
-      <div className="flex basis relative top-14">
+      <div className="relative flex basis top-14">
         <div
           style={{ minWidth: 650 }}
           className={clsx("relative sm:basis-1/4")}