diff --git a/example/App.svelte b/example/App.svelte
index cbe30c3..05aa860 100644
--- a/example/App.svelte
+++ b/example/App.svelte
@@ -29,7 +29,7 @@
   }
 </style>
 <script>
-	import Tutorials from '../src/Tutorials.svelte';
+	import Repl from '../src/Repl.svelte';
 	let chapters = [
 		{
       title: 'Entry',
@@ -69,8 +69,20 @@
 			prev: 'prev'
     }
   }
+  let files = [
+    {
+      name: 'index.html',
+      content: '<h1>Test</h1>',
+      type: 'html'
+    },
+    {
+      name: 'index.js',
+      content: '',
+      type: 'js'
+    }
+  ];
 
 </script>
 
-<Tutorials {chapters} />
+<Repl {files} />
 
diff --git a/package.json b/package.json
index ffd9bac..a6e2aae 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "svelte-javascript-tutorials",
-  "svelte": "src/Tutorials.svelte",
+  "name": "javascript-repl",
+  "svelte": "src/Repl.svelte",
   "module": "index.mjs",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "",
   "main": "index.js",
   "author": "Mila Frerichs <mila.frerichs@gmail.com>",
diff --git a/rollup.config.js b/rollup.config.js
index 9dd97bf..9dcc7f7 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -10,7 +10,7 @@ const name = pkg.name
 	.replace(/-\w/g, m => m[1].toUpperCase());
 
 export default {
-  input: 'src/Tutorials.svelte',
+  input: 'src/Repl.svelte',
 	output: [
 		{ file: pkg.module, 'format': 'es' },
 		{ file: pkg.main, 'format': 'umd', name }
diff --git a/src/Repl.svelte b/src/Repl.svelte
new file mode 100644
index 0000000..a41f609
--- /dev/null
+++ b/src/Repl.svelte
@@ -0,0 +1,135 @@
+<script>
+  import Viewer from './Viewer.svelte';
+  import Editor from './Editor.svelte';
+  import Console from './Console.svelte';
+
+  let ready = false;
+  let editor;
+  let manualUpdates = false;
+  let tab = 'viewer';
+  let currentFile = {};
+  let currentFileIndex = 0;
+  let currentContent = '';
+  let code = '';
+  let html = '';
+  export let viewOnly = false;
+  export let files = [];
+  export let injectedLibraries = [];
+  export let injectedJS = '';
+  export let cssStyles = {
+    container: 'container',
+    resultContainer: 'result-container',
+    viewerContainer: 'viewer-container',
+    viewerConsoleContainer: 'viewer-console-container',
+    editorActions: {
+      container: '',
+      tabItem: '',
+      link: ''
+    },
+    viewerActions: {
+      container: '',
+      tabItem: '',
+      link: ''
+    },
+    editor: 'editor',
+    viewer: 'viewer',
+  };
+
+  function changeCode(event) {
+    currentContent = event.detail.value;
+    manualUpdates = true;
+    if (currentFile.type === 'js') {
+      code = currentContent;
+    } else {
+      html = currentContent.replace(/\n/g,'');
+    }
+  }
+
+
+  function getContentForType(type = 'js') {
+    return files.reduce((content, file) => {
+      if(file.type === type) {
+        return content + file.content;
+      }
+      return content;
+    }, '');
+  }
+
+  $: currentFile = files[currentFileIndex]
+
+  $: if(editor && currentFile) {
+    editor.update(currentFile.content);
+  }
+
+  $: if(ready && !manualUpdates) {
+    code = getContentForType('js')
+    html = getContentForType('html')
+    if(!html) html = '';
+    if(editor) {
+      editor.update(currentFile.content);
+    }
+  }
+  function showFile(fileIndex) {
+    currentFile.content = currentContent;
+    currentFileIndex = fileIndex;
+  }
+  function showConsole() {
+    tab = 'console';
+  }
+  function showResult() {
+    tab = 'viewer';
+  }
+</script>
+
+<style>
+  .hidden {
+    visibility: hidden;
+  }
+  .content-container {
+    transition-property: all;
+    transition-duration: .5s;
+    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
+  }
+  .hide-content .content-container{
+    max-width: 0;
+    overflow-x: hidden;
+  }
+  .hide-content .result-container {
+    width: 95%;
+  }
+</style>
+
+<div class="{cssStyles.container}" >
+  <div class="result-container {cssStyles.resultContainer}">
+    {#if !viewOnly }
+      <div class:hidden="{viewOnly}" class="{cssStyles.editor}">
+        <div class="{cssStyles.editorActions.container}">
+          {#each files as { name }, i}
+            <div class="{cssStyles.editorActions.tabItem}">
+              <a class:active="{currentFileIndex == i}" class="{cssStyles.editorActions.link}" on:click="{() => showFile(i)}">{name}</a>
+            </div>
+          {/each}
+        </div>
+        <Editor bind:this={editor} on:change={changeCode}/>
+      </div>
+    {/if}
+    <div class:view-only="{viewOnly}" class="{cssStyles.viewerContainer}">
+      <div class="{cssStyles.viewerActions.container}">
+        <div class="{cssStyles.viewerActions.tabItem}">
+          <a class:active="{tab == 'viewer'}" class="{cssStyles.viewerActions.link}" on:click="{() => showResult()}">Result</a>
+        </div>
+        <div class="{cssStyles.viewerActions.tabItem}">
+          <a class:active="{tab == 'console'}" class="{cssStyles.viewerActions.link}" on:click="{() => showConsole()}">Console</a>
+        </div>
+      </div>
+      <div class="{cssStyles.viewerConsoleContainer}">
+        <div class:hidden="{tab != 'viewer'}" class="{cssStyles.viewer}">
+          <Viewer bind:ready {code} {injectedLibraries} {html} {injectedJS} />
+        </div>
+        <div class:hidden="{tab != 'console'}" class="{cssStyles.console}">
+          <Console bind:ready output={code} />
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/Tutorials.svelte b/src/Tutorials.svelte
deleted file mode 100644
index 2ab6525..0000000
--- a/src/Tutorials.svelte
+++ /dev/null
@@ -1,223 +0,0 @@
-<script>
-  import Viewer from './Viewer.svelte';
-  import Editor from './Editor.svelte';
-  import Console from './Console.svelte';
-
-  let code = '';
-  let html = '';
-  let ready = false;
-  let editor;
-  let completed = false;
-  let currentChapter = 0;
-  let manualUpdates = false;
-  let toggleText = '';
-  let tab = 'viewer';
-  let editorTab = 'js';
-  let contentVisible = true;
-  export let chapters = [];
-  export let injectedLibraries = [];
-  export let injectedJS = '';
-  export let cssStyles = {
-    container: 'container',
-    content: 'content',
-    contentContainer: 'content-actions-container',
-    resultContainer: 'result-container',
-    progressContainer: 'progress-container',
-    viewerContainer: 'viewer-container',
-    viewerConsoleContainer: 'viewer-console-container',
-    toggleContentContainer: 'toggle-content-container',
-    chaptersContainer: 'chapters-container',
-    chapters: {
-      current: 'current-chapter',
-      chapters: 'chapters',
-      chapter: 'chapters-chapter'
-    },
-    progress: {
-      container: 'progress',
-      chapter: 'progress-chapter'
-    },
-    editorActions: {
-      container: '',
-      tabItem: '',
-      link: ''
-    },
-    viewerActions: {
-      container: '',
-      tabItem: '',
-      link: ''
-    },
-    editor: 'editor',
-    viewer: 'viewer',
-    actions: 'actions',
-    button: {
-      show: 'show',
-      next: 'next',
-      prev: 'prev',
-      toggle: 'toggle'
-    }
-  };
-
-  function changeCode(event) {
-    manualUpdates = true
-    if (editorTab === 'js') {
-      code = event.detail.value;
-    } else {
-      html = event.detail.value;
-    }
-  }
-  $: chapter = chapters[currentChapter];
-
-  $: if(ready && !manualUpdates) {
-    code = completed ? chapter.solution : chapter.code;
-    html = completed ? chapter.solutionHtml : chapter.codeHtml;
-    if(!html) html = '';
-    if(editor) {
-      if (editorTab === 'js') {
-        editor.update(code);
-      } else {
-        editor.update(html);
-      }
-    }
-  }
-  function showHTML() {
-    editorTab = 'html';
-    editor.update(html);
-  }
-  function showJS() {
-    editorTab = 'js';
-    editor.update(code);
-  }
-  function next() {
-    manualUpdates = false;
-    completed = false;
-    tab = 'viewer';
-    currentChapter++;
-  }
-  function prev() {
-    manualUpdates = false;
-    completed = false;
-    tab = 'viewer';
-    currentChapter--;
-  }
-  function reset() {
-    manualUpdates = false;
-    completed = false;
-  }
-  function complete() {
-    manualUpdates = false;
-    completed = true;
-  }
-  function showConsole() {
-    tab = 'console';
-  }
-  function showResult() {
-    tab = 'viewer';
-  }
-  function toggleContent() {
-    contentVisible = !contentVisible;
-  }
-</script>
-
-<style>
-  .hidden {
-    visibility: hidden;
-  }
-  .content-container {
-    transition-property: all;
-    transition-duration: .5s;
-    transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
-  }
-  .hide-content .content-container{
-    max-width: 0;
-    overflow-x: hidden;
-  }
-  .hide-content .result-container {
-    width: 95%;
-  }
-</style>
-
-<div class="{cssStyles.container}" class:hide-content="{!contentVisible}">
-  <div class="{cssStyles.chaptersContainer}">
-    <div class="{cssStyles.chapters.current}">{chapter.title}</div>
-    <div class="{cssStyles.chapters.chapters}">
-      {#if currentChapter > 0 }
-        <button class="{cssStyles.button.default} {cssStyles.button.prev}" on:click="{() => prev()}">
-          Previous
-        </button>
-      {/if}
-      {#each chapters as c, i}
-        <div class="{cssStyles.chapters.chapter}" on:click="{() => currentChapter = i}"class:active="{i == currentChapter}">{c.title}</div>
-      {/each}
-      {#if currentChapter < (chapters.length-1) }
-        <button class="{cssStyles.button.default} {cssStyles.button.next}" on:click="{() => next()}">
-          Next
-        </button>
-      {/if}
-    </div>
-  </div>
-  <div class="content-container {cssStyles.contentContainer}">
-    <div class="{cssStyles.content}">
-      {@html chapter.content}
-    </div>
-    <div class="{cssStyles.actions}">
-      {#if !chapter.viewOnly }
-        <button class="{cssStyles.button.default} {cssStyles.button.show}" on:click="{() => completed ? reset() : complete()}">
-          {completed ? 'Reset' : 'Show me'}
-        </button>
-      {/if}
-      {#if currentChapter < (chapters.length-1) }
-        <button class="{cssStyles.button.default} {cssStyles.button.next}" on:click="{() => next()}">
-          Next
-        </button>
-      {/if}
-      {#if currentChapter > 0 }
-        <button class="{cssStyles.button.default} {cssStyles.button.prev}" on:click="{() => prev()}">
-          Previous
-        </button>
-      {/if}
-    </div>
-  </div>
-  <div class="{cssStyles.toggleContentContainer}">
-    <button class="{cssStyles.button.default} {cssStyles.button.toggle}" on:click="{() => toggleContent()}">{toggleText}</button>
-  </div>
-  <div class="result-container {cssStyles.resultContainer}">
-    {#if !chapter.viewOnly }
-      <div class:hidden="{chapter.viewOnly}" class="{cssStyles.editor}">
-        <div class="{cssStyles.editorActions.container}">
-          <div class="{cssStyles.editorActions.tabItem}">
-            <a class:active="{editorTab == 'js'}" class="{cssStyles.editorActions.link}" on:click="{() => showJS()}">index.js</a>
-          </div>
-          <div class="{cssStyles.editorActions.tabItem}">
-            <a class:active="{editorTab == 'html'}" class="{cssStyles.editorActions.link}" on:click="{() => showHTML()}">index.html</a>
-          </div>
-        </div>
-        <Editor bind:this={editor} on:change={changeCode}/>
-      </div>
-    {/if}
-    <div class:view-only="{chapter.viewOnly}" class="{cssStyles.viewerContainer}">
-      <div class="{cssStyles.viewerActions.container}">
-        <div class="{cssStyles.viewerActions.tabItem}">
-          <a class:active="{tab == 'viewer'}" class="{cssStyles.viewerActions.link}" on:click="{() => showResult()}">Result</a>
-        </div>
-        <div class="{cssStyles.viewerActions.tabItem}">
-          <a class:active="{tab == 'console'}" class="{cssStyles.viewerActions.link}" on:click="{() => showConsole()}">Console</a>
-        </div>
-      </div>
-      <div class="{cssStyles.viewerConsoleContainer}">
-        <div class:hidden="{tab != 'viewer'}" class="{cssStyles.viewer}">
-          <Viewer bind:ready {code} {injectedLibraries} {html} {injectedJS} />
-        </div>
-        <div class:hidden="{tab != 'console'}" class="{cssStyles.console}">
-          <Console bind:ready output={code} />
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="{cssStyles.progressContainer}">
-    <div class="{cssStyles.progress.container}">
-      {#each chapters as c, i}
-        <div class="{cssStyles.progress.chapter}" class:active="{i == currentChapter}"></div>
-      {/each}
-    </div>
-  </div>
-</div>