diff --git a/packages/browser-extension/source/Background/index.ts b/packages/browser-extension/source/Background/index.ts
index 55bef0584..3636f8192 100644
--- a/packages/browser-extension/source/Background/index.ts
+++ b/packages/browser-extension/source/Background/index.ts
@@ -1,6 +1,6 @@
 import "emoji-log"
 import { browser, Runtime } from "webextension-polyfill-ts"
-import { fetchLocalCode } from "../browser/fetchLocalCode"
+import { fetchLocalCode } from "../react-lowcode/devtools/fetchLocalCode"
 
 console.log("hello froom backgroundScript")
 
diff --git a/packages/browser-extension/source/DevToolScript/index.tsx b/packages/browser-extension/source/DevToolScript/index.tsx
index 3265c46bf..7d1b8bd3b 100644
--- a/packages/browser-extension/source/DevToolScript/index.tsx
+++ b/packages/browser-extension/source/DevToolScript/index.tsx
@@ -8,12 +8,12 @@ import { initLocalization } from "../localization/init";
 //@ts-ignore
 import {WCMonacoEditor} from './wcEditor'
 
-import { InspectedElementPayload } from '../devtools'
-import { cloneInspectedElement } from '../cloneInspectedElement'
+import { InspectedElementPayload } from '../react-lowcode/devtools'
+import { cloneInspectedElement } from '../react-lowcode/clone/inspected'
 
 console.log("[lowcode] devtools.js A");
 
-import { io, ioRefreshEditor } from '../util/global'
+import { io, ioRefreshEditor } from '../io/global'
 
 browser.devtools.panels
   .create("Lowcode", "/icon.png", "/devtools.html")
