diff --git a/examples/basic/.babelrc b/examples/basic/.babelrc
new file mode 100644
index 000000000..a03337e8b
--- /dev/null
+++ b/examples/basic/.babelrc
@@ -0,0 +1,10 @@
+{
+  "plugins": [
+    ["module-resolver", {
+      "alias": {
+        "playgrodd": "../../packages/playgrood/build/main",
+        "playgrodd-theme-default": "../../packages/playgrood/build/main/theme/default.js"
+      }
+    }]
+  ]
+}
diff --git a/examples/basic/package.json b/examples/basic/package.json
index e2bf6fb29..019733002 100644
--- a/examples/basic/package.json
+++ b/examples/basic/package.json
@@ -9,6 +9,7 @@
     "playgrodd": "^0.0.1"
   },
   "devDependencies": {
+    "babel-plugin-module-resolver": "^3.1.0",
     "babel-preset-react": "^6.24.1"
   }
 }
diff --git a/packages/playgrood/package.json b/packages/playgrood/package.json
index 31066f853..e3083b8b7 100644
--- a/packages/playgrood/package.json
+++ b/packages/playgrood/package.json
@@ -21,11 +21,13 @@
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "babylon": "^6.18.0",
+    "create-react-context": "^0.2.1",
     "express": "^4.16.3",
     "fast-glob": "^2.2.0",
     "history": "^4.7.2",
     "mkdirp": "^0.5.1",
     "parcel-bundler": "^1.6.2",
+    "parcel-plugin-bundle-manifest": "^0.1.0",
     "prop-types": "^15.6.1",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
@@ -39,6 +41,7 @@
     "@types/express": "^4.11.1",
     "@types/mkdirp": "^0.5.2",
     "@types/node": "^9.4.7",
+    "@types/react": "^16.0.40",
     "@types/react-dom": "^16.0.4",
     "@types/react-router-dom": "^4.2.5",
     "@types/trash": "^4.3.0",
diff --git a/packages/playgrood/src/components/AsyncRoute.tsx b/packages/playgrood/src/components/AsyncRoute.tsx
new file mode 100644
index 000000000..7f35afb6c
--- /dev/null
+++ b/packages/playgrood/src/components/AsyncRoute.tsx
@@ -0,0 +1,42 @@
+import React from 'react'
+import { Route } from 'react-router-dom'
+import { IComponent } from '../utils/components'
+
+export interface IAsyncRouteProps {
+  component: IComponent
+}
+
+export interface IAsyncRouteState {
+  render(): JSX.Element | null
+}
+
+export class AsyncRoute extends React.Component<
+  IAsyncRouteProps,
+  IAsyncRouteState
+> {
+  constructor(props: any, ctx: any) {
+    super(props, ctx)
+
+    this.state = {
+      render: () => null,
+    }
+  }
+
+  async componentDidMount() {
+    const { name } = this.props.component
+    const { importFn } = window.__PLAYGRODD_COMPONENTS__[`${name}`]
+    const { doc: render } = await importFn
+
+    this.setState({ render })
+  }
+
+  render() {
+    return (
+      <Route
+        exact
+        path={this.props.component.route}
+        render={this.state.render}
+      />
+    )
+  }
+}
diff --git a/packages/playgrood/src/components/Html.tsx b/packages/playgrood/src/components/Html.tsx
index e1845d82c..efaeac9dd 100644
--- a/packages/playgrood/src/components/Html.tsx
+++ b/packages/playgrood/src/components/Html.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react'
 
