diff --git a/packages/temple-esbuild/package.json b/packages/temple-esbuild/package.json
index fbd3264..293f147 100644
--- a/packages/temple-esbuild/package.json
+++ b/packages/temple-esbuild/package.json
@@ -19,9 +19,6 @@
   "scripts": {
     "build": "tsc"
   },
-  "peerDependencies": {
-    "esbuild": "^0.20"
-  },
   "dependencies": {
     "@ossph/temple": "0.0.15"
   },
diff --git a/packages/temple-express/src/index.ts b/packages/temple-express/src/index.ts
index b95ce04..8889865 100644
--- a/packages/temple-express/src/index.ts
+++ b/packages/temple-express/src/index.ts
@@ -3,7 +3,7 @@ import temple from '@ossph/temple/compiler';
 
 export default function engine(
   options: TempleOptions, 
-  next: (res: string) => string = (res) => res,
+  next: (res: string) => string = (res) => res
 ) {
   const compiler = temple(options);
   return async (
@@ -12,7 +12,11 @@ export default function engine(
     callback: (err: Error | null, results: string | undefined) => void,
   ) => {
     const { settings, _locals, cache, ...props } = options;
-    const build = await compiler.import(filePath);
-    callback(null, next(build.document.render(props)));
+    try {
+      const build = await compiler.import(filePath);
+      callback(null, next(build.document.inline(props)));
+    } catch (e) {
+      callback(e as Error, undefined);
+    }
   };
 }
\ No newline at end of file
diff --git a/packages/temple-web/public/styles/theme.css b/packages/temple-web/public/styles/theme.css
index c09270e..62a3d05 100644
--- a/packages/temple-web/public/styles/theme.css
+++ b/packages/temple-web/public/styles/theme.css
@@ -325,6 +325,97 @@ a, a:link a:hover, a:active, a:visited {
   }
 }
 
+/* Table
+---------------------------------*/
+.tbl-container {
+  position: relative;
+}
+.tbl {
+  border-collapse: collapse;
+  display: table;
+  width: 100%;
+}
+
+.tbl-scroll {
+  overflow: auto;
+  flex-grow: 1;
+  height: 100%;
+  width: 100%;
+}
+
+.tbl-nowrap {
+  white-space: nowrap;
+}
+
+.tbl-z0 {
+  z-index: 0;
+}
+.tbl-z1 {
+  z-index: 1;
+}
+.tbl-z2 {
+  z-index: 2;
+}
+.tbl-z3 {
+  z-index: 3;
+}
+.tbl-z4 {
+  z-index: 4;
+}
+
+.tbl-sticky {
+  position: sticky;
+}
+.tbl-sticky-b {
+  bottom: 0;
+}
+.tbl-sticky-l {
+  left: 0;
+}
+.tbl-sticky-t {
+  top: 0;
+}
+.tbl-sticky-r {
+  right: 0;
+}
+
+.tbl-col {
+  border-color: black;
+  border-style: solid;
+  border-top-width: 1px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 16px;
+}
+
+.tbl-foot {
+  border-color: black;
+  border-style: solid;
+  border-top-width: 1px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 16px;
+}
+
+.tbl-row {
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 16px;
+}
+
+.tbl-head {
+  border-color: black;
+  border-style: solid;
+  border-top-width: 1px;
+  padding-bottom: 16px;
+  padding-left: 12px;
+  padding-right: 12px;
+  padding-top: 16px;
+}
+
 /* Head
 ---------------------------------*/
 .head {
diff --git a/packages/temple-web/src/components/code-preview.tml b/packages/temple-web/src/components/code-preview.tml
index 2308dd4..0d2a600 100644
--- a/packages/temple-web/src/components/code-preview.tml
+++ b/packages/temple-web/src/components/code-preview.tml
@@ -12,7 +12,6 @@
   }
 </style>
 <script>
-  import { props } from '@ossph/temple';
-  const { children } = props();
+  import { children } from '@ossph/temple';
 </script>
-<div class="preview">{children}</div>
\ No newline at end of file
+<div class="preview">{children()}</div>
\ No newline at end of file
diff --git a/packages/temple-web/src/components/code-snippet.tml b/packages/temple-web/src/components/code-snippet.tml
index 633644f..f18bade 100644
--- a/packages/temple-web/src/components/code-snippet.tml
+++ b/packages/temple-web/src/components/code-snippet.tml
@@ -3,7 +3,6 @@
   :host {
     display: block;
     font-size: 16px;
-    line-height: 26px;
   }
   .snippet {
     background-color: #101113;
@@ -67,19 +66,33 @@
   .snippet .hljs-type {
     color: #C3937B;
   }
+  .terminal {
+    background-color: #000000;
+    padding: 10px;
+  }
+  .terminal span {
+    color: #00FF00;
+  }
 </style>
 <script>
-  import { props } from '@ossph/temple';
-  const { lang = 'html', children } = props();
+  import { props, children } from '@ossph/temple';
+  const { lang = 'html' } = props();
   const language = `language-${lang}`;
 
+  const snippet = children()[0];
+
   const highlight = event => {
     const code = hljs.highlight(
-      children[0].textContent,
+      snippet.textContent,
       { language: lang }
     ).value;
     event.detail.target.innerHTML = code;
     hljs.lineNumbersBlock(event.detail.target);
   };
 </script>
-<pre class="snippet"><code class=language mount=highlight></code></pre>
+<if true={lang === 'bash'}>
+  <div class="terminal"><span>$</span> {children()}</div>
+<else />
+  <pre class="snippet"><code class=language mount=highlight></code></pre>
+</if>
+
diff --git a/packages/temple-web/src/components/panel-main.tml b/packages/temple-web/src/components/panel-main.tml
index 2e8c638..54aea3c 100644
--- a/packages/temple-web/src/components/panel-main.tml
+++ b/packages/temple-web/src/components/panel-main.tml
@@ -1 +1 @@
-<main>{props.children}</main>
\ No newline at end of file
+<main>{children()}</main>
\ No newline at end of file
diff --git a/packages/temple-web/src/components/tui-button.tml b/packages/temple-web/src/components/tui-button.tml
index f6186ca..1a0f330 100644
--- a/packages/temple-web/src/components/tui-button.tml
+++ b/packages/temple-web/src/components/tui-button.tml
@@ -36,7 +36,7 @@
 </style>
 <script>
   //this is only called on server side
-  import { props } from '@ossph/temple';
+  import { props, children } from '@ossph/temple';
   // Separate component related props from field attributes
   const { 
     block,     full,    color,
@@ -48,8 +48,7 @@
     error,     muted,   primary, 
     secondary, outline, transparent, 
     solid,     style,   classname,   
-    children,  href,
-    ...attributes 
+    href,      ...attributes 
   } = props();
 
   const defaults = {
@@ -144,11 +143,11 @@
 </script>
 <if true={!!href}>
   <a class={map.classes} style={map.style} href={href} {...attributes}>
-    {children}
+    {children()}
   </a>
 </if>
 <if true={!href}>
   <button class={map.classes} style={map.style} {...attributes}>
-    {children}
+    {children()}
   </button>
 </if>
\ No newline at end of file
diff --git a/packages/temple-web/src/components/tweet-box.tml b/packages/temple-web/src/components/tweet-box.tml
index be362ab..9310791 100644
--- a/packages/temple-web/src/components/tweet-box.tml
+++ b/packages/temple-web/src/components/tweet-box.tml
@@ -38,8 +38,8 @@
   }
 </style>
 <script>
-  import { props } from '@ossph/temple';
-  const { name, handle, href, src, children } = props();
+  import { props, children } from '@ossph/temple';
+  const { name, handle, href, src } = props();
 </script>
 <main class="tweet-box">
   <aside class="avatar">
@@ -48,6 +48,6 @@
   <section class="content">
     <h3>{name}</h3>
     <a {href} target="_blank">{handle}</a>
-    <div class="message">{children}</div>
+    <div class="message">{children()}</div>
   </section>
 </main>
diff --git a/packages/temple-web/src/components/window-app.tml b/packages/temple-web/src/components/window-app.tml
index 497f68a..40e1bb8 100644
--- a/packages/temple-web/src/components/window-app.tml
+++ b/packages/temple-web/src/components/window-app.tml
@@ -69,8 +69,8 @@
   }
 </style>
 <script>
-  import { props } from '@ossph/temple';
-  const { title, children } = props();
+  import { props, children } from '@ossph/temple';
+  const { title } = props();
 </script>
 <div class="window">
   <div class="head">
@@ -79,5 +79,5 @@
     <span class="dot"></span>
     <span class="title">{title}</span>
   </div>
-  <div class="body">{children}</div>
+  <div class="body">{children()}</div>
 </div>
\ No newline at end of file
diff --git a/packages/temple-web/src/index.ts b/packages/temple-web/src/index.ts
index d950489..3a5aa3a 100644
--- a/packages/temple-web/src/index.ts
+++ b/packages/temple-web/src/index.ts
@@ -1,9 +1,13 @@
+import type { Request, Response } from 'express';
+
 import fs from 'fs';
 import path from 'path';
 import express from 'express';
 import { dev, inject } from '@ossph/temple-dev';
 import engine from '@ossph/temple-express';
 
+type Next = () => void;
+
 //setup an HTTP server
 const app = express();
 //let's use express' template engine feature
@@ -21,10 +25,23 @@ app.use('/temple', express.static('public'));
 //attach the dev middleware
 app.use(dev({ cwd: __dirname }));
 