@@ -40,9 +40,9 @@ browser.devtools.panels
 
       
       if (msg?.type == 'lowcodeSources' && panelWindow) {
-        findLocaliozationFiles(msg?.path).then((foundFiles) => {
-          console.log('FOUND C', msg?.path, foundFiles)
-          const msgFiles = foundFiles.filter((file: string) => !file?.endsWith('/package.json') && !file?.endsWith('\\package.json'))
+        findLocaliozationFiles(msg.path, io).then((foundFiles) => {
+          console.log('FOUND C', msg.path, foundFiles)
+          const msgFiles = foundFiles.filter((file: string) => !file?.endsWith('/package.json') && !file?.endsWith('\\package.json')) // TODO exclude parameter in readDirectory
           initLocalization(msgFiles, panelWindow.document, io)
         })
       }
diff --git a/packages/browser-extension/source/InjectScript/index.test.ts b/packages/browser-extension/source/InjectScript/index.test.ts
index 547a93830..494ff3274 100644
--- a/packages/browser-extension/source/InjectScript/index.test.ts
+++ b/packages/browser-extension/source/InjectScript/index.test.ts
@@ -1,12 +1,14 @@
 import ts from "typescript"
-import fs from "fs"
 import {
   astFindSource,
-  jsxElementGetAttributes,
   startOfJsxIdentifier,
   startOfJsxNode,
-} from "../tsx/ast"
-import { findAttributeByName, isValidJsxElement } from "../util/routeHandlers"
+} from "../react-lowcode/ast/find"
+import {
+  jsxElementGetAttributes,
+} from "../react-lowcode/attributes"
+import { isValidJsxElement } from "../react-lowcode/routes/routeHandlers"
+import { findAttributeByName } from "../react-lowcode/attributes"
 
 import { APP_TXS_SAMPLE_CODE }  from './index.testdata'
 
diff --git a/packages/browser-extension/source/InjectScript/index.ts b/packages/browser-extension/source/InjectScript/index.ts
index f48bfe70b..6ecc96822 100644
--- a/packages/browser-extension/source/InjectScript/index.ts
+++ b/packages/browser-extension/source/InjectScript/index.ts
@@ -1,4 +1,4 @@
-import { DevTools, DevToolsHook } from "../devtools"
+import { DevTools, DevToolsHook } from "../react-lowcode/devtools"
 
 console.log("helloworld from content script, som v contentscripte")
 
diff --git a/packages/browser-extension/source/io/cachefs.ts b/packages/browser-extension/source/io/cachefs.ts
index f35826ce4..a48cb3f10 100644
--- a/packages/browser-extension/source/io/cachefs.ts
+++ b/packages/browser-extension/source/io/cachefs.ts
@@ -1,5 +1,5 @@
-import { CodeRW } from './rw'
-import { CodeDir } from './dir'
+import { CodeRW } from '../react-lowcode/io/rw'
+import { CodeDir } from '../react-lowcode/io/dir'
 import { Noop } from './noop'
 
 export class CacheFS implements CodeRW, CodeDir {
diff --git a/packages/browser-extension/source/io/fetchfs.ts b/packages/browser-extension/source/io/fetchfs.ts
index 4a81eea74..de83b71b3 100644
--- a/packages/browser-extension/source/io/fetchfs.ts
+++ b/packages/browser-extension/source/io/fetchfs.ts
@@ -1,10 +1,15 @@
 
-import { CodeRW } from './rw'
-import { CodeDir } from './dir'
-import { fetchLocalCode }  from '../browser/fetchLocalCode'
-import { readFile, writeFile, readDir } from "../util/fetch"
+import { CodeRW } from '../react-lowcode/io/rw'
+import { CodeDir } from '../react-lowcode/io/dir'
+import { fetchLocalCode }  from '../react-lowcode/devtools/fetchLocalCode'
+
+export class FetchFS implements CodeRW, CodeDir {
+    endpoint: string
+    
+    constructor(endpoint: string) {
+        this.endpoint = endpoint
+    }
 
-export class FetchFS implements CodeRW, CodeDir  {
     async readFile(path: string): Promise<string | undefined> {
         if (path.startsWith("file://")) {
            const localRet = await fetchLocalCode(path)
@@ -13,15 +18,26 @@ export class FetchFS implements CodeRW, CodeDir  {
            }
         }
 
-        return readFile(path)
+        const res = await fetch(`${this.endpoint}/files/${path}`)
+        const code = await res.text()
+        return code
     }
 
-    writeFile(path: string, content: string): Promise<void> {
-        return writeFile(path, content)
+    async writeFile(path: string, content: string): Promise<void> {
+        await fetch(`${this.endpoint}/files/${path}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "text/plain",
+          },
+          body: content,
+        })
     }
 
-    readDirectory(path: string, /*extensions?: readonly string[], exclude?: readonly string[], include?: readonly string[], depth?: number*/): Promise<string[] | undefined> {
-        return readDir(path)
+    async readDirectory(path: string, extensions: readonly string[] = [], /*exclude?: readonly string[], include?: readonly string[], depth?: number*/): Promise<string[] | undefined> {
+        const queryString = [extensions.map((ext) => 'ext=' + encodeURI(ext)), 'depth=10'].join('&')
+        const res = await fetch(`${this.endpoint}/dir/${path}?${queryString}`)//extensions
+        const dir = await res.json()
+        return dir
     }
 
 }
diff --git a/packages/browser-extension/source/io/global.ts b/packages/browser-extension/source/io/global.ts
new file mode 100644
index 000000000..505278af5
--- /dev/null
+++ b/packages/browser-extension/source/io/global.ts
@@ -0,0 +1,22 @@
+import { FetchFS, CacheFS } from '.'
+import { CodeRW } from '../react-lowcode/io/rw'
+
+// IMPORT THIS ONLY IN InjectScript/index.ts and DevToolScript.index.ts
+export const io = new CacheFS(new FetchFS('http://localhost:7500'))
+
+export const ioRefreshEditor = withWriteListener(io, (path: string/*, content: string*/) => {
+    console.log('written', path)
+})
+
+function withWriteListener(rw: CodeRW, listener: (path: string, content: string) => void): CodeRW {
+    return {
+        readFile(path: string, encoding?: string): Promise<string | undefined> {
+            return rw.readFile(path, encoding)
+        },
+        writeFile(path: string, content: string) {
+            return rw.writeFile(path, content).then(() => {
+                listener(path, content)
+            })
+        }
+    }
+}
diff --git a/packages/browser-extension/source/io/noop.ts b/packages/browser-extension/source/io/noop.ts
index 52c34ce33..aad35e488 100644
--- a/packages/browser-extension/source/io/noop.ts
+++ b/packages/browser-extension/source/io/noop.ts
@@ -1,5 +1,5 @@
-import { CodeRW } from './rw'
-import { CodeDir } from './dir'
+import { CodeRW } from '../react-lowcode/io/rw'
+import { CodeDir } from '../react-lowcode/io/dir'
 
 export class Noop implements CodeRW, CodeDir {
     readFile(): Promise<string | undefined> {
diff --git a/packages/browser-extension/source/localization/init.ts b/packages/browser-extension/source/localization/init.ts
index 6b6ccb676..cbc2c947b 100644
--- a/packages/browser-extension/source/localization/init.ts
+++ b/packages/browser-extension/source/localization/init.ts
@@ -1,10 +1,10 @@
-import { createAst } from "../tsx/createSourceFile";
+import { createAst } from "../react-lowcode/ast/factory";
 import sk_SK from "../localization/sk_SK";
 import { addNewLocale, changeAllFiles, changeLocaleFile, combineLocales, createDynamicLocales, createTemporaryLocales, getLocaleFilesNames, getValuesFromLocalizationASTJSON, findLocaliozationFiles, saveAllLocalesFromTable, saveAllValuesAndParseBack, saveTableValuesAndParseBack, sendUpdatedFiles, updateFiles } from "../localization/localizations";
 import { createDynamicTable, createMultiTableWithMessages, createTableWithMessages } from "../localization/localeTables";
 import en_EN from "../localization/en_EN";
 import { ScriptTarget, ScriptKind } from "typescript";
-import { CodeRW } from '../io/rw'
+import { CodeRW } from '../react-lowcode/io/rw'
 
 export async function initLocalization(directory: string[], document: HTMLDocument, io: CodeRW) {
     console.log('initLocalization', directory, document, io)
@@ -14,7 +14,7 @@ export async function initLocalization(directory: string[], document: HTMLDocume
     //@ts-ignore
     const fileNames = getLocaleFilesNames(directory)
     console.log("FileNames", fileNames)
-    const temporary = await createTemporaryLocales(fileNames)
+    const temporary = await createTemporaryLocales(fileNames, io)
     console.log("Temporary", temporary)
     //@ts-ignore
     const dynamicLocales = createDynamicLocales(temporary)
diff --git a/packages/browser-extension/source/localization/localizations.test.ts b/packages/browser-extension/source/localization/localizations.test.ts
index cc1ebd940..cde922122 100644
--- a/packages/browser-extension/source/localization/localizations.test.ts
+++ b/packages/browser-extension/source/localization/localizations.test.ts
@@ -1,5 +1,5 @@
 import ts, { ScriptKind, ScriptTarget } from "typescript"
-import { createAst } from "../tsx/createSourceFile"
+import { createAst } from "../react-lowcode/ast/factory"
 import { changeLocaleFile, getValuesFromLocalizationASTJSON } from "./localizations"
 import sk_SK from "./sk_SK"
 
diff --git a/packages/browser-extension/source/localization/localizations.ts b/packages/browser-extension/source/localization/localizations.ts
index 12959a1db..3007a18ee 100644
--- a/packages/browser-extension/source/localization/localizations.ts
+++ b/packages/browser-extension/source/localization/localizations.ts
@@ -1,12 +1,8 @@
 import { SourceFile, factory, ScriptKind, ScriptTarget, createSourceFile, Printer } from "typescript"
-import sk_SK from "./sk_SK";
 import { Message, MultiMessage } from "./localizationInterfaces";
-import { createAst } from "../tsx/createSourceFile";
-import { readDir, readFile } from "../util/fetch"
-import * as path from 'path'
-import { CodeRW } from "../io/rw";
-
-
+import { createAst } from "../react-lowcode/ast/factory";
+import { CodeRW } from "../react-lowcode/io/rw";
+import { CodeDir } from "../react-lowcode/io/dir";
 
 export function getValuesFromLocalizationASTJSON(astLocale: SourceFile | undefined, languageLocale = "sk_SK") {
   let localeMessages: Message[] = []
@@ -16,7 +12,7 @@ export function getValuesFromLocalizationASTJSON(astLocale: SourceFile | undefin
         id: property.name.text,
         value: property.initializer?.text,
         locale: languageLocale,
-        position: { pos: property.initializer.pos, end: property.initializer.end }
+        position: { pos: property.initializer?.pos, end: property.initializer?.end }
       }
       localeMessages = [...localeMessages, locale]
     })
@@ -58,13 +54,9 @@ export const changeLocaleFile = (localeFile: string, changedMessages: Message[],
 
 const JSON_EXTENSION = '.json'
 
-export const findLocaliozationFiles = async (pathToDir: string) => {
-  try {
-    const dir = await readDir(pathToDir, [JSON_EXTENSION]).catch((err) => console.log("Error", err))
-    return dir
-  } catch (error) {
-    console.log("Error", error)
-  }
+export const findLocaliozationFiles = async (pathToDir: string, io: CodeDir) => {
+  const dir = await io.readDirectory(pathToDir, [JSON_EXTENSION]).catch((err) => console.log("Error", err))
+  return dir || []
 }
 
 export const getLocaleFilesNames = (directory: string[]) => {
@@ -79,10 +71,10 @@ interface FileNameSource {
   readonly source: string 
 }
 
-export const createTemporaryLocales = async (fileNames: string[]): Promise<FileNameSource[]> => {
-  const allFiles = fileNames.map(fileName => readFile(fileName))
+export const createTemporaryLocales = async (fileNames: string[], io: CodeRW): Promise<FileNameSource[]> => {
+  const allFiles = fileNames.map(fileName => io.readFile(fileName))
   const filesObjects = fileNames.map(async (file: string, index: number) => {
-    return { locale: file, source: await allFiles[index] }
+    return { locale: file, source: await allFiles[index] || '' }
   })
   return Promise.all(filesObjects)
 }
diff --git a/packages/browser-extension/source/tsx/createSourceFile.ts b/packages/browser-extension/source/react-lowcode/ast/factory.ts
similarity index 100%
rename from packages/browser-extension/source/tsx/createSourceFile.ts
rename to packages/browser-extension/source/react-lowcode/ast/factory.ts
diff --git a/packages/browser-extension/source/tsx/ast.ts b/packages/browser-extension/source/react-lowcode/ast/find.ts
similarity index 76%
rename from packages/browser-extension/source/tsx/ast.ts
rename to packages/browser-extension/source/react-lowcode/ast/find.ts
index ab9861a68..e472a0dd3 100644
--- a/packages/browser-extension/source/tsx/ast.ts
+++ b/packages/browser-extension/source/react-lowcode/ast/find.ts
@@ -1,5 +1,5 @@
 import ts from "typescript"
-import { createAst } from "./createSourceFile"
+import { createAst } from "./factory"
 
 export interface SourceLineCol {
   fileName: string
@@ -81,26 +81,14 @@ export function astFindSource(code: string, source: SourceLineCol) {
   return null
 }
 
-export const jsxElementGetAttributes = (node: ts.JsxOpeningLikeElement) => {
-  const attributes: Array<Attribute> = []
+export const findElementInCode = (code: string, source: SourceLineCol) => {
+  const found = astFindSource(code, source)
+  if (found) {
+    const before = code.substring(0, found.end)
 
-  node.attributes.forEachChild((a: unknown) => {
-    const attribute = a as ts.JsxAttribute
-    const { initializer } = attribute
-
-    if (!initializer) return
-
-    if (initializer && ts.isStringLiteral(initializer)) {
-      attributes.push({
-        [attribute.name.text]: initializer.text,
-      })
-    } else if (initializer && ts.isJsxExpression(initializer)) {
-      attributes.push({
-        [attribute.name.text]:
-          //@ts-ignore
-          initializer.expression?.escapedText,
-      })
-    }
-  })
-  return attributes
+    const startEndOfLine = before.lastIndexOf("\n")
+    const lineStarts = startEndOfLine >= 0 ? startEndOfLine : 0
+    return code.substring(lineStarts, found.end)
+  }
+  return null
 }
diff --git a/packages/browser-extension/source/tsx/transformer.ts b/packages/browser-extension/source/react-lowcode/ast/transformer.ts
similarity index 93%
rename from packages/browser-extension/source/tsx/transformer.ts
rename to packages/browser-extension/source/react-lowcode/ast/transformer.ts
index d709de1c9..5269ee022 100644
--- a/packages/browser-extension/source/tsx/transformer.ts
+++ b/packages/browser-extension/source/react-lowcode/ast/transformer.ts
@@ -1,5 +1,5 @@
 import ts from "typescript"
-import { wrapNodesWithFragment } from "../util/nodeCreators"
+import { wrapNodesWithFragment } from "../routes/factory"
 
 const addTransformer = <T extends ts.Node, U extends ts.Node | ts.JsxChild>(
   start: number,
diff --git a/packages/browser-extension/source/react-lowcode/attributes/index.ts b/packages/browser-extension/source/react-lowcode/attributes/index.ts
new file mode 100644
index 000000000..23776ff8a
--- /dev/null
+++ b/packages/browser-extension/source/react-lowcode/attributes/index.ts
@@ -0,0 +1,34 @@
+import ts from "typescript"
+import { Attribute } from "../ast/find"
+
+export const findAttributeByName = (
+  attributes: Array<Attribute>,
+  attributeName: string
+) => {
+  const attribute = attributes.find(a => a[attributeName])
+  return attribute ? attribute[attributeName] : null
+}
+
+export const jsxElementGetAttributes = (node: ts.JsxOpeningLikeElement) => {
+    const attributes: Array<Attribute> = []
+  
+    node.attributes.forEachChild((a: unknown) => {
+      const attribute = a as ts.JsxAttribute
+      const { initializer } = attribute
+  
+      if (!initializer) return
+  
+      if (initializer && ts.isStringLiteral(initializer)) {
+        attributes.push({
+          [attribute.name.text]: initializer.text,
+        })
+      } else if (initializer && ts.isJsxExpression(initializer)) {
+        attributes.push({
+          [attribute.name.text]:
+            //@ts-ignore
+            initializer.expression?.escapedText,
+        })
+      }
+    })
+    return attributes
+  }
\ No newline at end of file
diff --git a/packages/browser-extension/source/tsx/clone.ts b/packages/browser-extension/source/react-lowcode/clone/clone.ts
similarity index 74%
rename from packages/browser-extension/source/tsx/clone.ts
rename to packages/browser-extension/source/react-lowcode/clone/clone.ts
index 38b20a3f4..f6e1b6e2d 100644
--- a/packages/browser-extension/source/tsx/clone.ts
+++ b/packages/browser-extension/source/react-lowcode/clone/clone.ts
@@ -1,20 +1,8 @@
 import ts from "typescript"
-import { SourceLineCol, astFindSource } from "./ast"
-import { createAst } from "./createSourceFile"
-import { isInsideMapPatternFunction } from "./mapRecognition"
-import { addElementsToAST } from "./transformer"
-
-export const findElementInCode = (code: string, source: SourceLineCol) => {
-  const found = astFindSource(code, source)
-  if (found) {
-    const before = code.substring(0, found.end)
-
-    const startEndOfLine = before.lastIndexOf("\n")
-    const lineStarts = startEndOfLine >= 0 ? startEndOfLine : 0
-    return code.substring(lineStarts, found.end)
-  }
-  return null
-}
+import { SourceLineCol, astFindSource } from "../ast/find"
+import { createAst } from "../ast/factory"
+import { isInsideMapPatternFunction } from "../functions/maps"
+import { addElementsToAST } from "../ast/transformer"
 
 export const addCodeSnippet = (
   code: string,
diff --git a/packages/browser-extension/source/cloneInspectedElement.ts b/packages/browser-extension/source/react-lowcode/clone/inspected.ts
similarity index 83%
rename from packages/browser-extension/source/cloneInspectedElement.ts
rename to packages/browser-extension/source/react-lowcode/clone/inspected.ts
index be37cc0ab..13df0d595 100644
--- a/packages/browser-extension/source/cloneInspectedElement.ts
+++ b/packages/browser-extension/source/react-lowcode/clone/inspected.ts
@@ -1,8 +1,7 @@
-import { cloneRoute, cloneElement } from "./cloneElements"
-import { InspectedElementPayload } from "./devtools"
-import { readFile } from "./util/fetch"
+import { cloneRoute, cloneElement } from "./source"
+import { InspectedElementPayload } from "../devtools"
 
-import { CodeRW } from "./io/rw"
+import { CodeRW } from "../io/rw"
 
 export async function cloneInspectedElement(inspectedElement: InspectedElementPayload, io: CodeRW) {  
   console.log('cloneInspectedElement A', inspectedElement)
@@ -16,9 +15,9 @@ export async function cloneInspectedElement(inspectedElement: InspectedElementPa
     console.log('cloneInspectedElement B', ownerList, columnNumber, fileName, lineNumber, event)
     
     if (ownerList && columnNumber && fileName && lineNumber) {
-      const code = await readFile(fileName).catch(err => {
+      const code = await io.readFile(fileName).catch(err => {
         throw new Error(err)
-      })
+      }) || ''
       
       if (ownerList[ownerList.length - 1].displayName === "Route") {
         cloneRoute(code, { columnNumber, lineNumber, fileName }, io)
diff --git a/packages/browser-extension/source/cloneElements.ts b/packages/browser-extension/source/react-lowcode/clone/source.ts
similarity index 84%
rename from packages/browser-extension/source/cloneElements.ts
rename to packages/browser-extension/source/react-lowcode/clone/source.ts
index 0ba748c00..ef98e5132 100644
--- a/packages/browser-extension/source/cloneElements.ts
+++ b/packages/browser-extension/source/react-lowcode/clone/source.ts
@@ -1,24 +1,12 @@
 import { Project } from "ts-morph"
 import ts from "typescript"
-import {
-  SourceLineCol,
-  astFindSource,
-  jsxElementGetAttributes,
-  startOfJsxNode,
-} from "./tsx/ast"
-import { cloneElementInAst } from "./tsx/clone"
-import { createAst } from "./tsx/createSourceFile"
-import { writeFile, readFile } from "./util/fetch"
-import {
-  renameFunctionWithMorph,
-} from "./util/morphFunctions"
-import {
-  isValidJsxElement,
-  castRouteNodeToProperType,
-  findAttributeByName,
-  cloneRouteElements,
-} from "./util/routeHandlers"
-import { CodeRW } from "./io/rw"
+import { SourceLineCol, astFindSource, startOfJsxNode } from "../ast/find"
+import { jsxElementGetAttributes, findAttributeByName } from "../attributes"
+import { cloneElementInAst } from "./clone"
+import { createAst } from "../ast/factory"
+import { renameFunctionWithMorph } from "../functions/rename"
+import { isValidJsxElement, castRouteNodeToProperType, cloneRouteElements, } from "../routes/routeHandlers"
+import { CodeRW } from "../io/rw"
 
 export const cloneRoute = async (routesCode: string, routesSource: SourceLineCol, io: CodeRW) => {
   // Prompt for new page name
@@ -83,7 +71,7 @@ export const cloneRoute = async (routesCode: string, routesSource: SourceLineCol
   }
 
   // write only if previous steps were successful
-  writeFile(routesSource.fileName, newRoutesFile.print())
+  io.writeFile(routesSource.fileName, newRoutesFile.print())
 }
 
 export const cloneElement = (code: string, source: SourceLineCol, io: CodeRW) => {
diff --git a/packages/browser-extension/source/browser/fetchLocalCode.ts b/packages/browser-extension/source/react-lowcode/devtools/fetchLocalCode.ts
similarity index 100%
rename from packages/browser-extension/source/browser/fetchLocalCode.ts
rename to packages/browser-extension/source/react-lowcode/devtools/fetchLocalCode.ts
diff --git a/packages/browser-extension/source/devtools.ts b/packages/browser-extension/source/react-lowcode/devtools/index.ts
similarity index 100%
rename from packages/browser-extension/source/devtools.ts
rename to packages/browser-extension/source/react-lowcode/devtools/index.ts
diff --git a/packages/browser-extension/source/util/code.ts b/packages/browser-extension/source/react-lowcode/functions/maps.test.ts
similarity index 79%
rename from packages/browser-extension/source/util/code.ts
rename to packages/browser-extension/source/react-lowcode/functions/maps.test.ts
index 287cc1d40..1bef98a2e 100644
--- a/packages/browser-extension/source/util/code.ts
+++ b/packages/browser-extension/source/react-lowcode/functions/maps.test.ts
@@ -1,4 +1,7 @@
-export const functionalComponent = `import React from "react"
+import { astFindStart } from "../ast/find"
+import { isInsideMapPatternFunction } from "./maps"
+
+const functionalComponent = `import React from "react"
 
 function cl() {
   const arr = [1, 2, 3]
@@ -47,3 +50,9 @@ function cl() {
 
 export default cl
 `
+
+test("should ", () => {
+  const node = astFindStart(functionalComponent, 196)
+
+  expect(isInsideMapPatternFunction(node!)).toBeTruthy()
+})
diff --git a/packages/browser-extension/source/tsx/mapRecognition.ts b/packages/browser-extension/source/react-lowcode/functions/maps.ts
similarity index 69%
rename from packages/browser-extension/source/tsx/mapRecognition.ts
rename to packages/browser-extension/source/react-lowcode/functions/maps.ts
index b6f08536f..659c1ef41 100644
--- a/packages/browser-extension/source/tsx/mapRecognition.ts
+++ b/packages/browser-extension/source/react-lowcode/functions/maps.ts
@@ -1,22 +1,11 @@
 import ts from "typescript"
 
-export const isReturnOfFunctionExpression = (node: ts.Node) =>
-  ts.isBlock(node.parent) &&
-  ts.isFunctionExpression(node.parent.parent) &&
-  ts.isCallExpression(node.parent.parent.parent)
-
-export const isReturnOfArrowFunction = (node: ts.Node) =>
-  ts.isBlock(node.parent) &&
-  ts.isArrowFunction(node.parent.parent) &&
-  ts.isCallExpression(node.parent.parent.parent)
-
-export const isReturnlessArrowFunction = (node: ts.Node) =>
-  ts.isCallExpression(node.parent)
+import { isReturnOfFunctionExpression, isReturnOfArrowFunction, isReturnlessArrowFunction } from './returns'
 
 export const isMapFunctionPatternInJsx = (node: ts.Node) =>
   ((isReturnOfFunctionExpression(node) || isReturnOfArrowFunction(node)) &&
     ts.isJsxExpression(node.parent.parent.parent.parent)) ||
-  (isReturnlessArrowFunction(node) && ts.isJsxExpression(node.parent.parent))
+  (isReturnlessArrowFunction(node) && ts.isJsxExpression(node.parent.parent));
 
 export const isMapFunctionPatternInAnotherFunction = (node: ts.Node) =>
   ((isReturnOfFunctionExpression(node) || isReturnOfArrowFunction(node)) &&
@@ -24,7 +13,8 @@ export const isMapFunctionPatternInAnotherFunction = (node: ts.Node) =>
       ts.isReturnStatement(node.parent.parent.parent.parent))) ||
   (isReturnlessArrowFunction(node) &&
     (ts.isArrowFunction(node.parent.parent) ||
-      ts.isReturnStatement(node.parent.parent)))
+      ts.isReturnStatement(node.parent.parent)));
+
 
 export const isInsideMapPatternFunction = (node: ts.Node) => {
   let pointer = node
diff --git a/packages/browser-extension/source/react-lowcode/functions/rename.ts b/packages/browser-extension/source/react-lowcode/functions/rename.ts
new file mode 100644
index 000000000..7ce7480fe
--- /dev/null
+++ b/packages/browser-extension/source/react-lowcode/functions/rename.ts
@@ -0,0 +1,13 @@
+import { Project } from "ts-morph"
+
+export const renameFunctionWithMorph = (
+  project: Project,
+  code: string,
+  functionName: string,
+  newFunctionName: string
+) => {
+  const newProject = project.createSourceFile(`${newFunctionName}.tsx`, code)
+  const mainFunction = newProject.getFunction(functionName)
+  mainFunction?.rename(newFunctionName)
+  return newProject
+}
diff --git a/packages/browser-extension/source/react-lowcode/functions/returns.ts b/packages/browser-extension/source/react-lowcode/functions/returns.ts
new file mode 100644
index 000000000..e0cea8b53
--- /dev/null
+++ b/packages/browser-extension/source/react-lowcode/functions/returns.ts
@@ -0,0 +1,14 @@
+import ts from "typescript";
+
+export const isReturnOfFunctionExpression = (node: ts.Node) =>
+  ts.isBlock(node.parent) &&
+  ts.isFunctionExpression(node.parent.parent) &&
+  ts.isCallExpression(node.parent.parent.parent);
+
+export const isReturnOfArrowFunction = (node: ts.Node) =>
+  ts.isBlock(node.parent) &&
+  ts.isArrowFunction(node.parent.parent) &&
+  ts.isCallExpression(node.parent.parent.parent);
+
+export const isReturnlessArrowFunction = (node: ts.Node) =>
+  ts.isCallExpression(node.parent);
diff --git a/packages/browser-extension/source/io/dir.ts b/packages/browser-extension/source/react-lowcode/io/dir.ts
similarity index 73%
rename from packages/browser-extension/source/io/dir.ts
rename to packages/browser-extension/source/react-lowcode/io/dir.ts
index 9f4dd9994..5ce9cd8aa 100644
--- a/packages/browser-extension/source/io/dir.ts
+++ b/packages/browser-extension/source/react-lowcode/io/dir.ts
@@ -1,6 +1,6 @@
     
 export interface CodeDir {
-    readDirectory(path: string, /*extensions?: readonly string[], exclude?: readonly string[], include?: readonly string[], depth?: number*/): Promise<string[] | undefined>
+    readDirectory(path: string, extensions?: readonly string[], exclude?: readonly string[], include?: readonly string[], depth?: number): Promise<string[] | undefined>
 
     // getCurrentDirectory: () => "/",
     //
diff --git a/packages/browser-extension/source/io/rw.ts b/packages/browser-extension/source/react-lowcode/io/rw.ts
similarity index 100%
rename from packages/browser-extension/source/io/rw.ts
rename to packages/browser-extension/source/react-lowcode/io/rw.ts
diff --git a/packages/browser-extension/source/io/watch.ts b/packages/browser-extension/source/react-lowcode/io/watch.ts
similarity index 100%
rename from packages/browser-extension/source/io/watch.ts
rename to packages/browser-extension/source/react-lowcode/io/watch.ts
diff --git a/packages/browser-extension/source/util/nodeCreators.ts b/packages/browser-extension/source/react-lowcode/routes/factory.ts
similarity index 100%
rename from packages/browser-extension/source/util/nodeCreators.ts
rename to packages/browser-extension/source/react-lowcode/routes/factory.ts
diff --git a/packages/browser-extension/source/util/routeHandlers.ts b/packages/browser-extension/source/react-lowcode/routes/routeHandlers.ts
similarity index 75%
rename from packages/browser-extension/source/util/routeHandlers.ts
rename to packages/browser-extension/source/react-lowcode/routes/routeHandlers.ts
index fc5a81b3f..f8bea645a 100644
--- a/packages/browser-extension/source/util/routeHandlers.ts
+++ b/packages/browser-extension/source/react-lowcode/routes/routeHandlers.ts
@@ -1,21 +1,13 @@
 import ts from "typescript"
-import { Attribute } from "../tsx/ast"
-import { addElementsToAST } from "../tsx/transformer"
+import { addElementsToAST } from "../ast/transformer"
 import {
   createSelfClosingJsxRouteElement,
   createOpeningAndClosingJsxRouteElement,
-} from "./nodeCreators"
+} from "./factory"
 
 export const isValidJsxElement = (node: ts.Node) =>
   ts.isJsxOpeningLikeElement(node) || ts.isJsxElement(node)
 
-export const findAttributeByName = (
-  attributes: Array<Attribute>,
-  attributeName: string
-) => {
-  const attribute = attributes.find(a => a[attributeName])
-  return attribute ? attribute[attributeName] : null
-}
 export const castRouteNodeToProperType = (node: ts.Node) => {
   const castedNode = node as ts.JsxOpeningLikeElement | ts.JsxElement
   if (ts.isJsxOpeningLikeElement(castedNode)) {
diff --git a/packages/browser-extension/source/tsx/mapRecognition.test.ts b/packages/browser-extension/source/tsx/mapRecognition.test.ts
deleted file mode 100644
index a0d281b69..000000000
--- a/packages/browser-extension/source/tsx/mapRecognition.test.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { functionalComponent } from "../util/code"
-import { astFindStart } from "./ast"
-import { isInsideMapPatternFunction } from "./mapRecognition"
-
-test("should ", () => {
-  const node = astFindStart(functionalComponent, 196)
-
-  expect(isInsideMapPatternFunction(node!)).toBeTruthy()
-})
diff --git a/packages/browser-extension/source/util/fetch.ts b/packages/browser-extension/source/util/fetch.ts
deleted file mode 100644
index d3d4d785e..000000000
--- a/packages/browser-extension/source/util/fetch.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export const writeFile = async (filePath: string, code: string) => {
-  try {
-    const res = await fetch(`http://localhost:7500/files/${filePath}`, {
-      method: "PUT",
-      headers: {
-        "Content-Type": "text/plain",
-      },
-      body: code,
-    })
-    console.log(await res.text())
-  } catch (err) {
-    throw new Error(err)
-  }
-}
-export const readFile = async (filePath: string) => {
-  try {
-    const res = await fetch(`http://localhost:7500/files/${filePath}`)
-    const code = await res.text()
-    return code
-  } catch (err) {
-    throw new Error(err)
-  }
-}
-
-export const readDir = async (dirPath: string, extensions: string[] = []) => {
-  try {
-    const queryString = [extensions.map((ext) => 'ext=' + encodeURI(ext)), 'depth=10'].join('&')
-    const res = await fetch(`http://localhost:7500/dir/${dirPath}?${queryString}`)//extensions
-    const dir = await res.json()
-    return dir
-  } catch (err) {
-    throw new Error(err)
-  }
-}
diff --git a/packages/browser-extension/source/util/global.ts b/packages/browser-extension/source/util/global.ts
deleted file mode 100644
index 22b7013c1..000000000
--- a/packages/browser-extension/source/util/global.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { FetchFS, CacheFS } from '../io'
-import { CodeRW } from '../io/rw'
-
-// IMPORT THIS ONLY IN InjectScript/index.ts and DevToolScript.index.ts
-export const io = new CacheFS(new FetchFS())
-
-export const ioRefreshEditor = withWriteListener(io, (path: string/*, content: string*/) => {
-    console.log('written', path)
-})
-
-function withWriteListener(rw: CodeRW, listener: (path: string, content: string) => void): CodeRW {
-    return { ... rw, writeFile: (path: string, content: string) => {
-        return rw.writeFile(path, content).then(() => {
-            listener(path, content)
-        })
-    }}
-}
diff --git a/packages/browser-extension/source/util/morphFunctions.ts b/packages/browser-extension/source/util/morphFunctions.ts
deleted file mode 100644
index 4316d76b7..000000000
--- a/packages/browser-extension/source/util/morphFunctions.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Project, SourceFile, SyntaxKind } from "ts-morph"
-
-export const renameFunctionWithMorph = (
-  project: Project,
-  code: string,
-  functionName: string,
-  newFunctionName: string
-) => {
-  const newProject = project.createSourceFile(`${newFunctionName}.tsx`, code)
-  const mainFunction = newProject.getFunction(functionName)
-  mainFunction?.rename(newFunctionName)
-  return newProject
-}
-
-// TODO This function has to be more flexible and it has to account for
-// usecase in which function keyword is used in component declaration
-export const addPathButtonWithMorph = (
-  file: SourceFile,
-  newPageName: string
-) => {
-  const jsxElement = file
-    .getVariableDeclarationOrThrow("IonicApp")
-    .getFirstChildByKindOrThrow(SyntaxKind.ArrowFunction)
-    .getStatementByKindOrThrow(SyntaxKind.ReturnStatement)
-    .getFirstChildByKindOrThrow(SyntaxKind.ParenthesizedExpression)
-    .getFirstChildByKindOrThrow(SyntaxKind.JsxElement)
-
-  jsxElement.replaceWithText(`
-      <>
-        <div
-            style={{
-              position: "absolute",
-              left: "50%",
-              zIndex: 2,
-              width: 400,
-              height: 200,
-              opacity: "95%",
-              marginTop: 20,
-            }}
-          >
-            <button
-              style={{
-                minWidth: 50,
-                minHeight: 20,
-                padding: "10 20",
-                borderRadius: "10%",
-              }}
-              onClick={() => (window.location.pathname = "/${newPageName}")}
-            >
-              /${newPageName}
-            </button>
-        </div>
-      ${jsxElement.getText()}
-      </>
-    `)
-}