-import { IComponent } from '../utils/components'
+import { IComponents } from '../utils/components'
 
 export interface IHtmlProps {
-  components: IComponent[]
+  components: IComponents
 }
 
 export const Html: React.SFC<IHtmlProps> = ({ components }) => {
@@ -15,12 +15,12 @@ export const Html: React.SFC<IHtmlProps> = ({ components }) => {
         <title>playgrodd</title>
         <body>
           <div id="root" />
-          <script src="./index.jsx" />
           <script
             dangerouslySetInnerHTML={{
-              __html: `window.__PLAYGRODD_COMPONENTS__ = ${stringifiedComps}`,
+              __html: `window.__PLAYGRODD_COMPONENTS__ = ${stringifiedComps};`,
             }}
           />
+          <script src="./index.jsx" />
         </body>
       </head>
     </html>
diff --git a/packages/playgrood/src/components/Playgrodd.tsx b/packages/playgrood/src/components/Playgrodd.tsx
new file mode 100644
index 000000000..a6ccc9c08
--- /dev/null
+++ b/packages/playgrood/src/components/Playgrodd.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react'
+import { Router } from 'react-router-dom'
+import { createBrowserHistory, History } from 'history'
+import createContext from 'create-react-context'
+
+export const history: History = createBrowserHistory()
+export const PlaygroddContext = createContext({})
+
+export interface IPlaygroddState {
+  components: any
+}
+
+export class Playgrodd extends React.Component<{}, IPlaygroddState> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      components: {},
+    }
+  }
+
+  setComponents = () =>
+    this.setState({ components: window.__PLAYGRODD_COMPONENTS__ })
+
+  componentDidMount() {
+    window.addEventListener('load', this.setComponents, false)
+  }
+
+  render() {
+    return (
+      <Router history={history}>
+        <PlaygroddContext.Provider value={this.state.components}>
+          {this.props.children}
+        </PlaygroddContext.Provider>
+      </Router>
+    )
+  }
+}
diff --git a/packages/playgrood/src/components/Preview.tsx b/packages/playgrood/src/components/Preview.tsx
new file mode 100644
index 000000000..84a0a4931
--- /dev/null
+++ b/packages/playgrood/src/components/Preview.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+
+import { IComponents } from '../utils/components'
+import { PlaygroddContext } from '../components/Playgrodd'
+import { AsyncRoute } from '../components/AsyncRoute'
+
+export const Preview: React.SFC = () => (
+  <PlaygroddContext.Consumer>
+    {(components: IComponents) =>
+      Object.values(components).map(component => (
+        <AsyncRoute key={component.id} component={component} />
+      ))
+    }
+  </PlaygroddContext.Consumer>
+)
diff --git a/packages/playgrood/src/index.ts b/packages/playgrood/src/index.ts
new file mode 100644
index 000000000..a5d6485fc
--- /dev/null
+++ b/packages/playgrood/src/index.ts
@@ -0,0 +1,2 @@
+export { Preview } from './components/Preview'
+export { Playgrodd } from './components/Playgrodd'
diff --git a/packages/playgrood/src/server.tsx b/packages/playgrood/src/server.tsx
index 077225460..d10b4980a 100644
--- a/packages/playgrood/src/server.tsx
+++ b/packages/playgrood/src/server.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react'
 import express, { Request, Response } from 'express'
 import { Arguments } from 'yargs'
-import { renderToString } from 'react-dom/server'
+import { renderToStaticMarkup } from 'react-dom/server'
 
 import { componentsFromPattern } from './utils/components'
 import { createBundle, DIST_PATH } from './utils/bundle'
-import { generateEntry } from './utils/entry'
+import { generateMain } from './utils/generate-main'
 
 import { Html } from './components/Html'
 
 exports.server = async ({ files: pattern }: Arguments) => {
   const app = express()
   const components = componentsFromPattern(pattern)
-  const html = renderToString(<Html components={components} />)
-  const entry = generateEntry(components)
+  const html = renderToStaticMarkup(<Html components={components} />)
 
-  const bundle = await createBundle(html, entry)
+  const main = generateMain(components)
+  const bundle = await createBundle(html, main)
 
   app.use(express.static(DIST_PATH))
   app.use('/*', async (req: Request, res: Response) => {
diff --git a/packages/playgrood/src/theme/default.tsx b/packages/playgrood/src/theme/default.tsx
new file mode 100644
index 000000000..cd9af0436
--- /dev/null
+++ b/packages/playgrood/src/theme/default.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react'
+import { Link } from 'react-router-dom'
+
+import { Playgrodd } from '../components/Playgrodd'
+import { Preview } from '../components/Preview'
+
+export const App = () => (
+  <Playgrodd>
+    <ul>
+      <li>
+        <Link to="/src/Alert">Alert</Link>
+      </li>
+      <li>
+        <Link to="/src/Button">Button</Link>
+      </li>
+    </ul>
+    <Preview />
+  </Playgrodd>
+)
diff --git a/packages/playgrood/src/types.d.ts b/packages/playgrood/src/types.d.ts
index df8618f26..60826bf94 100644
--- a/packages/playgrood/src/types.d.ts
+++ b/packages/playgrood/src/types.d.ts
@@ -2,3 +2,9 @@ declare module 'parcel-bundler' {
   var Bundler: any
   export default Bundler
 }
+
+interface Window {
+  __PLAYGRODD_COMPONENTS__: any
+}
+
+declare var window: Window
diff --git a/packages/playgrood/src/utils/bundle.ts b/packages/playgrood/src/utils/bundle.ts
index a6bc0e608..45cd2a036 100644
--- a/packages/playgrood/src/utils/bundle.ts
+++ b/packages/playgrood/src/utils/bundle.ts
@@ -33,10 +33,10 @@ const tempFile = (filepath: string, content: string) =>
     }
   })
 
