diff --git a/README.md b/README.md
index 80096960..a2e76a90 100644
--- a/README.md
+++ b/README.md
@@ -110,7 +110,7 @@ in this repo:
 * [mostaccio](https://pietroppeter.github.io/nimib/mostaccio.html): examples of usage of nim-mustache and of dark mode.
 * [interactivity](https://pietroppeter.github.io/nimib/interactivity.html): shows the basic API of creating interactive elements using `nbJsFromCode`.
 * [counter](https://pietroppeter.github.io/nimib/counters.html): shows how to create reusable interactive widgets by creating a counter button.
-* [caesar](https://pietroppeter.github.io/nimib/caesar.html): a Caesar cipher implemented using `nbJsFromCode` and `karax`.
+* [caesar](https://pietroppeter.github.io/nimib/caesar.html): a Caesar cipher implemented using `nbKaraxCode` and `karax`.
 
 
 elsewhere:
@@ -153,7 +153,7 @@ Currently most of the documentation on customization is given by the examples.
 
 * `nbImage`: image command to show images (see `penguins.nim` example linked above)
 * `nbFile`: content (string or untyped) is saved to file (see example document [files](https://pietroppeter.github.io/nimib/files.html))
-* `nbRawOutput`: called with string content, it will add the raw content to document (html backend)
+* `nbRawHtml`: called with string content, it will add the raw content to document (html backend)
 * `nbTextWithCode`: a variant of `nbText` that also reads nim source. See example of usage
   at the end of the source in `numerical.nim` linked above.
 * `nbPython`:  can be used after calling `nbInitPython()` and it runs and capture output of python code;
diff --git a/assets/nimib-nimconf-thumbnail.png b/assets/nimib-nimconf-thumbnail.png
new file mode 100644
index 00000000..163ea24a
Binary files /dev/null and b/assets/nimib-nimconf-thumbnail.png differ
diff --git a/changelog.md b/changelog.md
index c1e83129..8a02bde8 100644
--- a/changelog.md
+++ b/changelog.md
@@ -8,9 +8,17 @@ made this development possible.
 When contributing a fix, feature or example please add a new line to briefly explain the changes. It will be used as release documentation here: https://github.com/pietroppeter/nimib/releases
 
 ## 0.3.x
-
 * _add next change here_
 
+## 0.3.3
+
+* Refactored nbJs (#148)
+  * **Breaking**: All `nbJsFromCode` blocks are now inserted into the same file (Compared to previously when each block was compiled as its own file).
+  So this will break any reusable components as you will get `redefinition of variable` errors. The solution is to use `nbJsFromCodeInBlock` which puts the code inside a `block`. Imports can't be done in there though so you must do them in a separate `nbJsFromCode` or `nbJsFromCodeGlobal` before. 
+  * See [https://pietroppeter.github.io/nimib/interactivity.html](https://pietroppeter.github.io/nimib/interactivity.html) for a more detailed guide on how to use the new API.
+* Added `nimibCode` template. One problem with using `nbCode` is that you can't show *nimib* code using it because it nests blocks and wrecks havoc.
+So `nimibCode` allows you to show *nimib* code but at the cost of not capturing output of the code.
+
 ## 0.3.2
 
 * Add `hlHtml` and `hlHtml` to nimiBoost
diff --git a/docsrc/counters.nim b/docsrc/counters.nim
index 26772cdc..fe7ae4a4 100644
--- a/docsrc/counters.nim
+++ b/docsrc/counters.nim
@@ -6,25 +6,27 @@ nbInit
 nbText: hlMd"""
 # Counters - Creating reusable widgets
 
-This document will show you how to create reusable widgets using `nbJsFromCode`. Specifically we will make a counter:
+This document will show you how to create reusable widgets using `nbJsFromCodeInBlock`. Specifically we will make a counter:
 A button which increases a counter each time you click it. We will do this in two different ways, using `std/dom` and `karax`.
 ## std/dom
 
 The first method is to use Nim like you would have used Javascript using `getElementById` and `addEventListener`: 
 """
-nbCode:
+nimibCode:
+  ## 0:
+  nbJsFromCodeGlobal:
+    import std/dom
   ## 1:
   template counterButton(id: string) =
     let labelId = "label-" & id
     let buttonId = "button-" & id
     ## 2:
-    nbRawOutput: """
+    nbRawHtml: """
 <label id="$1">0</label>
 <button id="$2">Click me</button>
 """ % [labelId, buttonId]
     ## 3:
-    nbJsFromCode(labelId, buttonId):
-      import std/dom
+    nbJsFromCodeInBlock(labelId, buttonId):
       ## 4:
       var label = getElementById(labelId.cstring)
       var button = getElementById(buttonId.cstring)
@@ -38,10 +40,13 @@ nbCode:
 
 nbText: hlMd"""
 Let's explain each part of the code:
+
+0. We import `std/dom` in a `nbJsFromCodeGlobal` block. `std/dom` is where many dom-manipulation functions are located.
 1. We define a template called `counterButton` which will create a new counter button. So if you call it somewhere it will
 place the widget there, that's the reusable part done. But it also takes an input `id: string`. This is to solve the problem of each widget needing unique ids. It can also be done with `nb.newId` as will be used in the Karax example.
 2. Here we emit the `<label>` and `<button>` tags and insert their ids.
-3. `nbJsFromCode` is the template that will turn our Nim code into Javascript and we are capturing `labelId` and `buttonId` (Important that you capture all used variables defined outside the code block). `std/dom` is where many dom-manipulation functions are located.
+3. `nbJsFromCodeInBlock` is the template that will turn our Nim code into Javascript and we are capturing `labelId` and `buttonId` (Important that you capture all used variables defined outside the code block).
+The reason we are using `nbJsFromCodeInBlock` instead of `nbJsFromCode` is that we need to put the code of the different components in different blocks to avoid errors like `redefinition of label`.
 4. We fetch the elements we emitted above by their ids. Remember that most javascript functions want `cstring`s!
 5. We create a variable `counter` to keep track of the counter and add the eventlistener to the `button` element. There we increase the counter and update the `innerHtml` of the `label`.
 
diff --git a/docsrc/index.nim b/docsrc/index.nim
index 7649263f..7b7d30f2 100644
--- a/docsrc/index.nim
+++ b/docsrc/index.nim
@@ -88,7 +88,7 @@ in this repo:
 * [mostaccio]({docs}/mostaccio.html): examples of usage of nim-mustache and of dark mode.
 * [interactivity]({docs}/interactivity.html): shows the basic API of creating interactive elements using `nbJsFromCode`.
 * [counter]({docs}/counters.html): shows how to create reusable interactive widgets by creating a counter button.
-* [caesar]({docs}/caesar.html): a Caesar cipher implemented using `nbJsFromCode` and `karax`.
+* [caesar]({docs}/caesar.html): a Caesar cipher implemented using `nbKaraxCode` and `karax`.
 
 
 elsewhere:
@@ -131,7 +131,7 @@ Currently most of the documentation on customization is given by the examples.
 
 * `nbImage`: image command to show images (see `penguins.nim` example linked above)
 * `nbFile`: content (string or untyped) is saved to file (see example document [files]({docs}/files.html))
-* `nbRawOutput`: called with string content, it will add the raw content to document (html backend)
+* `nbRawHtml`: called with string content, it will add the raw content to document (html backend)
 * `nbTextWithCode`: a variant of `nbText` that also reads nim source. See example of usage
   at the end of the source in `numerical.nim` linked above.
 * `nbPython`:  can be used after calling `nbInitPython()` and it runs and capture output of python code;
diff --git a/docsrc/interactivity.nim b/docsrc/interactivity.nim
index 1e9798eb..1f580897 100644
--- a/docsrc/interactivity.nim
+++ b/docsrc/interactivity.nim
@@ -3,56 +3,126 @@ import nimib
 nbInit
 
 nbText: hlMd"""
-# Creating interactive components in Nimib
+# Creating interactive components in nimib
 
 Nimib can easily be used to create static content with `nbText` and `nbCode`, but did you know that you can create interactive
 content as well? And that you can do it all in Nim even! This can be achieved using either the `nbJsFromCode`-API or `nbKaraxCode`.
 They work by compiling Nim code into javascript and adding it to the resulting HTML file.
-This means that arbitrary Javascript can be written but also that Karax, which compiles to javascript, also can be used.
+This means that arbitrary Javascript can be written but also that Karax, which compiles to javascript, can be used.
 
-## nbJsFromCodeInit
-This is the fundamental API used for compiling Nim-snippets to javascript. It consists of three templates:
-- `nbJsFromCodeInit` - Creates a new code script that further code can be added to later.
-- `addCodeToJs` - Adds to an existing code script
-- `addToDocAsJs` - Takes the Nim code in a script and compiles it to javascript. 
+In the same way that code from nbCode blocks are all compiled into a single file,
+all code to be compiled in javascript will be put in a single file. 
+This has the advantage that a single compilation is performed
+and code from a previous block can be used in subsequent blocks.
+The api looks like this:
+
+- `nbJsFromCode`: nim code will be appended to the file and compiled during `nbSave`.
+- `nbJsFromCodeInBlock`: same as `nbJsFromCode` but the code is put inside a `block`.
+- `nbJsFromCodeGlobal`: the code here will be put at the top of the file.
+
+If you wish to compile to a separate file you can do that.
+Indeed this is what is done for a special block that allows you to use karax without boilerplate:
+
+- `nbJsFromCodeOwnFile`: compile to js as its own file.
+- `nbKaraxCode`: Sugar on top of `nbJsFromCodeOwnFile` for writing Karax components.
+
+## nbJsFromCode
+This is the fundamental API used for compiling Nim-snippets to javascript.
 Here is a basic example:
 """
 
-nbCode:
-  let script = nbJsFromCodeInit:
-    echo "Hello world!"
-  let x = 3.14
-  script.addCodeToJs(x):
-    echo "Pi is roughly ", x
-  ## Uncomment this line:
-  ##script.addToDocAsJs()
-script.addToDocAsJs()
-nbJsShowSource("This is the complete script:")
+nimibCode:
+  nbJsFromCode:
+    let x = "Hello world!"
+    echo x
 
+nbText: hlMd"""
+If you now go to your browser's javascript console you should see `Hello world` printed there.
+So the code we passed to `nbJsFromCode` has been compiled to Javascript and is run by your browser!
 
+### Capturing variables
+If you have a variable in your code that you want to access inside a
+nbJs-block, you have to capture it. This can be done by passing it to the block like this:
+"""
+nimibCode:
+  # This variable is defined in C-land
+  let captureVariable = 3.14
+  nbJsFromCode(captureVariable): # capture it
+    # use it in JS-land
+    echo "Pi is roughly ", captureVariable
 nbText: hlMd"""
-The reason `script.addToDocAsJs()` is commented out is just a limitation of nimib not handling nested blocks well.
-If you now go to your browser's javascript console you should see `Hello world` and `Pi is roughly 3.14` printed there.
-What is up with `script.addCodeToJs(x)` though? Why is `(x)` needed? It is because we have to capture the value of `x`
-to be able to use it in the javascript. The code block will basically be copy-pasted into a separate file and
-compiled into javascript. And `x` isn't defined there so we have to capture it. This is true for any variable that
-we want to use that is defined outside the script blocks.
+If you look at the console you should see that it prints out `Pi is roughly 3.14`.
+The capturing is done by serializing the variable to JSON, so the captured type has to support it.
 
-## nbJsFromCode
-This is basically a shorthand for running `nbJsFromCodeInit` and `addToDocAsJs` in a single call:
-```nim
-let x = 3.14
-nbJsCode(x):
-  echo "Pi is roughly ", x
-```
+Capturing variables is especially important when creating reusable components as they allow you to
+generate the HTML using `nbRawHtml` and then pass in the ids of the elements by capturing them.
+Examples of this can be seen in the [counters tutorial](counters.html).
+
+
+## nbJsFromCodeInBlock
+`nbJsFromCodeInBlock` works the same as `nbJsFromCode`, except that it puts the code inside a block.
+This is a feature which is important if you are making a reusable piece of code, like a component.
+This is because it allows you to reuse the same variable name in multiple blocks. 
+Using `nbJsFromCode` would yield a `redefinition of variable` error. 
+Here is an example showing how the same variable name can be used:
+"""
+nimibCode:
+  nbJsFromCodeInBlock:
+    let sameVariable = "First block"
+    echo sameVariable
+  nbJsFromCodeInBlock:
+    let sameVariable = "Second block"
+    echo sameVariable
+
+nbText: hlMd"""
+The case when this is really needed is when you have a `nbJsFromCodeInBlock` inside a template like this:
+"""
+nimibCode:
+  template jsGoodbyeWorld() =
+    nbJsFromCodeInBlock:
+      let s = "Good bye world"
+      echo s
+
+  jsGoodbyeWorld()
+  # Without block the second call would give `redefinition of 's'`
+  jsGoodbyeWorld()
+
+
+nbText: hlMd"""
+If you look in the console you should see that it prints out `Good bye world` once for each call to `jsGoodbyeWorld` call.
+
+Because the code is put inside of a block, any code needing to be put at the top-level (like imports)
+must be done in a separate `nbJsFromCode` or `nbJsFromCodeGlobal` before it.
+
+## nbJsFromCodeGlobal
+`nbJsFromCodeGlobal` works similarly to `nbJsFromCode`, except that it places the code at the top of the generated js file.
+So it is well suited for `import`s and defining global variables you want to be able to access in multiple blocks. 
+Code defined here is available in all `nbJsFromCode` and `nbJsFromCodeInBlock` blocks.
+"""
+
+nimibCode:
+  nbJsFromCodeGlobal:
+    import std / dom # this will be imported for all your nbJs blocks
+    var globalVar = 1
+  nbJsFromCode:
+    echo "First block: ", globalVar
+    globalVar += 1
+  nbJsFromCode:
+    echo "Second block: ", globalVar
+
+nbText: hlMd"""
+## nbJsFromCodeOwnFile
+The above-mentioned nbJs blocks are all compiled in the same file. But if you want to compile a code block
+in its own file you can use `nbJsFromCodeOwnFile`. This also means you can't access any variables defined
+in for example `nbJsFromCodeGlobal`.
 
 ## nbKaraxCode
 
 If you want to write a component using karax this is the template for you!
 A normal karax program has the following structure:
 ```nim
-nbJsFromCode(rootId):
-  import karax / [kbase, karax, karaxdsl, vdom, compact, jstrutils, kdom]
+nbJsFromCodeOwnFile(rootId):
+  include karax / prelude
 
   karaxCode  # some code, set up global variables for example
 
@@ -86,8 +156,71 @@ nbCode:
           proc onClick() =
             message = "Poof! Gone!"
 
-nbText: "This is the output this code produces:"
+nbText: "This is the output this code produces when called:"
 
 karaxExample()
 
+nbText: "Another example on how to use `nbKaraxCode` can be found in the [caesar document](./caesar.html) by clicking the `Show Source` button at the bottom."
+
+nbText: hlMd"""
+## Internal workings
+### nbJsFromCode
+Any code defined in `nbJsFromCode`, `nbJsFromCodeInBlock` and `nbJsFromCodeGlobal` will be pasted into a common file.
+- Any code passed to `nbJsFromCodeGlobal` will be put at the top of the file without any blocks. 
+- Any code passed to `nbJsFromCode` will be placed in the order they are called without any blocks.
+- Any code passed to `nbJsFromCodeInBlock` will be placed in the order they are called inside blocks.
+
+Here is an example of how the code will be ordered:
+```nim
+nbJsFromCode:
+  echo 1
+nbJsFromCodeInBlock:
+  echo 2
+nbJsFromCodeGlobal:
+  echo 3
+nbJsFromCode:
+  echo 4
+nbJsFromCodeGlobal:
+  echo 5
+```
+This will be transformed into something like this:
+```nim
+echo 3 # Global is placed at the top
+
+echo 5 # the other Global
+
+echo 1 # no block for nbJsFromCode
+
+block:
+  echo 2 # placed inside block
+
+echo 4 # no block
+```
+
+### nbKaraxCode
+`nbKaraxCode` works a bit differently, there each code block will be compiled in its own file so there is no global scope.
+So (`nbJsFromCode` + `nbJsFromCodeGlobal`) and `nbKaraxCode` are totally isolated from each other. 
+
+### Caveats
+Because of the way Nim gensym's variable names in the generated Javascript code, compiling two identical `nbKaraxCode` would
+cause Nim to generate the same variable names for the variables defined in them. An example is `varName_123456`. This is really bad as changing the variable in
+one component would change it in the other one as well! The solution we are using for this is to bump gensym by 1 each time we compile a
+`nbKaraxCode`. So a variable being generated as `varName_123456` the first time will be generated as `varName_123457` the second time. 
+
+This works well for most scenarios, but there is still a small risk that it will generate variable names that collide **if**
+you are defining multiple different variables with the same name in your code. For example:
+"""
+nimibCode:
+  nbKaraxCode:
+    var counter: int
+    block:
+      var counter: int
+
+nbText: hlMd"""
+The two variables `counter` are different variables but have the same name. Lets say the generated names for them the first time we compile this block are
+`counter_1` and `counter_2` for simplicity. The next time the generated names have been incremented with one and is instead `counter_2` and `counter_3`.
+And here the problem lies: `counter_2` is generated both times we compile the block! So this could lead to unwanted interactions between the two codes!
+The solution is stated above: don't name multiple separate variables the same in a `nbKaraxCode` or `nbJsFromCodeOwnFile` block! 
+This isn't a problem for the other nbJs blocks luckily. 
+"""
 nbSave
\ No newline at end of file
diff --git a/nimib.nimble b/nimib.nimble
index 113d946f..43be2ff2 100644
--- a/nimib.nimble
+++ b/nimib.nimble
@@ -1,6 +1,6 @@
 # Package
 
-version       = "0.3.2"
+version       = "0.3.3"
 author        = "Pietro Peterlongo"
 description   = "nimib 🐳 - nim 👑 driven ⛵ publishing ✍"
 license       = "MIT"
diff --git a/src/nimib.nim b/src/nimib.nim
index 92f4a052..4896a2ff 100644
--- a/src/nimib.nim
+++ b/src/nimib.nim
@@ -79,6 +79,11 @@ template nbCodeInBlock*(body: untyped): untyped =
     nbCode:
       body
 
+template nimibCode*(body: untyped) =
+  newNbCodeBlock("nimibCode", body):
+    discard
+  body
+
 template nbText*(text: string) =
   newNbSlimBlock("nbText"):
     nb.blk.output = text
@@ -130,24 +135,11 @@ template nbRawHtml*(content: string) =
     nb.blk.output = content
 
 template nbJsFromStringInit*(body: string): NbBlock =
-  var result = NbBlock(command: "nbCodeToJs", code: body, context: newContext(searchDirs = @[], partials = nb.partials), output: "")
+  var result = NbBlock(command: "nbJsFromCode", code: body, context: newContext(searchDirs = @[], partials = nb.partials), output: "")
   result.context["transformedCode"] = body
+  result.context["putAtTop"] = false
   result
 
-template nbJsFromCodeInit*(args: varargs[untyped]): NbBlock =
-  let (code, originalCode) = nimToJsString(true, args)
-  var result = NbBlock(command: "nbCodeToJs", code: originalCode, context: newContext(searchDirs = @[], partials = nb.partials), output: "")
-  result.context["transformedCode"] = code
-  result
-
-template nbCodeToJsInit*(args: varargs[untyped]): NbBlock {.deprecated: "Use nbJsFromCodeInit or nbJsFromStringInit instead".} =
-  nbJsFromCodeInit(args)
-
-template addCodeToJs*(script: NbBlock, args: varargs[untyped]) =
-  let (code, originalCode) = nimToJsString(false, args)
-  script.code &= "\n" & originalCode
-  script.context["transformedCode"] = script.context["transformedCode"].vString & "\n" & code
-
 template addStringToJs*(script: NbBlock, body: string) =
   script.code &= "\n" & body
   script.context["transformedCode"] = script.context["transformedCode"].vString & "\n" & body
@@ -161,8 +153,31 @@ template nbJsFromString*(body: string) =
   script.addToDocAsJs
 
 template nbJsFromCode*(args: varargs[untyped]) =
-  let script = nbJsFromCodeInit(args)
-  script.addToDocAsJs
+  let (code, originalCode) = nimToJsString(putCodeInBlock=false, args)
+  var result = NbBlock(command: "nbJsFromCode", code: originalCode, context: newContext(searchDirs = @[], partials = nb.partials), output: "")
+  result.context["transformedCode"] = code
+  result.context["putAtTop"] = false
+  result.addToDocAsJs
+
+template nbJsFromCodeInBlock*(args: varargs[untyped]) =
+  let (code, originalCode) = nimToJsString(putCodeInBlock=true, args)
+  var result = NbBlock(command: "nbJsFromCode", code: originalCode, context: newContext(searchDirs = @[], partials = nb.partials), output: "")
+  result.context["transformedCode"] = code
+  result.context["putAtTop"] = false
+  result.addToDocAsJs
+
+template nbJsFromCodeGlobal*(args: varargs[untyped]) =
+  let (code, originalCode) = nimToJsString(putCodeInBlock=false, args)
+  var result = NbBlock(command: "nbJsFromCode", code: originalCode, context: newContext(searchDirs = @[], partials = nb.partials), output: "")
+  result.context["transformedCode"] = code
+  result.context["putAtTop"] = true
+  result.addToDocAsJs
+
+template nbJsFromCodeOwnFile*(args: varargs[untyped]) =
+  let (code, originalCode) = nimToJsString(putCodeInBlock=false, args)
+  var result = NbBlock(command: "nbJsFromCodeOwnFile", code: originalCode, context: newContext(searchDirs = @[], partials = nb.partials), output: "")
+  result.context["transformedCode"] = code
+  result.addToDocAsJs
 
 template nbCodeToJs*(args: varargs[untyped]) {.deprecated: "Use nbJsFromCode or nbJsFromString instead".} =
   nbJsFromCode(args)
@@ -171,7 +186,7 @@ template nbCodeToJs*(args: varargs[untyped]) {.deprecated: "Use nbJsFromCode or
 when moduleAvailable(karax/kbase):
   template nbKaraxCode*(args: varargs[untyped]) =
     let rootId = "karax-" & $nb.newId()
-    nbRawOutput: "<div id=\"" & rootId & "\"></div>"
+    nbRawHtml: "<div id=\"" & rootId & "\"></div>"
     nbKaraxCodeBackend(rootId, args)
 
 template nbJsShowSource*(message: string = "") =
@@ -193,6 +208,8 @@ template nbSave* =
   #   - in memory partial contains default mustache assets
   #   - to override/customize (for a bunch of documents) the best way is to modify a version on file
   #   - in case you need to manage additional exceptions for a specific document add a new set of partials before calling nbSave
+  nb.nbCollectAllNbJs()
+
   nb.context.searchDirs(nb.templateDirs)
   nb.context.searchTable(nb.partials)
 
diff --git a/src/nimib/jsutils.nim b/src/nimib/jsutils.nim
index 930b21b0..9f795fec 100644
--- a/src/nimib/jsutils.nim
+++ b/src/nimib/jsutils.nim
@@ -1,5 +1,5 @@
-import std / [macros, macrocache, tables, strutils, strformat, sequtils, sugar]
-
+import std / [macros, macrocache, tables, strutils, strformat, sequtils, sugar, os]
+import ./types
 
 proc contains(tab: CacheTable, keyToCheck: string): bool =
   for key, val in tab:
@@ -7,154 +7,44 @@ proc contains(tab: CacheTable, keyToCheck: string): bool =
       return true
   return false
 
-#const validCodeTable = CacheTable"validCodeTable"
 const bodyCache = CacheTable"bodyCache"
-var tabMapIdents {.compiletime.}: Table[string, NimNode]
-
-#[ macro typedChecker(n: typed): untyped = discard
-macro checkIsValidCode(n: untyped): untyped =
-  result = quote do:
-    when compiles(typedChecker(`n`)):
-      true
-    else:
-      false ]#
-
-# remove this
-#[ macro addValid(key: string, s: typed): untyped =
-  # If it is valid we want it typed
-  if key.strVal notin validCodeTable:
-    validCodeTable[key.strVal] = s ]#
 
 macro addBody(key: string, s: untyped): untyped =
   if key.strVal notin bodyCache:
     bodyCache[key.strVal] = s
 
-proc isPragmaExportc(n: NimNode): bool =
-  ## Returns whether pragma contains exportc
-  n.expectKind(nnkPragma)
-  for child in n:
-    if child.kind == nnkExprColonExpr: # {.exportc: "newName".}
-      if child[0].eqIdent("exportc"):
-        result = true
-    elif child.kind == nnkIdent:
-      if child.eqIdent("exportc"): # {.exportc.}
-        result = true
-
-proc gensymProcIterConverter(n: NimNode, replaceProcs: bool) =
-  ## By default procs, iterators and converters are injected and will share the same name in the resulting javascript.
-  ## Therefore we gensym them here to give them unique names. Also replace the references to it.
-  ## replaceProcs: whether to replace procs names or not. It will replace existing names regardless.
-  for i in 0 ..< n.len:
-    case n[i].kind
-    of nnkProcDef, nnkIteratorDef, nnkConverterDef:
-      if replaceProcs:
-        # add check for {.exportc.} here
-        var isExportc: bool
-        let pragmas = n[i][4]
-        if pragmas.kind == nnkPragma:
-          isExportc = isPragmaExportc(pragmas)
-        # Do not gensym if proc is exportc'ed
-        if not isExportc:
-          if n[i][0].kind == nnkPostfix: # foo*
-            let oldIdent = n[i][0][1].strVal.nimIdentNormalize
-            let newIdent = gensym(ident=oldIdent).repr.ident
-            n[i][0][1] = newIdent
-            tabMapIdents[oldIdent] = newIdent
-          else:
-            let oldIdent = n[i][0].strVal.nimIdentNormalize
-            let newIdent = gensym(ident=oldIdent).repr.ident
-            n[i][0] = newIdent
-            tabMapIdents[oldIdent] = newIdent
-      # Function might be recursive or contain other procs, loop through it's body as well
-      for child in n[i][6]:
-        gensymProcIterConverter(child, replaceProcs)
-    of nnkLambda:
-      # rewrite from:
-      # proc () = discard
-      # to
-      # block:
-      #   proc lambda_gensym() = discard
-      #   lambda_gensym
-      let p = nnkProcDef.newTree()
-      n[i].copyChildrenTo p
-      let newIdent = gensym(ident="lambda")
-      p[0] = newIdent
-      # loop through proc body as well
-      for child in p[6]:
-        gensymProcIterConverter(child, replaceProcs)
-      n[i] = newStmtList(p, newIdent)
-    of nnkSym, nnkIdent:
-      let oldIdent = n[i].strVal.nimIdentNormalize
-      if oldIdent in tabMapIdents:
-        n[i] = tabMapIdents[oldIdent]
-    of nnkCall:
-      # Check if it is karaxHtml:
-      # if so set replaceProcs = false for the children
-      if n[i][0].eqIdent("karaxHtml"):
-        gensymProcIterConverter(n[i][1], false)
-      else:
-        gensymProcIterConverter(n[i], replaceProcs)
-    else:
-      gensymProcIterConverter(n[i], replaceProcs)
-
-proc degensymAst(n: NimNode, removeGensym = false) =
+proc degensymAst(n: NimNode) =
   for i in 0 ..< n.len:
     case n[i].kind
     of nnkIdent, nnkSym:
       let str = n[i].strVal
       if "`gensym" in str:
-        let newStr = str.split("`gensym")[0].nimIdentNormalize
-        var newSym: NimNode
-        if removeGensym: # remove gensym all together, useful for removing gensym noise when showing code
-          newSym = ident(newStr)
-        else: # replace gensym with one that is accepted by the parser
-           # If this symbol is already used in this script, use the gensym'd symbol from tabMapIdents
-          if newStr in tabMapIdents:
-            newSym = tabMapIdents[newStr]
-          else: # else create a gensym'd symbol and add it to the table
-            newSym = gensym(ident=newStr).repr.ident
-            tabMapIdents[newStr] = newSym
+        let newStr = str.split("`gensym")[0]
+        let newSym = ident(newStr)
         n[i] = newSym
-    of nnkPragmaExpr:
-      let identifier = n[i][0]
-      let pragmas = n[i][1]
-      if pragmas.isPragmaExportc: # varName {.exportc.}
-        n[i][0] = identifier.strVal.split("`gensym")[0].ident
-      else:
-        degensymAst(identifier, removeGensym)
-        degensymAst(pragmas, removeGensym)
     else:
-      degensymAst(n[i], removeGenSym)
+      degensymAst(n[i])
 
 proc genCapturedAssignment(capturedVariables, capturedTypes: seq[NimNode]): tuple[code: NimNode, placeholders: seq[NimNode]] =
   result.code = newStmtList()
   # generate fromJSON loading and then add entire body afterwards
   if capturedVariables.len > 0:
-    result.code.add quote do:
-      import std/json
     for (cap, capType) in zip(capturedVariables, capturedTypes):
       let placeholder = gensym(ident="placeholder")
-      var newSym: NimNode
-      if "`gensym" notin cap.strVal:
-        newSym = gensym(NimSymKind.nskLet, ident=cap.strVal)
-        # add to tab[cap] = cap.gensym?
-        tabMapIdents[cap.strVal.nimIdentNormalize] = newSym.repr.ident
-      else:
-        newSym = cap
+      
+      let newSym = cap
       result.placeholders.add placeholder
       result.code.add quote do:
         let `newSym` = parseJson(`placeholder`).to(`capType`) # we must gensym `cap` as well!
-      
 
-macro nimToJsStringSecondStage*(key: static string, captureVars: varargs[typed]): untyped =
+macro nimToJsStringSecondStage*(key: static string, putCodeInBlock: static bool, captureVars: varargs[typed]): untyped =
   let captureVars = toSeq(captureVars)
 
   let captureTypes = collect:
     for cap in captureVars:
       cap.getTypeInst
 
-  # dispatch either to string based if the body has type string
-  # or to typed version otherwise.
+  # Get the untyped body from CacheTable
   var body: NimNode
   if key in bodyCache:
     body = bodyCache[key]
@@ -165,12 +55,14 @@ macro nimToJsStringSecondStage*(key: static string, captureVars: varargs[typed])
   # 1. Generate the captured variable assignments and return placeholders
   let (capAssignments, placeholders) = genCapturedAssignment(captureVars, captureTypes)
   # 2. Stringify code
-  let code = newStmtList(capAssignments, body).copyNimTree()
-  code.gensymProcIterConverter(replaceProcs=true)
+  var code = newStmtList(capAssignments, body).copyNimTree()
   code.degensymAst()
+
+  if putCodeInBlock:
+    code = newBlockStmt(code)
   var codeText = code.toStrLit
   # 3. Generate code which does the serialization and replacement of placeholders
-  let codeTextIdent = genSym(NimSymKind.nskVar ,ident="codeText")
+  let codeTextIdent = genSym(NimSymKind.nskVar, ident="codeText")
   result = newStmtList()
   result.add newVarStmt(codeTextIdent, codeText)
   for i in 0 .. captureVars.high:
@@ -181,16 +73,12 @@ macro nimToJsStringSecondStage*(key: static string, captureVars: varargs[typed])
     result.add quote do:
       `codeTextIdent` = `codeTextIdent`.replace(`placeholder`, "\"\"\"" & `serializedValue` & "\"\"\"")
   # return tuple of the transformed code to be compiled and the prettified code for visualization
-  body.degensymAst(removeGenSym=true) # remove `gensym if code was written in a template
+  body.degensymAst() # remove `gensym if code was written in a template
   result.add nnkTupleConstr.newTree(codeTextIdent, body.toStrLit)
     
-macro nimToJsString*(isNewScript: static bool, args: varargs[untyped]): untyped =
+macro nimToJsString*(putCodeInBlock: static bool, args: varargs[untyped]): untyped =
   if args.len == 0:
     error("nbJsFromCode needs a code block to be passed", args)
-  
-  # If new script, clear the table.
-  if isNewScript:
-    tabMapIdents.clear()
 
   let body = args[^1]
   let captureVars =
@@ -207,7 +95,7 @@ macro nimToJsString*(isNewScript: static bool, args: varargs[untyped]): untyped
   result = newStmtList()
   result.add quote do:
     addBody(`key`, `body`)
-  var nextArgs = @[newLit(key)]
+  var nextArgs = @[newLit(key), newLit(putCodeInBlock)]
   nextArgs.add captureVars
   result.add newCall("nimToJsStringSecondStage", nextArgs)
 
@@ -245,6 +133,53 @@ macro nbKaraxCodeBackend*(rootId: untyped, args: varargs[untyped]) =
   callArgs.add captureVars
   callArgs.add newBody
 
-  let call = newCall(ident"nbJsFromCode", callArgs)
-
-  result = call
\ No newline at end of file
+  let call = newCall(ident"nbJsFromCodeOwnFile", callArgs)
+
+  result = call
+
+proc compileNimToJs*(doc: var NbDoc, blk: var NbBlock) =
+  let tempdir = getTempDir() / "nimib"
+  createDir(tempdir)
+  let (dir, filename, ext) = doc.thisFile.splitFile()
+  let nimfile = dir / (filename & "_nbCodeToJs_" & $doc.newId() & ext).RelativeFile
+  let jsfile = tempdir / "out.js"
+  var codeText = blk.context["transformedCode"].vString
+  let nbJsCounter = doc.nbJsCounter
+  doc.nbJsCounter += 1
+  var bumpGensymString = """
+import std/[macros, json]
+
+macro bumpGensym(n: static int) =
+  for i in 0 .. n:
+    let _ = gensym()
+
+"""
+  bumpGensymString.add &"bumpGensym({nbJsCounter})\n"
+  codeText = bumpGensymString & codeText
+  writeFile(nimfile, codeText)
+  let kxiname = "nimib_kxi_" & $doc.newId()
+  let errorCode = execShellCmd(&"nim js -d:danger -d:kxiname=\"{kxiname}\" -o:{jsfile} {nimfile}")
+  if errorCode != 0:
+    raise newException(OSError, "The compilation of a javascript file failed! Did you remember to capture all needed variables?\n" & $nimfile)
+  removeFile(nimfile)
+  let jscode = readFile(jsfile)
+  removeFile(jsfile)
+  blk.output = jscode
+  blk.context["output"] = jscode
+
+proc nbCollectAllNbJs*(doc: var NbDoc) =
+  var topCode = "" # placed at the top (nbJsFromCodeGlobal)
+  var code = ""
+  for blk in doc.blocks:
+    if blk.command == "nbJsFromCode":
+      if blk.context["putAtTop"].vBool:
+        topCode.add "\n" & blk.context["transformedCode"].vString
+      else:
+        code.add "\n" & blk.context["transformedCode"].vString
+  code = topCode & "\n" & code
+
+  # Create block which which will compile the code when rendered (nbJsFromJsOwnFile)
+  var blk = NbBlock(command: "nbJsFromCodeOwnFile", code: code, context: newContext(searchDirs = @[], partials = doc.partials), output: "")
+  blk.context["transformedCode"] = code
+  doc.blocks.add blk
+  doc.blk = blk
diff --git a/src/nimib/renders.nim b/src/nimib/renders.nim
index 3846724a..b233e9d6 100644
--- a/src/nimib/renders.nim
+++ b/src/nimib/renders.nim
@@ -1,5 +1,5 @@
 import std / [strutils, tables, sugar, os, strformat, sequtils]
-import types, markdown, mustache
+import ./types, ./jsutils, markdown, mustache
 export escapeTag # where is this used? why do I export? a better solution is to use xmlEncode
 import highlight
 import mustachepkg/values
@@ -10,22 +10,6 @@ proc mdOutputToHtml(doc: var NbDoc, blk: var NbBlock) =
 proc highlightCode(doc: var NbDoc, blk: var NbBlock) =
   blk.context["codeHighlighted"] = highlightNim(blk.code)
 
-proc compileNimToJs(doc: var NbDoc, blk: var NbBlock) =
-  let tempdir = getTempDir() / "nimib"
-  createDir(tempdir)
-  let (dir, filename, ext) = doc.thisFile.splitFile()
-  let nimfile = dir / (filename & "_nbCodeToJs_" & $doc.newId() & ext).RelativeFile
-  let jsfile = tempdir / "out.js"
-  writeFile(nimfile, blk.context["transformedCode"].vString)
-  let kxiname = "nimib_kxi_" & $doc.newId()
-  let errorCode = execShellCmd(&"nim js -d:danger -d:kxiname=\"{kxiname}\" -o:{jsfile} {nimfile}")
-  if errorCode != 0:
-    raise newException(OSError, "The compilation of a javascript file failed! Did you remember to capture all needed variables?\n" & $nimfile)
-  removeFile(nimfile)
-  let jscode = readFile(jsfile)
-  removeFile(jsfile)
-  blk.output = jscode
-  blk.context["output"] = jscode
 
 proc useHtmlBackend*(doc: var NbDoc) =
   doc.partials["nbText"] = "{{&outputToHtml}}"
@@ -34,6 +18,7 @@ proc useHtmlBackend*(doc: var NbDoc) =
 {{>nbCodeOutput}}"""
   doc.partials["nbCodeSource"] = "<pre><code class=\"nim hljs\">{{&codeHighlighted}}</code></pre>"
   doc.partials["nbCodeOutput"] = """{{#output}}<pre class="nb-output"><samp>{{output}}</samp></pre>{{/output}}"""
+  doc.partials["nimibCode"] = doc.partials["nbCode"]
   doc.partials["nbImage"] = """<figure>
 <img src="{{url}}" alt="{{caption}}">
 <figcaption>{{caption}}</figcaption>
@@ -48,7 +33,8 @@ proc useHtmlBackend*(doc: var NbDoc) =
 <pre><code class="{{ext}} hljs">{{content}}</code></pre>
 """
 
-  doc.partials["nbCodeToJs"] = """
+  doc.partials["nbJsFromCode"] = "{{>nbJsScriptNimSource}}" # the script is handled by collector block
+  doc.partials["nbJsFromCodeOwnFile"] = """
 {{>nbJsScriptNimSource}}
 {{>nbJsScript}}"""
   doc.partials["nbJsScriptNimSource"] = "{{#js_show_nim_source}}{{#js_show_nim_source_message}}<p>{{js_show_nim_source_message}}</p>{{/js_show_nim_source_message}}{{>nbCodeSource}}{{/js_show_nim_source}}"
@@ -58,7 +44,9 @@ proc useHtmlBackend*(doc: var NbDoc) =
   doc.renderPlans = initTable[string, seq[string]]()
   doc.renderPlans["nbText"] = @["mdOutputToHtml"]
   doc.renderPlans["nbCode"] = @["highlightCode"] # default partial automatically escapes output (code is escaped when highlighting)
-  doc.renderPlans["nbCodeToJs"] = @["compileNimToJs", "highlightCode"]
+  doc.renderPlans["nbJsFromCodeOwnFile"] = @["compileNimToJs", "highlightCode"]
+  doc.renderPlans["nbJsFromCode"] = @["highlightCode"]
+  doc.renderPlans["nimibCode"] = doc.renderPlans["nbCode"]
 
   doc.renderProcs = initTable[string, NbRenderProc]()
   doc.renderProcs["mdOutputToHtml"] = mdOutputToHtml
@@ -91,6 +79,7 @@ proc useMdBackend*(doc: var NbDoc) =
 
 {{/output}}
 """
+  doc.partials["nimibCode"] = doc.partials["nbCode"]
   doc.partials["nbImage"] = """
 ![{{caption}}]({{url}})
 
diff --git a/src/nimib/types.nim b/src/nimib/types.nim
index 1d1a482e..a3341c71 100644
--- a/src/nimib/types.nim
+++ b/src/nimib/types.nim
@@ -33,6 +33,7 @@ type
     renderPlans*: Table[string, seq[string]]
     renderProcs*: Table[string, NbRenderProc]
     id: int
+    nbJsCounter*: int 
 
 proc thisDir*(doc: NbDoc): AbsoluteDir = doc.thisFile.splitFile.dir
 proc srcDir*(doc: NbDoc): AbsoluteDir =
diff --git a/tests/tnimib.nim b/tests/tnimib.nim
index 44a99117..35f4436e 100644
--- a/tests/tnimib.nim
+++ b/tests/tnimib.nim
@@ -167,30 +167,37 @@ when moduleAvailable(karax/kbase):
       nbJsFromCode:
         let a = 1
         echo a
-      check nb.blk.code.len > 0
       check nb.blk.context["transformedCode"].vString.len > 0
+      check "a = 1" in nb.blk.context["transformedCode"].vString
+      check "block:" notin nb.blk.context["transformedCode"].vString
 
     test "nbJsFromCode, capture variable":
       let a = 1
       nbJsFromCode(a):
         echo a
-      check nb.blk.code.len > 0
       check nb.blk.context["transformedCode"].vString.len > 0
+      check "a = parseJson" in nb.blk.context["transformedCode"].vString
 
-    test "nbJsFromCodeInit + addCodeToJs":
-      let script = nbJsFromCodeInit:
-        let a = 1
-      script.addCodeToJs:
-        echo a
-      script.addToDocAsJs
-      check nb.blk.code.len > 0
+    test "nbJsFromCodeGlobal":
+      nbJsFromCodeGlobal:
+        import std / dom
+        var x = 1
+      check nb.blk.context["transformedCode"].vString.len > 0
+      check "x = 1" in nb.blk.context["transformedCode"].vString
+      check "block:" notin nb.blk.context["transformedCode"].vString
+
+    test "nbJsFromCodeInBlock":
+      nbJsFromCodeInBlock:
+        let x = 3.14
+        echo x
       check nb.blk.context["transformedCode"].vString.len > 0
+      check "x = 3.14" in nb.blk.context["transformedCode"].vString
+      check "block:" in nb.blk.context["transformedCode"].vString
 
-    test "nbJsFromCode + exportc":
-      let script = nbJsFromCodeInit:
+    test "nbJsFromCodeOwnFile + exportc":
+      nbJsFromCodeOwnFile:
         proc setup() {.exportc.} =
           echo 1
-      script.addToDocAsJs
       check "setup()" in nb.blk.context["transformedCode"].vString
 
     test "nbKaraxCode":
@@ -202,22 +209,3 @@ when moduleAvailable(karax/kbase):
             text message
       check nb.blk.code.len > 0
       check nb.blk.context["transformedCode"].vString.len > 0
-    
-    #[ test "Interlaced nbJsFromCode": # failing because of #118
-      template foo() =
-        let script1 = nbJsFromCodeInit:
-          let a = 1
-        let script2 = nbJsFromCodeInit:
-          let b = 2
-        script1.addCodeToJs:
-          echo a
-        script2.addCodeToJs:
-          echo b
-
-        echo script1.context["transformedCode"]
-        echo script2.context["transformedCode"]
-        for script in [script1, script2]:
-          let code = script.context["transformedCode"].vString # eg. "\nlet a_469764253 = 1\n\necho a_469764292"
-          let splits = code.splitWhitespace() # @["let", "a_469764257", "=", "1", "echo", "a_469764296"]
-          check splits[1] == splits[5]
-      foo() ]#