+//error handling
+app.use((err: Error, req: Request, res: Response, next: Next) => {
+  console.error(err);
+  res.status(500);
+  res.render('500', { error: err.message });
+  next();
+});
+
 app.get('/temple/**', (req, res) => {
   const props = { title: 'Temple Documentation' };
   // ex. app
-  const route = req.path.substring(8);
+  const route = (() => {
+    if (req.path.endsWith('.html')) {
+      return req.path.substring(8, req.path.length - 5);
+    }
+    return req.path.substring(8)
+  })();
   //if route is empty, go to index
   if (route.length === 0) {
     res.type('text/html');
diff --git a/packages/temple-web/src/pages/500.tml b/packages/temple-web/src/pages/500.tml
new file mode 100644
index 0000000..3209fce
--- /dev/null
+++ b/packages/temple-web/src/pages/500.tml
@@ -0,0 +1,39 @@
+<link rel="import" type="template" href="@/templates/html-head.tml" />
+<link rel="import" type="template" href="@/templates/panel-head.tml" />
+<link rel="import" type="component" href="@/components/panel-main.tml" />
+<style>
+  p { padding: 20px; }
+</style>
+<script>
+  //This is ran on both the server and the browser
+  //There is no signal, children prop here because 
+  //this is not a component.
+  //
+  //We also need to becareful with importing browser 
+  //scripts here. You should do that in the <head>
+  //instead.
+  import { props } from '@ossph/temple';
+
+  const url = '/temple/500.html';
+  const title = 'Oops... - Temple - The reactive web component template engine.';
+  const description = 'Temple is a template engine hat generates web components and support reactivity.';
+
+  const { error } = props();
+
+  const toggle = _ => {
+    document.body.classList.toggle('panel-left-open');
+  };
+</script>
+<html>
+  <html-head />
+  <body class="dark panel with-head">
+    <panel-head />
+    <panel-main class="panel-main">
+      <div class="container">
+        <h1>Oops...</h1>
+        <p>Something went wrong. Please try again later.</p>
+        <pre>{error || ''}</pre>
+      </div>
+    </panel-main>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/temple-web/src/pages/ast.tml b/packages/temple-web/src/pages/ast.tml
new file mode 100644
index 0000000..635c1e0
--- /dev/null
+++ b/packages/temple-web/src/pages/ast.tml
@@ -0,0 +1,73 @@
+<link rel="import" type="template" href="@/templates/html-head.tml" />
+<link rel="import" type="template" href="@/templates/panel-head.tml" />
+<link rel="import" type="component" href="@/components/panel-main.tml" />
+<link rel="import" type="component" href="@/components/tui-button.tml" />
+<style>
+  .form {
+    display: flex;
+    flex-direction: column;
+    height: calc(100% - 40px);
+    padding: 20px;
+  }
+  .form .action {
+    margin-bottom: 10px;
+  }
+  .form .grow {
+    display: flex;
+    flex-grow: 1;
+  }
+  .form .input {
+    background-color: white;
+    border-radius: 5px;
+    color: black;
+    flex: 1;
+    font-family: Courier, monospace;
+    font-size: 16px;
+    overflow: scroll;
+    padding: 10px;
+  }
+  .form .results {
+    background-color: var(--bg-secondary);
+    border-radius: 5px;
+    color: var(--fg-primary);
+    flex: 1;
+    font-family: Courier, monospace;
+    font-size: 16px;
+    padding: 10px;
+  }
+</style>
+<script>
+  //This is ran on both the server and the browser
+  //There is no signal, children prop here because 
+  //this is not a component.
+  //
+  //We also need to becareful with importing browser 
+  //scripts here. You should do that in the <head>
+  //instead.
+  const url = '/';
+  const title = 'Temple - The reactive web component template engine.';
+  const description = 'Temple is a template engine hat generates web components and support reactivity.';
+  const ast = _ => {
+    const input = this.querySelector('.input').innerText.trim();
+  };
+  const toggle = _ => {
+    document.body.classList.toggle('panel-left-open');
+  };
+</script>
+<html>
+  <html-head />
+  <body class="dark panel with-head">
+    <panel-head />
+    <panel-main class="panel-main">
+      <section class="form">
+        <div class="action">
+          <tui-button info curved xl click=ast>Show AST</tui-button>
+        </div>
+        <div class="grow">
+          <div class="input" contenteditable></div>
+          <div class="results"></div>
+        </div>
+      </section>
+    </panel-main>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/temple-web/src/pages/docs/index.tml b/packages/temple-web/src/pages/docs/index.tml
index ae8270c..07bed04 100644
--- a/packages/temple-web/src/pages/docs/index.tml
+++ b/packages/temple-web/src/pages/docs/index.tml
@@ -10,17 +10,31 @@
     margin: 0;
     padding: 0;
   }
+  h1 { text-transform: uppercase; }
   a, a:link, a:hover, a:active, a:visited {
     color: var(--fg-primary);
     text-decoration: none;
   }
   p, li {
-    font-size: 20px;
     line-height: 36px;
   }
+  th {
+    padding: 10px;
+    text-align: left;
+    text-transform: uppercase;
+  }
+  td {
+    border-color: var(--muted);
+    border-top-style: solid;
+    border-top-width: 1px;
+    padding: 10px;
+  }
   .fab, .fas, .fa {
     line-height: 16px;
   }
+  .container {
+    padding: 10px 20px;
+  }
   
 </style>
 <script>
@@ -45,7 +59,43 @@
     <panel-head />
     <panel-left />
     <panel-main class="panel-main">
-      something
+      <h1 class="container">Documentation</h1>
+      <p class="container">
+        Temple is a template engine with a built-in compiler that 
+        generates HTML markup, web components and support reactivity. 
+      </p>
+      <p class="container">
+        Temple can be used as a template engine on the server side, as a
+        site generator to make static websites and single page 
+        applications, and can be used to publish native HTML5 web 
+        components. The focus of the Temple project are the following.
+      </p>
+      <div class="tbl-container container">
+        <table class="tbl">
+          <thead>
+            <th>Features</th>
+            <th>De-Features</th>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Template Engine</td>
+              <td>No Hydration</td>
+            </tr>
+            <tr>
+              <td>Web Components</td>
+              <td>No Hooks</td>
+            </tr>
+            <tr>
+              <td>Server First</td>
+              <td>No Memo</td>
+            </tr>
+            <tr>
+              <td>Reactive Signals</td>
+              <td>No Brandcuffs</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
       <footer class="foot"></footer>
     </panel-main>
   </body>
diff --git a/packages/temple-web/src/pages/docs/started.tml b/packages/temple-web/src/pages/docs/started.tml
index e69de29..7da4046 100644
--- a/packages/temple-web/src/pages/docs/started.tml
+++ b/packages/temple-web/src/pages/docs/started.tml
@@ -0,0 +1,79 @@
+<link rel="import" type="template" href="@/templates/html-head.tml" />
+<link rel="import" type="template" href="@/templates/panel-head.tml" />
+<link rel="import" type="template" href="@/templates/panel-left.tml" />
+<link rel="import" type="component" href="@/components/panel-main.tml" />
+<link rel="import" type="component" href="@/components/window-app.tml" />
+<link rel="import" type="component" href="@/components/code-snippet.tml" />
+<style>
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  h1, h2, h3, h4, h5, h6, p {
+    margin: 0;
+    padding: 0;
+  }
+  h1 { text-transform: uppercase; }
+  a, a:link, a:hover, a:active, a:visited {
+    color: var(--fg-primary);
+    text-decoration: none;
+  }
+  p, li {
+    line-height: 36px;
+  }
+  th {
+    padding: 10px;
+    text-align: left;
+    text-transform: uppercase;
+  }
+  td {
+    border-color: var(--muted);
+    border-top-style: solid;
+    border-top-width: 1px;
+    padding: 10px;
+  }
+  .fab, .fas, .fa {
+    line-height: 16px;
+  }
+  .container {
+    padding: 10px 20px;
+  }
+  
+</style>
+<script>
+  //This is ran on both the server and the browser
+  //There is no signal, children prop here because 
+  //this is not a component.
+  //
+  //We also need to becareful with importing browser 
+  //scripts here. You should do that in the <head>
+  //instead.
+  import { globals } from '@ossph/temple';
+  const url = '/docs/';
+  const title = 'Getting Started - Temple reactive web component template engine.';
+  const description = 'Temple is a template engine hat generates web components and support reactivity.';
+  const toggle = _ => {
+    document.body.classList.toggle('panel-left-open');
+  };
+</script>
+<html>
+  <html-head />
+  <body class="dark panel with-head with-left">
+    <panel-head />
+    <panel-left />
+    <panel-main class="panel-main">
+      <h1 class="container">Getting Started</h1>
+      <p class="container">
+        To use Temple in your project, run one of the 
+        following commands in your terminal: 
+      </p>
+      <div class="container">
+        <window-app title="Terminal">
+          <code-snippet lang="bash">
+            npm install @ossph/temple
+          </code-snippet>
+        </window-app>
+      </div>
+      <footer class="foot"></footer>
+    </panel-main>
+  </body>
+</html>
\ No newline at end of file
diff --git a/packages/temple-web/src/pages/index.tml b/packages/temple-web/src/pages/index.tml
index 2977d90..dc77f7c 100644
--- a/packages/temple-web/src/pages/index.tml
+++ b/packages/temple-web/src/pages/index.tml
@@ -198,10 +198,10 @@
         <img src="/temple/temple-icon.png" alt="Temple Logo" />
         <h1>Temple</h1>
         <p>The reactive web component template engine.</p>
-        <tui-button primary xl rounded style="margin-right:10px;" href="/temple/docs/get-started">
+        <tui-button primary xl rounded style="margin-right:10px;" href="/temple/docs/started.html">
           Get Started
         </tui-button>
-        <tui-button secondary xl rounded href="/temple/docs">
+        <tui-button secondary xl rounded href="/temple/docs/index.html">
           Read the Docs
         </tui-button>
       </section>
diff --git a/packages/temple-web/src/templates/panel-head.tml b/packages/temple-web/src/templates/panel-head.tml
index 5293e40..f1b5c13 100644
--- a/packages/temple-web/src/templates/panel-head.tml
+++ b/packages/temple-web/src/templates/panel-head.tml
@@ -1,7 +1,9 @@
 <header class="head panel-head">
   <i class="menu fas fa-fw fa-bars" click=toggle></i>
-  <img src="/temple/temple-icon.png" alt="Temple Logo" />
-  <h3>Temple</h3>
+  <a href="/temple">
+    <img src="/temple/temple-icon.png" alt="Temple Logo" />
+  </a>
+  <h3><a class="tx-white" href="/temple">Temple</a></h3>
   <nav>
     <a href="/temple/docs">Docs</a>
     <a 
diff --git a/packages/temple-web/src/templates/panel-left.tml b/packages/temple-web/src/templates/panel-left.tml
index 00dc729..4418441 100644
--- a/packages/temple-web/src/templates/panel-left.tml
+++ b/packages/temple-web/src/templates/panel-left.tml
@@ -1,12 +1,14 @@
 <aside class="left panel-left">
   <header>
-    <img src="/temple/temple-icon.png" alt="Temple Logo" />
-    <h3>Temple</h3>
+    <a href="/temple">
+      <img src="/temple/temple-icon.png" alt="Temple Logo" />
+    </a>
+    <h3><a class="tx-white" href="/temple">Temple</a></h3>
     <i class="toggle fas fa-fw fa-chevron-left" click=toggle></i>
   </header>
   <nav>
     <h6>Introduction</h6>
-    <a href="/temple/docs/prologue.html">Prologue</a>
+    <a href="/temple/docs/index.html">Prologue</a>
     <a href="/temple/docs/started.html">Getting Started</a>
     <a href="/temple/docs/questions.html">Frequent Questions</a>
 
diff --git a/packages/temple/package.json b/packages/temple/package.json
index 51399f8..c829a4a 100644
--- a/packages/temple/package.json
+++ b/packages/temple/package.json
@@ -34,11 +34,11 @@
     "typescript": "5.5.4"
   },
   "devDependencies": {
-    "@types/chai": "4.3.5",
+    "@types/chai": "4.3.17",
     "@types/expect": "24.3.0",
     "@types/mocha": "10.0.1",
     "@types/node": "22.0.0",
-    "chai": "5.1.1",
+    "chai": "4.5.0",
     "mocha": "10.2.0",
     "nyc": "17.0.0",
     "ts-mocha": "10.0.0",
diff --git a/packages/temple/src/client.ts b/packages/temple/src/client.ts
index 95671fa..c516ca1 100644
--- a/packages/temple/src/client.ts
+++ b/packages/temple/src/client.ts
@@ -1,7 +1,7 @@
 export type * from './client/types';
 
 import TempleComponent from './client/TempleComponent';
-import TempleDocument from './client/TempleDocument';
+import TempleRegistry from './client/TempleRegistry';
 import TempleElement from './client/TempleElement';
 import emitter, { TempleEmitter } from './client/TempleEmitter';
 import TempleException from './client/TempleException';
@@ -19,7 +19,7 @@ export {
   signal, 
   emitter,
   TempleComponent,
-  TempleDocument,
+  TempleRegistry,
   TempleElement,
   TempleEmitter,
   TempleException,
diff --git a/packages/temple/src/client/TempleComponent.ts b/packages/temple/src/client/TempleComponent.ts
index 4bcf1f6..5afd85d 100644
--- a/packages/temple/src/client/TempleComponent.ts
+++ b/packages/temple/src/client/TempleComponent.ts
@@ -1,6 +1,6 @@
 import type { Hash } from './types';
 
-import TempleDocument from './TempleDocument';
+import TempleDocument from './TempleRegistry';
 import TempleElement from './TempleElement';
 import emitter from './TempleEmitter';
 import __APP_DATA__ from './data';
@@ -261,7 +261,7 @@ export default abstract class TempleComponent extends HTMLElement {
       this._children = Array.from(this.childNodes || []);
     }
     //settings props will try to trigger a render
-    this.props = { ...this.props, children: this._children };
+    this.props = Object.assign({}, this.element.attributes);
     //only render if not initiated
     if (!this._initiated) {
       this.render();
diff --git a/packages/temple/src/client/TempleDocument.ts b/packages/temple/src/client/TempleRegistry.ts
similarity index 91%
rename from packages/temple/src/client/TempleDocument.ts
rename to packages/temple/src/client/TempleRegistry.ts
index ea04c5e..8fd3ea7 100644
--- a/packages/temple/src/client/TempleDocument.ts
+++ b/packages/temple/src/client/TempleRegistry.ts
@@ -7,17 +7,17 @@ import TempleElement from './TempleElement';
  * A registry of all TempleElement/TempleComponent instances 
  * to add better attribute handling
  */
-export default class TempleDocument {
+export default class TempleRegistry {
   //prefix brand
   protected static _brand = 'temple';
   //A registry of all TempleElement instances
-  protected static _registry = new Map<Element, TempleElement>();
+  protected static _elements = new Map<Element, TempleElement>();
 
   /**
    * Returns the registry
    */
-  public static get registry() {
-    return this._registry;
+  public static get elements() {
+    return this._elements;
   }
 
   /**
@@ -111,7 +111,7 @@ export default class TempleDocument {
    */
   public static filter(callback: RegistryIterator<boolean>) {
     const elements: TempleElement[] = [];
-    this._registry.forEach((temple, html) => {
+    this._elements.forEach((temple, html) => {
       if (callback(temple, html)) {
         elements.push(temple);
       }
@@ -123,7 +123,7 @@ export default class TempleDocument {
    * Returns the TempleElement instance for the given element
    */
   public static get(element: Element) {
-    return this._registry.get(element) || null;
+    return this._elements.get(element) || null;
   }
 
   /**
@@ -131,7 +131,7 @@ export default class TempleDocument {
    */
   public static map<T = any>(callback: RegistryIterator<T>) {
     const elements: T[] = [];
-    this._registry.forEach((temple, html) => {
+    this._elements.forEach((temple, html) => {
       elements.push(callback(temple, html));
     });
     return elements;
@@ -141,11 +141,11 @@ export default class TempleDocument {
    * Registers a new TempleElement instance
    */
   public static register(element: Element, attributes?: Record<string, any>) {
-    if (this._registry.has(element)) {
+    if (this._elements.has(element)) {
       return this.get(element);
     }
     const node = new TempleElement(element, attributes || {});
-    this._registry.set(element, node);
+    this._elements.set(element, node);
     return node;
   }
 }
\ No newline at end of file
diff --git a/packages/temple/src/client/helpers.ts b/packages/temple/src/client/helpers.ts
index 41eafe9..1f3c07f 100644
--- a/packages/temple/src/client/helpers.ts
+++ b/packages/temple/src/client/helpers.ts
@@ -1,6 +1,6 @@
 import type { TempleEvent } from './types';
 import type TempleComponent from './TempleComponent';
-import TempleDocument from './TempleDocument';
+import TempleDocument from './TempleRegistry';
 import TempleElement from './TempleElement';
 import TempleEmitter from './TempleEmitter';
 
diff --git a/packages/temple/src/client/types.ts b/packages/temple/src/client/types.ts
index eac990d..7f2730a 100644
--- a/packages/temple/src/client/types.ts
+++ b/packages/temple/src/client/types.ts
@@ -1,4 +1,4 @@
-import type TempleDocument from './TempleDocument';
+import type TempleDocument from './TempleRegistry';
 import type TempleComponent from './TempleComponent';
 
 export type Hash = Record<string, any>;
diff --git a/packages/temple/src/compiler.ts b/packages/temple/src/compiler.ts
index dffdc82..762622f 100644
--- a/packages/temple/src/compiler.ts
+++ b/packages/temple/src/compiler.ts
@@ -49,7 +49,7 @@ import DocumentBuilder, {
   tmlPlugin as tmlESBuildPlugin, 
   docPlugin as docESBuildPlugin
 } from './document/Builder';
-import FileLoader from './Loader';
+import FileLoader from './filesystem/FileLoader';
 
 export {
   AbstractDirective,
diff --git a/packages/temple/src/component/Component.ts b/packages/temple/src/component/Component.ts
index 4a3b77e..20f9aae 100644
--- a/packages/temple/src/component/Component.ts
+++ b/packages/temple/src/component/Component.ts
@@ -1,19 +1,14 @@
 //types
-import type { 
-  ComponentToken,
-  AST,
-  ComponentOptions,
-  ComponentRegistry
-} from './types';
-//file systems
-import fs from 'fs';
+import type FSInterface from '../filesystem/FSInterface';
+import type { AST, ComponentOptions } from './types';
+//filesystem
 import path from 'path';
-import FileLoader from '../Loader';
+import FileLoader from '../filesystem/FileLoader';
+import FileSystem from '../filesystem/FileSystem';
 //parsers/compilers
 import Tokenizer from './Tokenizer';
 //helpers
-import { camelize, slugify, serialize } from './helpers';
-import Exception from './Exception';
+import { camelize, encrypt, slugify } from './helpers';
 
 /**
  * The Temple Compiler
@@ -22,29 +17,33 @@ import Exception from './Exception';
  * as a template engine or a static site generator.
  */
 export default class Component {
-  //the absolute source file location
-  protected _absolute: string;
   //cached AST
   protected _ast: AST|null = null;
   //prefix brand
   protected _brand: string;
+  //cache of component instances
+  protected _components: Component[]|undefined;
   //current working directory
-  //we need this to locate and compile imported components
   protected _cwd: string;
-  //file system to use
-  protected _fs: typeof fs;
+  //filesystem to use
+  protected _fs: FSInterface;
+  //the name of the component
+  protected _name: string;
   //file loader helper
   protected _loader: FileLoader;
-  //the tag name of the component
-  protected _tagname: string;
-  //the original parsed component token
-  protected _token: ComponentToken|null;
-  //the compiled components cache
-  protected _registry: ComponentRegistry;
-  //the source file location
-  protected _sourceFile: string;
-  //type of the source file
+  //the seed to use for encoding the path
+  protected _seed: string;
+  //the source file
+  protected _source: string;
+  //the component type
   protected _type: 'document'|'component'|'template';
+
+  /**
+   * Returns the absolute path to the file
+   */
+  public get absolute() {
+    return this._loader.absolute(this._source, this._cwd);
+  }
   
   /**
    * Returns abstract syntax tree
@@ -57,24 +56,6 @@ export default class Component {
 
     return this._ast;
   }
-  
-  /**
-   * Gets the absolute source file
-   */
-  public get absolute() {
-    return this._absolute;
-  }
-
-  /**
-   * Returns the source file basename
-   */
-  public get basename() {
-    //determine class name
-    return path.basename(
-      this._sourceFile, 
-      path.extname(this._sourceFile)
-    );
-  }
 
   /**
    * Gets the brand prefix
@@ -84,57 +65,82 @@ export default class Component {
   }
 
   /**
-   * Returns the class name (based on the basename)
+   * Returns the class name (ie. PascalCase)
    */
   public get classname() {
-    return camelize(this.basename);
+    if (/^[0-9]/.test(this._name)) {
+      return `N${this._name}_${this.id}`;
+    }
+    return `${camelize(this._name)}_${this.id}`;
   }
 
   /**
-   * Returns the compiled components directly 
-   * imported by the main source file
+   * Returns the imported components
    */
   public get components() {
-    return this.ast.components.map(
-      token => this._component(token)
-    );
+    if (!this._components) {
+      this._components = this.ast.components.map(component => {
+        //get property attributes
+        const properties = component.attributes.properties;
+        //find type property
+        const property = properties.find(
+          property => property.key.name === 'type'
+        );
+        //determine the type of component
+        const type = (
+          //if property is found
+          property 
+          //and the value type is a literal
+          && property.value.type === 'Literal'
+          //and the value is 'template'
+          && property.value.value === 'template'
+        ) ? 'template' : 'component';
+          
+        return new Component(component.source.value, {
+          cwd: this._cwd,
+          fs: this._fs,
+          seed: this._seed,
+          type: type
+        });
+      });
+    }
+    return this._components;
   }
 
   /**
    * Returns the source file contents
    */
   public get contents() {
-    return this._fs.readFileSync(this._absolute, 'utf-8');
+    return this._fs.readFileSync(this.absolute, 'utf-8');
   }
 
   /**
-   * Gets the current working directory
+   * Returns the current working directory
    */
   public get cwd() {
     return this._cwd;
   }
 
   /**
-   * Gets the file system
+   * Returns the dirname of the source file
    */
-  public get fs() {
-    return this._fs;
+  public get dirname() {
+    return path.dirname(this.absolute);
   }
 
   /**
-   * Returns the unique id of the source file
+   * Returns the filesystem being used
    */
-  public get id() {
-    const relative = path.relative(this._cwd, this._sourceFile);
-    return serialize(relative + this.tagname);
+  public get fs() {
+    return this._fs;
   }
 
   /**
    * Returns the tml imports information
+   * these imports are extracted from the <script>
    */
   public get imports() {
     return this.ast.imports.map(token => ({
-      id: serialize(token.source.value),
       typeOnly: token.typeOnly,
       names: token.names?.map(name => name.value),
       default: token.default?.value,
@@ -143,31 +149,35 @@ export default class Component {
   }
 
   /**
-   * Returns the file loader
+   * Returns the unique id of the source file
    */
-  public get loader() {
-    return this._loader;
+  public get id() {
+    return encrypt(this.relative, this._seed);
   }
 
   /**
-   * Returns the present working directory
+   * Returns the markup tokens
    */
-  public get pwd() {
-    return path.dirname(this.absolute);
+  public get markup() {
+    return this.ast.markup;
   }
 
   /**
-   * Returns the registry of compiled components
+   * Returns the path relative to cwd
    */
-  public get registry() {
-    return Object.values(this._registry);
+  public get relative() {
+    const relative = path.relative(this._cwd, this.absolute);
+    if (relative.startsWith('.')) {
+      return relative;
+    }
+    return `./${relative}`;
   }
-
+  
   /**
-   * Returns the relative path from the cwd
+   * Returns the source code
    */
-  public get relative() {
-    return path.relative(this.cwd, this.absolute);
+  public get source() {
+    return this._source;
   }
 
   /**
@@ -177,13 +187,6 @@ export default class Component {
     return this.ast.scripts.map(script => script.source);
   }
 
-  /**
-   * Gets the source file
-   */
-  public get sourceFile() {
-    return this._sourceFile;
-  }
-
   /**
    * Returns the compiled styles
    */
@@ -192,22 +195,14 @@ export default class Component {
   }
 
   /**
-   * Returns the tag name
+   * Returns the tag name (ie. kebab-case)
    */
   public get tagname() {
-    return this._tagname;
+    return slugify(this._name);
   }
 
   /**
-   * Returns the original parsed component token
-   * (If child)
-   */
-  get token() {
-    return this._token;
-  }
-
-  /**
-   * Returns the type of source file
+   * Returns the component type
    */
   public get type() {
     return this._type;
@@ -216,140 +211,28 @@ export default class Component {
   /**
    * Sets the source code to compile
    */
-  public constructor(
-    sourceFile: string, 
-    options: ComponentOptions,
-    registry: ComponentRegistry = {}
-  ) {
-    //set the type
-    this._type = options.type || 'component';
-    //set the source file
-    this._sourceFile = sourceFile;
-    //set the file system
-    this._fs = options.fs || fs;
-    //set the current working directory
-    this._cwd = options.cwd || process.cwd();
+  public constructor(source: string, options: ComponentOptions = {}) {
     //set the prefix brand
     this._brand = typeof options.brand === 'string'
       ? options.brand
       : 'temple';
-    //file loader
+    //current working directory
+    this._cwd = options.cwd || process.cwd();
+    //filesystem to use
+    this._fs = options.fs || new FileSystem();
+    //file loader helper
     this._loader = new FileLoader(this._fs);
-    //generated initializers
-    this._absolute = this._loader.absolute(this._sourceFile, this._cwd);
-    if (!this._fs.existsSync(this._absolute)) {
-      throw Exception.for('File not found: %s', this._absolute);
-    }
-    //the component namespace
-    this._tagname = slugify(options.name || this.basename);
-    //set the token
-    this._token = options.token || null;
-    //set registry
-    this._registry = registry;
-  }
-
-  /**
-   * Returns the compiled component directly 
-   * imported by the main source file
-   */
-  protected _component(token: ComponentToken) {
-    //if the source file is prefixed with @/
-    const inputSourceFile = token.source.value.startsWith('@/')
-      //find the absolute file path relative to cwd
-      ? this._loader.absolute(
-        token.source.value.replace('@/', './'),
-        this.cwd
-      )
-      //find the absolute file path relative to this file 
-      : this._loader.absolute(
-        token.source.value,
-        this.pwd
-      );
-    
-    //now find the relative path to the cwd
-    const relativeSourceFile = path.relative(this._cwd, inputSourceFile);
-    // This will also be used as the key name because it's the best 
-    // way to make sure the component is unique because it's possible 
-    // for components to have the same name it's also possible for 
-    // components to have the tag name (although rare)
-
-    const name = this._getComponentName(token, inputSourceFile);
-    const type = this._getComponentType(token);
-    const id = serialize(relativeSourceFile + name);
-
-    //if the component is not compiled yet
-    if (!this._registry[id]) {
-      //make a new compiler
-      this._registry[id] = new Component(
-        `./${relativeSourceFile}`,
-        {
-          fs: this._fs,
-          cwd: this._cwd,
-          brand: this._brand,
-          name: name,
-          token: token,
-          type: type
-        },
-        this._registry
-      );
-      //call components to render
-      this._registry[id].components;
-    }
-    //return the compiled component
-    return this._registry[id];
-  }
-
-  /**
-   * Determines the component name
-   */
-  protected _getComponentName(
-    token: ComponentToken, 
-    sourceFile: string
-  ) {
-    //the name is the basename by default
-    let name = path.basename(
-      sourceFile, 
-      path.extname(sourceFile)
-    )
-    //get property attributes
-    const properties = token.attributes.properties;
-    //find name property
-    const property = properties.find(
-      property => property.key.name === 'name'
-    );
-    //if property is found
-    if (property 
-      //and the value type is a literal
-      && property.value.type === 'Literal'
-      //and the value is 'template'
-      && typeof property.value.value === 'string'
-    ) {
-      name = property.value.value;
-    }
-    //return a slugified name
-    return slugify(name);
-  }
-
-  /**
-   * Determines the component type
-   */
-  protected _getComponentType(token: ComponentToken): 'component'|'template' {
-    //get property attributes
-    const properties = token.attributes.properties;
-    //find type property
-    const property = properties.find(
-      property => property.key.name === 'type'
-    );
-    //if property is found
-    if (property 
-      //and the value type is a literal
-      && property.value.type === 'Literal'
-      //and the value is 'template'
-      && property.value.value === 'template'
-    ) {
-      return 'template';
-    }
-    //it's component by default
-    return 'component';
+    //the name of the component
+    this._name = options.name || path.basename(source, path.extname(source));
+    //the seed to use for encoding the build id
+    this._seed = options.seed || 'temple';
+    //ex. /path/to/component.tml
+    //ex. ./path/to/component.tml
+    //ex. ../path/to/component.tml
+    //ex. @/path/to/component.tml
+    //ex. path/to/component.tml
+    this._source = source;
+    //the component type
+    this._type = options.type || 'component';
   }
 }
\ No newline at end of file
diff --git a/packages/temple/src/component/Transpiler.ts b/packages/temple/src/component/Transpiler.ts
index c29bead..94c6629 100644
--- a/packages/temple/src/component/Transpiler.ts
+++ b/packages/temple/src/component/Transpiler.ts
@@ -1,10 +1,6 @@
 //types
 import type { ProjectOptions } from 'ts-morph';
-import type { 
-  ComponentToken,
-  MarkupToken,
-  MarkupChildToken,
-} from './types';
+import type { MarkupToken, MarkupChildToken } from './types';
 import type DirectiveInterface from '../directives/DirectiveInterface';
 import type Component from './Component';
 //file systems
@@ -57,7 +53,7 @@ export default class Transpiler {
   /**
    * Sets the compiler and generator options
    */
-  constructor(component: Component, tsconfig: string) {
+  constructor(component: Component, tsconfig?: string) {
     //compiler
     this._component = component;
     this._config = {
@@ -101,37 +97,37 @@ export default class Transpiler {
    */
   public transpile() {
     const { 
-      absolute, 
-      brand,
-      tagname, 
+      absolute,
       classname, 
       imports,
       styles, 
       scripts
     } = this._component;
-    const components = this._component.components
-      .filter(component => component.type === 'component')
-      .filter(component => !!component.token);
+    //determine tagname
+    const tagname = this._component.brand 
+      ? `${this._component.brand}-${this._component.tagname}`
+      : this._component.tagname;
     //get path without extension
     //ex. /path/to/Counter.tml -> /path/to/Counter
     const extname = path.extname(absolute);
     const filePath = absolute.slice(0, -extname.length);
     //create a new source file
     const { source } = this._createSourceFile(`${filePath}.ts`);
-    //import { TempleDocument, TempleComponent } from '@ossph/temple/client';
+    //import { TempleRegistry, TempleComponent } from '@ossph/temple/client';
     source.addImportDeclaration({
       moduleSpecifier: '@ossph/temple/client',
-      namedImports: [ 'TempleDocument', 'TempleComponent' ]
+      namedImports: [ 'TempleRegistry', 'TempleComponent' ]
     });
     //import Counter from './Counter'
-    components.forEach(component => {
-      const token = component.token as ComponentToken;
+    this._component.components.filter(
+      component => component.type === 'component'
+    ).forEach(component => {
       //now import
       source.addImportDeclaration({
-        moduleSpecifier: token.source.value,
+        moduleSpecifier: component.source,
         //we make sure there's no collisions
         //this is also matched when generating the component tree
-        defaultImport: `${component.classname}_${component.id}`
+        defaultImport: component.classname
       });
     });
     //import others from <script>
@@ -167,9 +163,7 @@ export default class Transpiler {
     component.addProperty({
       name: 'component',
       isStatic: true,
-      initializer: brand 
-        ? `[ '${brand}-${tagname}', '${classname}' ] as [ string, string ]`
-        : `[ '${tagname}', '${classname}' ] as [ string, string ]`
+      initializer: `[ '${tagname}', '${classname}' ] as [ string, string ]`
     });
     //public style()
     component.addMethod({
@@ -183,7 +177,10 @@ export default class Transpiler {
       statements: `${scripts.length > 0 
         ? scripts.join('\n')
         //allow scriptless components to use props
-        : (`const props = this.props;`)}
+        : (`
+          const props = this.props; 
+          const children = () => this.originalChildren;
+        `)}
         return () => ${this.markup.trim()};`
     });
 
@@ -218,10 +215,10 @@ export default class Transpiler {
         expression += this._markupElement(expression, parent, child, components);
       } else if (child.type === 'Literal') {
         if (typeof child.value === 'string') {
-          expression += `TempleDocument.createText(\`${child.value}\`)`;
+          expression += `TempleRegistry.createText(\`${child.value}\`)`;
         //null, true, false, number 
         } else {
-          expression += `TempleDocument.createText(String(${child.value}))`;
+          expression += `TempleRegistry.createText(String(${child.value}))`;
         }
       } else if (child.type === 'ProgramExpression') {
         expression += `...this._toNodeList(${child.source})`;
@@ -259,30 +256,11 @@ export default class Transpiler {
         )}`;
       }
       //business as usual
-      const componentName = `${component.classname}_${component.id}`;
-      expression += `TempleDocument.createComponent(${componentName}, {`;
+      const componentName = component.classname;
+      expression += `TempleRegistry.createComponent(${componentName}, {`;
+    //this is a tag that is not a component/template
     } else {
-      //check to see if the token refers to a 
-      //template in the registry
-      const template = Object.values(this._component.registry).find(
-        component => component.tagname === token.name 
-          && component.type === 'template'
-      );
-      if (template) {
-        //templates take no children and scope is 
-        //the same as the parent scope. template
-        //tags are simply replaced with its children
-        //syntax <x-head />
-        //NOTE: if you want scoped templates, 
-        // that's the same as a light component
-        return expression + `...${this._markup(
-          parent,
-          template.ast.markup, 
-          components
-        )}`;
-      }
-      const tagName = this._getTagName(token); 
-      expression += `TempleDocument.createElement('${tagName}', {`;
+      expression += `TempleRegistry.createElement('${token.name}', {`;
     }
     
     if (token.attributes && token.attributes.properties.length > 0) {
@@ -333,22 +311,4 @@ export default class Transpiler {
     
     return expression;
   }
-
-  /**
-   * Determines the tag name
-   */
-  protected _getTagName(token: MarkupToken) {
-    return this._isComponent(token) && this._component.brand.length > 0
-      ? `${this._component.brand}-${token.name}`
-      : token.name; 
-  }
-
-  /**
-   * Determines if the child is a component
-   */
-  protected _isComponent(token: MarkupToken) {
-    return Object
-      .values(this._component.registry)
-      .find(component => component.tagname === token.name);
-  }
 }
\ No newline at end of file
diff --git a/packages/temple/src/component/helpers.ts b/packages/temple/src/component/helpers.ts
index 511f33e..e70960b 100644
--- a/packages/temple/src/component/helpers.ts
+++ b/packages/temple/src/component/helpers.ts
@@ -31,6 +31,32 @@ export function capitalize(word: string) {
   return word.charAt(0).toUpperCase() + word.slice(1);
 }
 
+/**
+ * Decrypts an encrypted message using a seed
+ */
+export function decrypt(message: string, seed: string) {
+  const iv = crypto.scryptSync(seed, 'salt', 16);
+  const key = crypto.scryptSync(seed, 'salt', 32);
+  const decipher = crypto.createDecipheriv('aes-256-cbc', key, iv);
+  const decrypted = Buffer.concat([
+    decipher.update(Buffer.from(message, 'hex')), decipher.final()
+  ]);
+  return decrypted.toString();
+}
+
+/**
+ * Encrypts a message using a seed
+ */
+export function encrypt(message: string, seed: string) {
+  const iv = crypto.scryptSync(seed, 'salt', 16);
+  const key = crypto.scryptSync(seed, 'salt', 32);
+  const cipher = crypto.createCipheriv('aes-256-cbc', key, iv);
+  const encrypted = Buffer.concat(
+    [cipher.update(message), cipher.final()]
+  );
+  return encrypted.toString('hex');
+}
+
 /**
  * Converts a word into lower format
  * ie. "Title" to "title"
@@ -39,6 +65,16 @@ export function lowerlize(word: string) {
   return word.charAt(0).toLowerCase() + word.slice(1);
 }
 
+/**
+ * Creates a serialized hash of a string
+ */
+export function serialize(string: string) {
+  return crypto
+    .createHash('shake256', { outputLength: 10 })
+    .update(string)
+    .digest('hex');
+}
+
 /**
  * Converts a title to a slug
  * ie. "Some Title" or "SomeTitle" to "some-title"
@@ -52,16 +88,6 @@ export function slugify(string: string) {
     .toLowerCase();
 }
 
-/**
- * Creates a serialized hash of a string
- */
-export function serialize(string: string) {
-  return crypto
-    .createHash('shake256', { outputLength: 10 })
-    .update(string)
-    .digest('hex');
-}
-
 /**
  * Converts source file to typescript
  */
diff --git a/packages/temple/src/component/types.ts b/packages/temple/src/component/types.ts
index 9f4a85c..2039f42 100644
--- a/packages/temple/src/component/types.ts
+++ b/packages/temple/src/component/types.ts
@@ -1,4 +1,4 @@
-import type fs from 'fs';
+import type FSInterface from '../filesystem/FSInterface';
 import type Lexer from './Lexer';
 import type Component from './Component';
 
@@ -142,12 +142,12 @@ export type AST = {
 }
 
 //options for the component
-export type ComponentOptions = { 
-  fs?: typeof fs,
-  cwd?: string,
+export type ComponentOptions = {
   brand?: string,
+  cwd?: string,
+  fs?: FSInterface,
   name?: string,
-  token?: ComponentToken,
+  seed?: string,
   type?: 'document'|'component'|'template'
 };
 
diff --git a/packages/temple/src/document/Builder.ts b/packages/temple/src/document/Builder.ts
index e673798..49d1e4a 100644
--- a/packages/temple/src/document/Builder.ts
+++ b/packages/temple/src/document/Builder.ts
@@ -1,10 +1,11 @@
 //types
 import type { PluginBuild } from 'esbuild';
-import type { BuilderOptions, TempleDocument } from './types';
+import type TempleDocument from '../server/TempleDocument';
+import type { BuilderOptions } from './types';
 
 import path from 'path';
 import esbuild from 'esbuild';
-import FileLoader from '../Loader';
+import FileLoader from '../filesystem/FileLoader';
 import Component from '../component/Component';
 import ComponentTranspiler from '../component/Transpiler';
 import DocumentTranspiler from '../document/Transpiler';
@@ -86,7 +87,6 @@ export function tmlPlugin(parent: Component, tsconfig: string) {
           fs: parent.fs,
           cwd: parent.cwd,
           brand: parent.brand,
-          name: parent.tagname,
           type: 'component'
         })
         const transpiler = new ComponentTranspiler(component, tsconfig);
@@ -109,7 +109,7 @@ export function docPlugin(document: Component, tsconfig: string) {
         filter: /^(__SERVER_ENTRY__)|(__CLIENT_ENTRY__)$/ 
       }, args => {
         return { 
-          path: path.join(document.pwd, args.path), 
+          path: path.join(document.dirname, args.path), 
           namespace: name
         };
       });
diff --git a/packages/temple/src/document/Transpiler.ts b/packages/temple/src/document/Transpiler.ts
index fed817d..fed2c8b 100644
--- a/packages/temple/src/document/Transpiler.ts
+++ b/packages/temple/src/document/Transpiler.ts
@@ -1,9 +1,5 @@
 //types
-import type { 
-  ComponentToken, 
-  MarkupToken,
-  MarkupChildToken 
-} from '../component/types';
+import type { MarkupToken, MarkupChildToken } from '../component/types';
 import type Component from '../component/Component';
 //file systems
 import path from 'path';
@@ -18,15 +14,13 @@ export default class Transpiler extends ComponentTranspiler {
    */
   public transpile() {
     const { 
-      id,
       absolute, 
-      brand, 
+      brand,
       classname, 
       imports,
       scripts, 
       styles 
     } = this._component;
-
     //get path without extension
     //ex. /path/to/Counter.tml -> /path/to/Counter
     const extname = path.extname(absolute);
@@ -35,26 +29,25 @@ export default class Transpiler extends ComponentTranspiler {
     const { source } = this._createSourceFile(`${filePath}.ts`);
     //import { 
     //  data,
-    //  TempleElement, 
-    //  TempleDocument, 
-    //  TempleException 
+    //  TempleElement,  
+    //  TempleDocument,
+    //  TempleRegistry
     //} from '@ossph/temple/server';
     source.addImportDeclaration({
       moduleSpecifier: '@ossph/temple/server',
       namedImports: [
         'data as __APP_DATA__',
+        'TempleDocument',
         'TempleElement',  
-        'TempleDocument', 
-        'TempleException'
+        'TempleRegistry'
       ]
     });
     //import others from <script>
     imports.forEach(imported => {
       const specifier = imported.source
         //replace client with server
-        .replace('@ossph/temple/client', '@ossph/temple/server')
-        //replace client with server
-        .replace('@ossph/temple/client', '@ossph/temple/server');
+        .replaceAll('@ossph/temple/client', '@ossph/temple/server')
+        .replace(/^@ossph\/temple$/, '@ossph/temple/server');
       if (imported.default && imported.names) {
         source.addImportDeclaration({
           isTypeOnly: imported.typeOnly,
@@ -76,21 +69,21 @@ export default class Transpiler extends ComponentTranspiler {
         });
       }
     });
-    //TempleDocument.brand = 'temple';
-    source.addStatements(`TempleDocument.brand = '${brand}';`);
-    //export default class FoobarComponent
+    //TempleRegistry.brand = 'temple';
+    source.addStatements(`TempleRegistry.brand = '${brand}';`);
+    //export default class FoobarComponent extends TempleDocument
     const component = source.addClass({
-      name: `${classname}_${id}`,
-      isDefaultExport: true,
+      name: classname,
+      extends: 'TempleDocument',
+      isDefaultExport: true
     });
-    //protected _bundler: (clientScript) => string
-    component.addProperty({ name: '_client', type: 'string'});
-    //public constructor(clientScript: string)
-    component.addConstructor({
-      parameters: [ { name: 'client', type: 'string' } ],
-      statements: `this._client = client;`
+    //public id()
+    component.addMethod({
+      name: 'id',
+      returnType: 'string',
+      statements: `return '${this._component.id}';`
     });
-    //public style()
+    //public styles()
     component.addMethod({
       name: 'styles',
       returnType: 'string',
@@ -107,104 +100,6 @@ export default class Transpiler extends ComponentTranspiler {
         return ${this.markup.trim()};
       `
     });
-    //public render()
-    component.addMethod({
-      name: 'render',
-      parameters: [ 
-        { name: 'props?', type: 'Record<string, any>' } 
-      ],
-      returnType: 'string',
-      statements: (`
-        //set props (this is so template() can read it)
-        __APP_DATA__.set('props', props || {});
-        //set the current component (this is so template() can read it)
-        __APP_DATA__.set('current', this);
-        //get the styles
-        const styles = this.styles();
-        //get the children build w/o re-initializing the variables
-        const children = this.template();
-        //get the client script
-        const clientScript = this._client;
-        //reset the current component before validating
-        __APP_DATA__.delete('current');
-        
-        //NOTE: in document there is no shadow dom
-        //so there's no need to case for it...
-    
-        //used to prevent the browser from 
-        //misinterpretting these tags
-        const tags = {
-          head: 'head',
-          script: 'script',
-          style: 'style'
-        }
-    
-        //this is the <html> tag
-        let document = TempleElement.render(children).trim();
-        //check if the root element is an <html> tag
-        if (!document.toLowerCase().startsWith('<html')) {
-          throw TempleException.for('Document must start with an <html> tag.');
-        }
-
-        //we are good to go
-
-        //if there are styles
-        if (styles.length > 0) {
-          //add styles to the head
-          document = document.replace(
-            \`</\${tags.head}>\`, 
-            \`<\${tags.style}>\${styles}</\${tags.style}></\${tags.head}>\`
-          );
-        }
-        //add props and bindings to the head
-        document = document.replace(
-          \`</\${tags.head}>\`, 
-          \`<\${tags.script} class="templejs">window.__APP_DATA__ = \${JSON.stringify(
-            Object.fromEntries(__APP_DATA__.entries())
-          )};</\${tags.script}></\${tags.head}>\`
-        );
-        if (clientScript && clientScript.length > 0) {
-          //add script to the head
-          document = document.replace(
-            \`</\${tags.head}>\`, 
-            \`<\${tags.script} class="templejs">\${clientScript}</\${tags.script}></\${tags.head}>\`
-          );
-        }
-        //prettify document
-        document = document.replace(
-          \`</\${tags.head}>\`, 
-          \`<\${tags.script} class="templejs">Array.from(
-            document.head.getElementsByTagName('\${tags.script}')
-          ).filter(s => s.classList.contains('templejs')).forEach(s => s.remove());
-          </\${tags.script}></\${tags.head}>\`
-        );
-        //return the full html
-        return \`<!DOCTYPE html>\n\${document}\`;
-      `)
-    });
-    //protected _toNodeList(value: any)
-    component.addMethod({
-      name: '_toNodeList',
-      parameters: [ { name: 'value', type: 'any' } ],
-      statements: `
-        if (typeof value === 'object' 
-          && typeof value.nodeType === 'number'
-        ) {
-          return [ value ];
-        }
-    
-        if (Array.isArray(value)) {
-          if (value.every(
-            item => typeof item === 'object' 
-              && typeof item.nodeType === 'number'
-          )) {
-            return value;
-          }
-        }
-    
-        return [ TempleDocument.createText(String(value)) ];
-      `
-    });
 
     return source;
   }
@@ -215,18 +110,12 @@ export default class Transpiler extends ComponentTranspiler {
    */
   public client() {
     const { 
-      brand, 
       imports, 
       scripts, 
       ast 
     } = this._component;
-    //components and templates
-    const partials = this._component.components.filter(
-      //only components with tokens (all sub-components have this)
-      component => !!component.token
-    );
     //only components (vs templates)
-    const components = partials.filter(
+    const components = this._component.components.filter(
       component => component.type === 'component'
     );
     //create a new source file
@@ -239,24 +128,23 @@ export default class Transpiler extends ComponentTranspiler {
         'Hash' 
       ]
     });
-    //import { TempleDocument, emitter, data as __APP_DATA__ } from '@ossph/temple/client';
+    //import { TempleRegistry, emitter, data as __APP_DATA__ } from '@ossph/temple/client';
     source.addImportDeclaration({
       moduleSpecifier: '@ossph/temple/client',
       namedImports: [ 
-        'TempleDocument', 
+        'TempleRegistry', 
         'emitter', 
         'data as __APP_DATA__' 
       ]
     });
     //import Counter_abc123 from './Counter_abc123'
     components.forEach(component => {
-      const token = component.token as ComponentToken;
       //now import
       source.addImportDeclaration({
-        moduleSpecifier: token.source.value,
+        moduleSpecifier: component.source,
         //we make sure there's no collisions
         //this is also matched when generating the component tree
-        defaultImport: `${component.classname}_${component.id}`
+        defaultImport: component.classname
       });
     });
     //import others from <script>
@@ -292,7 +180,12 @@ export default class Transpiler extends ComponentTranspiler {
       //now serialize the props
       //this is predicting the order rendered on the server
       //with the order determined by doc.body.querySelectorAll
-      const __BINDINGS__: Record<string, Record<string, any>> = ${this._bindings(ast.markup, partials)};
+      const __BINDINGS__: Record<string, Record<string, any>> = ${
+        this._bindings(
+          ast.markup, 
+          this._component.components
+        )
+      };
       //loop through the initial elements before js manipulation
       for (const element of document.body.querySelectorAll('*')) {
         //pull the attributes from the rendered HTML
@@ -302,30 +195,26 @@ export default class Transpiler extends ComponentTranspiler {
           )
         );
         //determine the id of the element by its index in the registry
-        const id = String(TempleDocument.registry.size);
+        const id = String(TempleRegistry.elements.size);
         //if the element has bindings
         if (__BINDINGS__[id]) {
           //this is where we need to add the bindings to the attributes
           Object.assign(attributes, __BINDINGS__[id]);
         }
         //finally add the element to the registry
-        TempleDocument.register(element, attributes);
+        TempleRegistry.register(element, attributes);
       }
       //after we registered all the elements, we can now register the 
       //components and let it manip the HTML further if it wants to
       ${components.map(component => {
-        const { id, tagname, classname } = component;
-        if (brand.length > 0) {
-          return `customElements.define('${brand}-${tagname}', ${classname}_${id});`;
-        } else {
-          return `customElements.define('${tagname}', ${classname}_${id});`
-        }
+        const { tagname, classname } = component;
+        return `customElements.define('${tagname}', ${classname});`;
       }).join('\n')}
       //emit the mounted event
       emitter.emit('mounted', document.body);
     });`);
 
-    //export { TempleComponent, TempleDocument, ... } from '@ossph/temple/client';
+    //export { TempleComponent, TempleRegistry, ... } from '@ossph/temple/client';
     source.addExportDeclaration({
       moduleSpecifier: '@ossph/temple/client',
       namedExports: [
@@ -335,7 +224,7 @@ export default class Transpiler extends ComponentTranspiler {
         'signal', 
         'emitter',
         'TempleComponent', 
-        'TempleDocument', 
+        'TempleRegistry', 
         'TempleElement', 
         'TempleEmitter', 
         'TempleException'
@@ -350,7 +239,7 @@ export default class Transpiler extends ComponentTranspiler {
         name: 'components',
         initializer: `{
           ${components.map(component => {
-            return `'${component.tagname}': ${component.classname}_${component.id}`;
+            return `'${component.tagname}': ${component.classname}`;
           }).join(',\n')}
         }`
       }]
@@ -503,11 +392,11 @@ export default class Transpiler extends ComponentTranspiler {
         )}`;
       }
       //business as usual
-      expression += `TempleDocument.createComponent('${token.name}', {`;
+      expression += `TempleRegistry.createComponent('${token.name}', {`;
     } else {
       //check to see if the token refers to a 
       //template in the registry
-      const template = Object.values(this._component.registry).find(
+      const template = this._component.components.find(
         component => component.tagname === token.name 
           && component.type === 'template'
       );
@@ -524,7 +413,7 @@ export default class Transpiler extends ComponentTranspiler {
           components
         )}`;
       }
-      expression += `TempleDocument.createElement('${token.name}', {`;
+      expression += `TempleRegistry.createElement('${token.name}', {`;
     }
     
     if (token.attributes && token.attributes.properties.length > 0) {
diff --git a/packages/temple/src/document/types.ts b/packages/temple/src/document/types.ts
index 9ac1ed9..0b64bf6 100644
--- a/packages/temple/src/document/types.ts
+++ b/packages/temple/src/document/types.ts
@@ -1,13 +1,5 @@
 export type Platform = 'node'|'browser';
 
-export interface TempleDocument {
-  constructor(clientPath: string): void,
-  props: Record<string, any>,
-  style(): string,
-  template(): (Node|false)[],
-  render(props?: Record<string, any>): string
-}
-
 export type BuilderOptions = { 
   minify?: boolean,
   bundle?: boolean,
diff --git a/packages/temple/src/filesystem/FSInterface.ts b/packages/temple/src/filesystem/FSInterface.ts
new file mode 100644
index 0000000..d7a1f82
--- /dev/null
+++ b/packages/temple/src/filesystem/FSInterface.ts
@@ -0,0 +1,8 @@
+export type FileStat = { isFile(): boolean };
+
+export default interface FileSystemInterface {
+  existsSync(path: string): boolean,
+  readFileSync(path: string, encoding: BufferEncoding): string,
+  realpathSync(string: string): string,
+  lstatSync(path: string): FileStat
+}
\ No newline at end of file
diff --git a/packages/temple/src/Loader.ts b/packages/temple/src/filesystem/FileLoader.ts
similarity index 90%
rename from packages/temple/src/Loader.ts
rename to packages/temple/src/filesystem/FileLoader.ts
index 4281389..4e354f1 100644
--- a/packages/temple/src/Loader.ts
+++ b/packages/temple/src/filesystem/FileLoader.ts
@@ -1,19 +1,18 @@
-import type fs from 'fs';
-
+import type FSInterface from './FSInterface';
 import path from 'path';
-import Exception from './Exception';
+import Exception from '../Exception';
 
 /**
  * Loader
  */
 export default class FileLoader {
   //filesystem to use
-  protected _fs: typeof fs;
+  protected _fs: FSInterface;
 
   /**
    * Choose the filesystem to use
    */
-  constructor(filesystem: typeof fs) {
+  constructor(filesystem: FSInterface) {
     this._fs = filesystem;
   }
   /**
@@ -21,7 +20,12 @@ export default class FileLoader {
    */
   public absolute(pathname: string, cwd?: string) {
     cwd = cwd || this.cwd();
-    if (/^\.{1,2}\//.test(pathname)) {
+    //ex. @/path/to/file.ext
+    if (pathname.startsWith('@/')) {
+      pathname = path.resolve(cwd, pathname.substring(2));
+    //if the pathname starts with ./ or ../
+    } else if (/^\.{1,2}\//.test(pathname)) {
+      //get the absolute path
       pathname = path.resolve(cwd, pathname);
     }
     //if the pathname does not start with /, 
diff --git a/packages/temple/src/filesystem/FileSystem.ts b/packages/temple/src/filesystem/FileSystem.ts
new file mode 100644
index 0000000..22af0cf
--- /dev/null
+++ b/packages/temple/src/filesystem/FileSystem.ts
@@ -0,0 +1,24 @@
+import fs from 'fs';
+import FSInterface from './FSInterface';
+
+export default class DefaultFileSystem implements FSInterface {
+  protected _fs: typeof fs;
+  public get fs() {
+    return this._fs;
+  }
+  constructor(filesystem?: typeof fs) {
+    this._fs = filesystem || fs;
+  }
+  existsSync(path: string) {
+    return this._fs.existsSync(path);
+  }
+  readFileSync(path: string, encoding: BufferEncoding) {
+    return this._fs.readFileSync(path, encoding);
+  }
+  realpathSync(path: string) {
+    return this._fs.realpathSync(path);
+  }
+  lstatSync(path: string) {
+    return this._fs.lstatSync(path);
+  }
+}
\ No newline at end of file
diff --git a/packages/temple/src/server.ts b/packages/temple/src/server.ts
index 4b3572f..ec87f2c 100644
--- a/packages/temple/src/server.ts
+++ b/packages/temple/src/server.ts
@@ -1,5 +1,6 @@
 import TempleCollection from './server/TempleCollection';
 import TempleDocument from './server/TempleDocument';
+import TempleRegistry from './server/TempleRegistry';
 import TempleElement from './server/TempleElement';
 import emitter, { TempleEmitter } from './server/TempleEmitter';
 import TempleText from './server/TempleText';
@@ -17,6 +18,7 @@ export {
   signal,
   TempleCollection,
   TempleDocument,
+  TempleRegistry,
   TempleElement,
   TempleEmitter,
   TempleServerException,
diff --git a/packages/temple/src/server/TempleDocument.ts b/packages/temple/src/server/TempleDocument.ts
index d67f689..2477a0c 100644
--- a/packages/temple/src/server/TempleDocument.ts
+++ b/packages/temple/src/server/TempleDocument.ts
@@ -1,48 +1,120 @@
-import type { Node, Hash } from './types';
-import TempleText from './TempleText';
+import data from './data';
 import TempleElement from './TempleElement';
+import TempleRegistry from './TempleRegistry';
+import TempleException from './TempleException';
 
-export default class TempleDocument {
-  //prefix brand
-  protected static _brand = 'temple';
+export default abstract class TempleDocument {
+  //client script
+  protected _script: string;
 
   /**
-   * Sets the brand prefix
+   * Returns the build id for the document
    */
-  public static set brand(value: string) {
-    this._brand = value;
+  public abstract id(): string; 
+
+  /**
+   * Returns the styles for the document
+   */
+  public abstract styles(): string; 
+
+  /**
+   * Returns the markup tree for the document
+   */
+  public abstract template(): TempleElement[];
+
+  /**
+   * Sets the client script
+   */
+  public constructor(script: string) {
+    this._script = script;
   }
 
   /**
-   * Creates a new TempleElement instance
+   * Returns the rendered document with build files
    */
-  public static createElement(
-    name: string, 
-    attributes: Hash, 
-    children: Node[] = []
-  ) {
-    return new TempleElement(name, attributes, children);
+  public build(path: string, props: Record<string, any> = {}) {
+    let document = this.render(props);
+    const id = this.id();
+    const styles = this.styles().trim();
+    const inject = [
+      `<script class="temple-build">${this.props()}</script>`,
+      `<script class="temple-build" src="${path}/${id}.js"></script>`
+    ];
+    if (styles.length > 0) {
+      inject.unshift(`<link rel="stylesheet" href="${path}/${id}.css" />`);
+    }
+    const [ before, after ] = document.split('</head>', 2);
+    return `${before}${inject.join('')}</head>${after}`;
   }
 
   /**
-   * Creates a new TempleElement instance
+   * Returns the rendered document with inline code
    */
-  public static createComponent(
-    name: string, 
-    attributes: Hash, 
-    children: Node[] = []
-  ) {
-    //get the tagname for the component
-    const tagname = this._brand.length > 0 
-      ? `${this._brand}-${name}`
-      : name;
-    return new TempleElement(tagname, attributes, children);
+  public inline(props: Record<string, any> = {}) {
+    const document = this.render(props);
+    const styles = this.styles().trim();
+    const inject = [
+      `<script class="temple-build">${this.props()}</script>`,
+      `<script class="temple-build">${this._script}</script>`
+    ];
+    if (styles.length > 0) {
+      inject.unshift(`<style>${styles}</style>`);
+    }
+    const [ before, after ] = document.split('</head>', 2);
+    return `${before}${inject.join('')}</head>${after}`;
   }
 
   /**
-   * Creates a new TempleText instance
+   * Returns the document props
    */
-  public static createText(value: string) {
-    return new TempleText(value);
+  public props() {
+    return `window.__APP_DATA__ = ${JSON.stringify(
+      Object.fromEntries(data.entries())
+    )};`
+  }
+
+  /**
+   * Renders the redered document without injections
+   */
+  public render(props: Record<string, any> = {}) {
+    //set props (this is so template() can read it)
+    data.set('props', props || {});
+    //set the current component (this is so template() can read it)
+    data.set('current', this);
+    //get the children build w/o re-initializing the variables
+    const children = this.template();
+    //reset the current component before validating
+    data.delete('current');
+    
+    //NOTE: in document there is no shadow dom
+    //so there's no need to case for it...
+
+    //this is the <html> tag
+    let document = TempleElement.render(children).trim();
+    //check if the root element is an <html> tag
+    if (!document.toLowerCase().startsWith('<html')) {
+      throw TempleException.for('Document must start with an <html> tag.');
+    }
+    //return the full html
+    return `<!DOCTYPE html>\n${document}`;
+  }
+
+  protected _toNodeList(value: any) {
+    if (typeof value === 'object' 
+      && typeof value.nodeType === 'number'
+    ) {
+      return [ value ];
+    }
+
+    if (Array.isArray(value)) {
+      if (value.every(
+        item => typeof item === 'object' 
+          && typeof item.nodeType === 'number'
+      )) {
+        return value;
+      }
+    }
+
+    return [ TempleRegistry.createText(String(value)) ];
   }
 }
\ No newline at end of file
diff --git a/packages/temple/src/server/TempleRegistry.ts b/packages/temple/src/server/TempleRegistry.ts
new file mode 100644
index 0000000..8e7fa9b
--- /dev/null
+++ b/packages/temple/src/server/TempleRegistry.ts
@@ -0,0 +1,48 @@
+import type { Node, Hash } from './types';
+import TempleText from './TempleText';
+import TempleElement from './TempleElement';
+
+export default class TempleRegistry {
+  //prefix brand
+  protected static _brand = 'temple';
+
+  /**
+   * Sets the brand prefix
+   */
+  public static set brand(value: string) {
+    this._brand = value;
+  }
+
+  /**
+   * Creates a new TempleElement instance
+   */
+  public static createElement(
+    name: string, 
+    attributes: Hash, 
+    children: Node[] = []
+  ) {
+    return new TempleElement(name, attributes, children);
+  }
+
+  /**
+   * Creates a new TempleElement instance
+   */
+  public static createComponent(
+    name: string, 
+    attributes: Hash, 
+    children: Node[] = []
+  ) {
+    //get the tagname for the component
+    const tagname = this._brand.length > 0 
+      ? `${this._brand}-${name}`
+      : name;
+    return new TempleElement(tagname, attributes, children);
+  }
+
+  /**
+   * Creates a new TempleText instance
+   */
+  public static createText(value: string) {
+    return new TempleText(value);
+  }
+}
\ No newline at end of file
diff --git a/packages/temple/src/types.ts b/packages/temple/src/types.ts
index e1f6ee0..c60cfc7 100644
--- a/packages/temple/src/types.ts
+++ b/packages/temple/src/types.ts
@@ -1,12 +1,10 @@
-import type fs from 'fs';
-import type { ComponentToken } from './component/types';
+import type FSInterface from './filesystem/FSInterface';
 
 export type TempleOptions = { 
-  fs?: typeof fs,
+  fs?: FSInterface,
   cwd?: string,
   brand?: string,
   name?: string,
-  token?: ComponentToken,
   type?: 'document'|'component'|'template'
   build?: string,
   minify?: boolean,
diff --git a/packages/temple/tests/Tokenizer.test.ts b/packages/temple/tests/ComponentTokenizer.test.ts
similarity index 60%
rename from packages/temple/tests/Tokenizer.test.ts
rename to packages/temple/tests/ComponentTokenizer.test.ts
index 07ce751..0182e0a 100644
--- a/packages/temple/tests/Tokenizer.test.ts
+++ b/packages/temple/tests/ComponentTokenizer.test.ts
@@ -1,9 +1,11 @@
+import type { MarkupToken, LiteralToken } from '../src/component/types';
+
 import fs from 'fs';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
 import Tokenizer from '../src/component/Tokenizer';
 
-describe('Temple Lexer/Parser', () => {
+describe('Temple Tokenizer', () => {
   it('Should parse Temple Page', () => {
     const actual = Tokenizer.tokenize(
       fs.readFileSync(__dirname + '/templates/app.tml', 'utf8')
@@ -12,7 +14,7 @@ describe('Temple Lexer/Parser', () => {
     expect(actual.components.length).to.equal(3);
     expect(actual.scripts.length).to.equal(1);
     expect(actual.styles.length).to.equal(1);
-    expect(actual.markup.length).to.equal(1);
+    expect(actual.markup.length).to.equal(8);
   });
 
   it('Should parse link (inline) to style (block) issue', () => {
@@ -23,6 +25,15 @@ describe('Temple Lexer/Parser', () => {
     expect(actual.components.length).to.equal(0);
     expect(actual.scripts.length).to.equal(1);
     expect(actual.styles.length).to.equal(1);
-    expect(actual.markup.length).to.equal(1);
+    expect(actual.markup.length).to.equal(2);
+  });
+
+  it('Should parse $', () => {
+    const actual = Tokenizer.tokenize('<div><span>$</span>ok</div>');
+    const markup = actual.markup[0].children?.[0] as MarkupToken;
+    const literal = markup.children?.[0] as LiteralToken;
+    //console.log(JSON.stringify(actual, null, 2));
+    expect(markup.name).to.equal('span');
+    expect(literal.value).to.equal('$');
   });
 });
\ No newline at end of file
diff --git a/packages/temple/tests/ComponentTranspiler.test.ts b/packages/temple/tests/ComponentTranspiler.test.ts
index 243ebbf..08cce6e 100644
--- a/packages/temple/tests/ComponentTranspiler.test.ts
+++ b/packages/temple/tests/ComponentTranspiler.test.ts
@@ -1,8 +1,32 @@
+import path from 'path';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
+import Component from '../src/component/Component';
+import Transpiler from '../src/component/Transpiler';
+import { toTS } from '../src/component/helpers';
 
 describe('Temple Component Transpiler', () => {
+  const tsconfig = path.join(__dirname, '../tsconfig.json');
+  const component = new Component(
+    path.join(__dirname, 'templates/dollar.tml'), 
+    { cwd: __dirname }
+  );
   it('Should transpile component', () => {
     expect(true).to.equal(true);
   });
+
+  it('Should transpile $', () => {
+    const transpiler = new Transpiler(component, tsconfig);
+    const actual = transpiler.transpile();
+    //console.log(toTS(actual));
+    // [
+    //   TempleDocument.createElement('div', { }, [
+    //     TempleDocument.createElement('span', { }, [
+    //       TempleDocument.createText(`$`)
+    //     ]).element, 
+    //     TempleDocument.createText(`ok`)
+    //   ]).element
+    // ]
+    expect(toTS(actual)).to.contain('TempleDocument.createText(`$`)');
+  });
 });
\ No newline at end of file
diff --git a/packages/temple/tests/DocumentTranspiler.test.ts b/packages/temple/tests/DocumentTranspiler.test.ts
index 599e541..98959ff 100644
--- a/packages/temple/tests/DocumentTranspiler.test.ts
+++ b/packages/temple/tests/DocumentTranspiler.test.ts
@@ -1,8 +1,38 @@
+import path from 'path';
 import { describe, it } from 'mocha';
 import { expect } from 'chai';
+import Component from '../src/component/Component';
+import Transpiler from '../src/document/Transpiler';
+import { toTS } from '../src/component/helpers';
 
 describe('Temple Document Transpiler', () => {
-  it('Should transpile document', () => {
+  const tsconfig = path.join(__dirname, '../tsconfig.json');
+  const component = new Component(
+    path.join(__dirname, 'templates/page.tml'), 
+    { cwd: __dirname }
+  );
+  it('Should transpile component', () => {
     expect(true).to.equal(true);
   });
+
+  it('Should transpile $', () => {
+    const transpiler = new Transpiler(component, tsconfig);
+    const server = toTS(transpiler.transpile());
+    //console.log('server', server);
+    // [
+    //   TempleDocument.createElement('div', { }, [
+    //     TempleDocument.createElement('span', { }, [
+    //       TempleDocument.createText(`$`)
+    //     ]).element, 
+    //     TempleDocument.createText(`ok`)
+    //   ]).element
+    // ]
+    expect(server).to.contain('TempleDocument.createElement(\'div\', { \'title\': title }, [');
+    expect(server).to.contain('TempleDocument.createText(`$`)');
+
+    const client = toTS(transpiler.client());
+    //console.log('client', client);
+    //const __BINDINGS__: Record<string, Record<string, any>> = {'1': { 'title': title }, };
+    expect(client).to.contain('{\'1\': { \'title\': title }, }');
+  });
 });
\ No newline at end of file
diff --git a/packages/temple/tests/templates/dollar.tml b/packages/temple/tests/templates/dollar.tml
new file mode 100644
index 0000000..21ef087
--- /dev/null
+++ b/packages/temple/tests/templates/dollar.tml
@@ -0,0 +1 @@
+<div><span>$</span> {children()}</div>
\ No newline at end of file
diff --git a/packages/temple/tests/templates/page.tml b/packages/temple/tests/templates/page.tml
new file mode 100644
index 0000000..bb5f896
--- /dev/null
+++ b/packages/temple/tests/templates/page.tml
@@ -0,0 +1,35 @@
+<link rel="import" type="component" href="./dollar.tml" />
+<style>
+  body {
+    font-family: Arial, Helvetica, sans-serif;
+  }
+  h1, h2, h3, h4, h5, h6, p {
+    margin: 0;
+    padding: 0;
+  }
+</style>
+<script>
+  import snippets from '@/modules/snippets/home';
+  const url = '/';
+  const title = 'Temple - The reactive web component template engine.';
+  const description = 'Temple is a template engine hat generates web components and support reactivity.';
+</script>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{title}</title>
+    <meta name="description" content={description} />
+    <meta property="og:title" content={title} />
+    <meta property="og:image" content="https://ossphilippines.github.io/temple/temple-logo.png" />
+    <meta property="og:url" content={`https://ossphilippines.github.io/temple${url}`} />
+    <meta property="og:type" content="website" />
+    <link rel="stylesheet" type="text/css" href="/temple/styles/theme.css" />
+    <script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js/dist/highlightjs-line-numbers.min.js"></script>
+  </head>
+  <body class="dark panel with-head">
+    <dollar>
+      <div title={title}><span>$</span> Ok</div>
+    </dollar>
+  </body>
+</html>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 9ad6f01..7762da4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1387,10 +1387,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/chai@4.3.5":
-  version "4.3.5"
-  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.5.tgz#ae69bcbb1bebb68c4ac0b11e9d8ed04526b3562b"
-  integrity sha512-mEo1sAde+UCE6b2hxn332f1g1E8WfYRu6p5SvTKr2ZKC1f7gFJXk4h5PyGP9Dt6gCaG8y8XhwnXWC6Iy2cmBng==
+"@types/chai@4.3.17":
+  version "4.3.17"
+  resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.17.tgz#9195f9d242f2ac3b429908864b6b871a8f73f489"
+  integrity sha512-zmZ21EWzR71B4Sscphjief5djsLre50M6lI622OSySTmn9DB3j+C3kWroHfBQWXbOBwbgg/M8CG/hUxDLIloow==
 
 "@types/connect-history-api-fallback@^1.5.4":
   version "1.5.4"
@@ -2454,10 +2454,10 @@ assert-plus@1.0.0, assert-plus@^1.0.0:
   resolved "https://registry.yarnpkg.com/assert-plus/-/assert-plus-1.0.0.tgz#f12e0f3c5d77b0b1cdd9146942e4e96c1e4dd525"
   integrity sha512-NfJ4UzBCcQGLDlQq7nHxH+tv3kyZ0hHQqF5BO6J7tNJeP5do1llPr8dZ8zHonfhAu0PHAdMkSo+8o0wxg9lZWw==
 
-assertion-error@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-2.0.1.tgz#f641a196b335690b1070bf00b6e7593fec190bf7"
-  integrity sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==
+assertion-error@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b"
+  integrity sha512-jgsaNduz+ndvGyFt3uSuWqvy4lCnIJiovtouQN5JZHOKCS2QuhEdbcQHFhVksz2N2U9hXJo8odG7ETyWlEeuDw==
 
 async@^3.2.3:
   version "3.2.5"
@@ -2800,16 +2800,18 @@ caniuse-lite@^1.0.30001640:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001643.tgz#9c004caef315de9452ab970c3da71085f8241dbd"
   integrity sha512-ERgWGNleEilSrHM6iUz/zJNSQTP8Mr21wDWpdgvRwcTXGAq6jMtOUPP4dqFPTdKqZ2wKTdtB+uucZ3MRpAUSmg==
 
-chai@5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/chai/-/chai-5.1.1.tgz#f035d9792a22b481ead1c65908d14bb62ec1c82c"
-  integrity sha512-pT1ZgP8rPNqUgieVaEY+ryQr6Q4HXNg8Ei9UnLUrjN4IA7dvQC5JB+/kxVcPNDHyBcc/26CXPkbNzq3qwrOEKA==
+chai@4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/chai/-/chai-4.5.0.tgz#707e49923afdd9b13a8b0b47d33d732d13812fd8"
+  integrity sha512-RITGBfijLkBddZvnn8jdqoTypxvqbOLYQkGGxXzeFjVHvudaPw0HNFD9x928/eUwYWd2dPCugVqspGALTZZQKw==
   dependencies:
-    assertion-error "^2.0.1"
-    check-error "^2.1.1"
-    deep-eql "^5.0.1"
-    loupe "^3.1.0"
-    pathval "^2.0.0"
+    assertion-error "^1.1.0"
+    check-error "^1.0.3"
+    deep-eql "^4.1.3"
+    get-func-name "^2.0.2"
+    loupe "^2.3.6"
+    pathval "^1.1.1"
+    type-detect "^4.1.0"
 
 chalk@4.1.2, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
   version "4.1.2"
@@ -2843,10 +2845,12 @@ chardet@^0.7.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
   integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
 
-check-error@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/check-error/-/check-error-2.1.1.tgz#87eb876ae71ee388fa0471fe423f494be1d96ccc"
-  integrity sha512-OAlb+T7V4Op9OwdkjmguYRqncdlx5JiofwOAUkmTF+jNdHwzTaTs4sRAGpzLF3oOz5xAyDGrPgeIDFQmDOTiJw==
+check-error@^1.0.3:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/check-error/-/check-error-1.0.3.tgz#a6502e4312a7ee969f646e83bb3ddd56281bd694"
+  integrity sha512-iKEoDYaRmd1mxM90a2OEfWhjsjPpYPuQ+lMYsoxB126+t8fw7ySEO48nmDg5COTjxDI65/Y2OWpeEHk3ZOe8zg==
+  dependencies:
+    get-func-name "^2.0.2"
 
 chokidar@3.5.3:
   version "3.5.3"
@@ -3357,10 +3361,12 @@ dedent@^1.0.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.5.3.tgz#99aee19eb9bae55a67327717b6e848d0bf777e5a"
   integrity sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==
 
-deep-eql@^5.0.1:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-5.0.2.tgz#4b756d8d770a9257300825d52a2c2cff99c3a341"
-  integrity sha512-h5k/5U50IJJFpzfL6nO9jaaumfjO/f2NjK/oYB2Djzm4p9L+3T9qWpZqZ2hAbLPuuYq9wrU08WQyBTL5GbPk5Q==
+deep-eql@^4.1.3:
+  version "4.1.4"
+  resolved "https://registry.yarnpkg.com/deep-eql/-/deep-eql-4.1.4.tgz#d0d3912865911bb8fac5afb4e3acfa6a28dc72b7"
+  integrity sha512-SUwdGfqdKOwxCPeVYjwSyRpJ7Z+fhpwIAtmCUdZIWZ/YP5R9WAsyuSgpLVDi9bjWoN2LXHNss/dk3urXtdQxGg==
+  dependencies:
+    type-detect "^4.0.0"
 
 deep-equal@~1.0.1:
   version "1.0.1"
@@ -4440,7 +4446,7 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-func-name@^2.0.1:
+get-func-name@^2.0.1, get-func-name@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.2.tgz#0d7cf20cd13fda808669ffa88f4ffc7a3943fc41"
   integrity sha512-8vXOvuE167CtIc3OyItco7N/dpRtBbYOsPsXCz7X/PMnlGjYjSGuZJgM1Y7mmew7BKf9BqvLX2tnOVy1BBUsxQ==
@@ -6036,10 +6042,10 @@ log-symbols@^5.1.0:
     chalk "^5.0.0"
     is-unicode-supported "^1.1.0"
 
-loupe@^3.1.0:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/loupe/-/loupe-3.1.1.tgz#71d038d59007d890e3247c5db97c1ec5a92edc54"
-  integrity sha512-edNu/8D5MKVfGVFRhFf8aAxiTM6Wumfz5XsaatSxlD3w4R1d/WEKUTydCdPGbl9K7QG/Ca3GnDV2sIKIpXRQcw==
+loupe@^2.3.6:
+  version "2.3.7"
+  resolved "https://registry.yarnpkg.com/loupe/-/loupe-2.3.7.tgz#6e69b7d4db7d3ab436328013d37d1c8c3540c697"
+  integrity sha512-zSMINGVYkdpYSOBmLi0D1Uo7JU9nVdQKrHxC8eYlV+9YKK9WePqAlL7lSlorG/U2Fw1w0hTBmaa/jrQ3UbPHtA==
   dependencies:
     get-func-name "^2.0.1"
 
@@ -6827,10 +6833,10 @@ path-type@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathval@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/pathval/-/pathval-2.0.0.tgz#7e2550b422601d4f6b8e26f1301bc8f15a741a25"
-  integrity sha512-vE7JKRyES09KiunauX7nd2Q9/L7lhok4smP9RZTDeD4MVs72Dp2qNFVz39Nz5a0FVEW0BJR6C0DYrq6unoziZA==
+pathval@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.1.tgz#8534e77a77ce7ac5a2512ea21e0fdb8fcf6c3d8d"
+  integrity sha512-Dp6zGqpTdETdR63lehJYPeIOqpiNBNtc7BpWSLrOje7UaIsE5aY92r/AunQA7rsXvet3lrJ3JnZX29UPTKXyKQ==
 
 picocolors@^1.0.0, picocolors@^1.0.1:
   version "1.0.1"
@@ -8321,6 +8327,11 @@ type-detect@4.0.8:
   resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.8.tgz#7646fb5f18871cfbb7749e69bd39a6388eb7450c"
   integrity sha512-0fr/mIH1dlO+x7TlcMy+bIDqKPsw/70tVyeHW787goQjhmqaZe10uwLujubK9q9Lg6Fiho1KUKDYz0Z7k7g5/g==
 
+type-detect@^4.0.0, type-detect@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.1.0.tgz#deb2453e8f08dcae7ae98c626b13dddb0155906c"
+  integrity sha512-Acylog8/luQ8L7il+geoSxhEkazvkslg7PSNKOX59mbB9cOveP5aq9h74Y7YU8yDpJwetzQQrfIwtf4Wp4LKcw==
+
 type-fest@^0.20.2:
   version "0.20.2"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"