-export const createBundle = async (html: string, entry: string) => {
+export const createBundle = async (html: string, main: string) => {
   await trash(DIST_PATH)
   await trash(THEME_PATH)
-  await tempFile(INDEX_JS, entry)
+  await tempFile(INDEX_JS, main)
   await tempFile(INDEX_HTML, html)
 
   const bundler = new Bundler(INDEX_HTML, {
diff --git a/packages/playgrood/src/utils/components.ts b/packages/playgrood/src/utils/components.ts
index 3d08c538b..f4be7448a 100644
--- a/packages/playgrood/src/utils/components.ts
+++ b/packages/playgrood/src/utils/components.ts
@@ -11,6 +11,11 @@ export interface IComponent {
   readonly route: string
   readonly name: string | null
   readonly hasManifest: boolean
+  readonly importFn?: any
+}
+
+export interface IComponents {
+  readonly [key: string]: IComponent
 }
 
 const ROOT_PATH = fs.realpathSync(process.cwd())
@@ -33,7 +38,7 @@ const parseEntry = (entry: string) => {
   const ast = convertToAst(entry)
   const manifest = findManifest(ast)
   const name = nameOnManifest(manifest)
-  const route = path.join(path.parse(entry).dir, name || '')
+  const route = `/${path.join(path.parse(entry).dir, name || '')}`
   const filepath = path.join(ROOT_PATH, entry)
 
   return {
@@ -45,13 +50,14 @@ const parseEntry = (entry: string) => {
   }
 }
 
-const filterByManifest = (component: IComponent) => !!component.hasManifest
+const reduceEntries = (obj: Object, entry: IComponent) =>
+  entry.hasManifest ? { ...obj, [`${entry.name}`]: entry } : obj
 
-export const componentsFromPattern = (pattern: string): IComponent[] => {
+export const componentsFromPattern = (pattern: string): IComponents => {
   const ignoreGlob = '!node_modules'
   const entries: string[] = glob.sync(
     Array.isArray(pattern) ? [...pattern, ignoreGlob] : [pattern, ignoreGlob]
   )
 
-  return entries.map(parseEntry).filter(filterByManifest)
+  return entries.map(parseEntry).reduce(reduceEntries, {})
 }
diff --git a/packages/playgrood/src/utils/entry.ts b/packages/playgrood/src/utils/entry.ts
deleted file mode 100644
index a04fd3089..000000000
--- a/packages/playgrood/src/utils/entry.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { IComponent } from './components'
-
-const mountLink = (component: IComponent) =>
-  `<li>
-    <Link to="/${component.route}">${component.name}</Link>
-  </li>`
-
-const componentRoute = (component: IComponent) =>
-  `class Route${component.name} extends React.Component {
-    constructor(props, ctx) {
-      super(props, ctx)
-      this.state = {
-        render: () => null
-      }
-    }
-
-    async componentDidMount() {
-      const { doc: render } = await import('${component.filepath}')
-      this.setState({ render })
-    }
-
-    render() {
-      return <div>{this.state.render()}</div>
-    }
-  }`
-
-const mountRoute = (component: IComponent) =>
-  `<Route
-    exact
-    path="/${component.route}"
-    render={(props) => {
-      const Comp = ${componentRoute(component)}
-      return <Comp {...props} />
-    }}
-  />`
-
-export const generateEntry = (components: IComponent[]) => {
-  return `
-    import 'babel-polyfill'
-
-    import React from 'react'
-    import { render } from 'react-dom'
-    import { Router, Route, Link } from 'react-router-dom'
-    import { createBrowserHistory } from 'history'
-
-    const App = () => (
-      <Router history={createBrowserHistory()}>
-        <div>
-          <ul>${components.map(mountLink).join('')}</ul>
-          <div>${components.map(mountRoute).join('')}</div>
-        </div>
-      </Router>
-    )
-
-    render(<App />, document.querySelector('#root'))
-  `
-}
diff --git a/packages/playgrood/src/utils/generate-main.ts b/packages/playgrood/src/utils/generate-main.ts
new file mode 100644
index 000000000..44c2354be
--- /dev/null
+++ b/packages/playgrood/src/utils/generate-main.ts
@@ -0,0 +1,21 @@
+import { IComponents } from './components'
+
+const mapImports = (components: IComponents) =>
+  Object.values(components).map(
+    ({ name, filepath }) =>
+      `window.__PLAYGRODD_COMPONENTS__.${name}.importFn = import('${filepath}')`
+  )
+
+export const generateMain = (components: IComponents) =>
+  `import 'babel-polyfill'
+
+  ${mapImports(components).join('\n')}
+
+  import * as React from 'react'
+  import { render } from 'react-dom'
+  import { App } from 'playgrodd-theme-default'
+
+  render(
+    <App />,
+    document.querySelector('#root')
+  )`
diff --git a/yarn.lock b/yarn.lock
index 8181c9693..127c489dd 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -95,7 +95,7 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react@*":
+"@types/react@*", "@types/react@^16.0.40":
   version "16.0.40"
   resolved "https://registry.npmjs.org/@types/react/-/react-16.0.40.tgz#caabc2296886f40b67f6fc80f0f3464476461df9"
 
@@ -514,6 +514,16 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
+babel-plugin-module-resolver@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.npmjs.org/babel-plugin-module-resolver/-/babel-plugin-module-resolver-3.1.0.tgz#cf7868bd2c1818f855aede16141009b87dd1f95b"
+  dependencies:
+    find-babel-config "^1.1.0"
+    glob "^7.1.2"
+    pkg-up "^2.0.0"
+    reselect "^3.0.1"
+    resolve "^1.4.0"
+
 babel-plugin-syntax-async-functions@^6.8.0:
   version "6.13.0"
   resolved "https://registry.npmjs.org/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
@@ -1683,6 +1693,13 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
+create-react-context@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.npmjs.org/create-react-context/-/create-react-context-0.2.1.tgz#425a3d96f4b7690c2fbf20aed5aeae2e2007a959"
+  dependencies:
+    fbjs "^0.8.0"
+    gud "^1.0.0"
+
 cross-spawn-async@^2.1.1:
   version "2.2.5"
   resolved "https://registry.npmjs.org/cross-spawn-async/-/cross-spawn-async-2.2.5.tgz#845ff0c0834a3ded9d160daca6d390906bb288cc"
@@ -2337,7 +2354,7 @@ fast-levenshtein@~2.0.4:
   version "2.0.6"
   resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
 
-fbjs@^0.8.16:
+fbjs@^0.8.0, fbjs@^0.8.16:
   version "0.8.16"
   resolved "https://registry.npmjs.org/fbjs/-/fbjs-0.8.16.tgz#5e67432f550dc41b572bf55847b8aca64e5337db"
   dependencies:
@@ -2384,6 +2401,13 @@ finalhandler@1.1.1:
     statuses "~1.4.0"
     unpipe "~1.0.0"
 
+find-babel-config@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.npmjs.org/find-babel-config/-/find-babel-config-1.1.0.tgz#acc01043a6749fec34429be6b64f542ebb5d6355"
+  dependencies:
+    json5 "^0.5.1"
+    path-exists "^3.0.0"
+
 find-up@^1.0.0:
   version "1.1.2"
   resolved "https://registry.npmjs.org/find-up/-/find-up-1.1.2.tgz#6b2e9822b1a2ce0a60ab64d610eccad53cb24d0f"
@@ -2662,6 +2686,10 @@ grapheme-breaker@^0.3.2:
     brfs "^1.2.0"
     unicode-trie "^0.3.1"
 
+gud@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
+
 handlebars@^4.0.2:
   version "4.0.11"
   resolved "https://registry.npmjs.org/handlebars/-/handlebars-4.0.11.tgz#630a35dfe0294bc281edae6ffc5d329fc7982dcc"
@@ -2754,6 +2782,12 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.0"
 
+hasha@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.npmjs.org/hasha/-/hasha-3.0.0.tgz#52a32fab8569d41ca69a61ff1a214f8eb7c8bd39"
+  dependencies:
+    is-stream "^1.0.1"
+
 hawk@3.1.3, hawk@~3.1.3:
   version "3.1.3"
   resolved "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz#078444bd7c1640b0fe540d2c9b73d59678e8e1c4"
@@ -4119,6 +4153,12 @@ parcel-bundler@^1.6.2:
     worker-farm "^1.5.2"
     ws "^4.0.0"
 
+parcel-plugin-bundle-manifest@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.npmjs.org/parcel-plugin-bundle-manifest/-/parcel-plugin-bundle-manifest-0.1.0.tgz#0c85040665d1c8be3fa3df1fd3050bce93cf870a"
+  dependencies:
+    hasha "^3.0.0"
+
 parse-asn1@^5.0.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/parse-asn1/-/parse-asn1-5.1.0.tgz#37c4f9b7ed3ab65c74817b5f2480937fbf97c712"
@@ -4260,6 +4300,12 @@ pinkie@^2.0.0:
   version "2.0.4"
   resolved "https://registry.npmjs.org/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
 
+pkg-up@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.npmjs.org/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
+  dependencies:
+    find-up "^2.1.0"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -4924,6 +4970,10 @@ require-main-filename@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-1.0.1.tgz#97f717b69d48784f5f526a6c5aa8ffdda055a4d1"
 
+reselect@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
+
 resolve-pathname@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879"
