diff --git a/.gitignore b/.gitignore
index 0f5104f43..c1f934b06 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,7 @@
 /tmp
 /src/assets/documents
 /src/assets/examples
-/src/assets/plunker/examples
+/src/assets/stackblitz/examples
 /src/assets/*.css
 /src/assets/*.html
 
diff --git a/src/app/app-module.ts b/src/app/app-module.ts
index 3e632398a..02fad8cfb 100644
--- a/src/app/app-module.ts
+++ b/src/app/app-module.ts
@@ -21,7 +21,7 @@ import {ComponentHeaderModule} from './pages/component-page-header/component-pag
 import {StyleManager} from './shared/style-manager/style-manager';
 import {SvgViewerModule} from './shared/svg-viewer/svg-viewer';
 import {ThemePickerModule} from './shared/theme-picker/theme-picker';
-import {PlunkerButtonModule} from './shared/plunker/plunker-button';
+import {StackblitzButtonModule} from './shared/stackblitz/stackblitz-button';
 import {NavBarModule} from './shared/navbar/navbar';
 import {ThemeStorage} from './shared/theme-picker/theme-storage/theme-storage';
 import {GuideItems} from './shared/guide-items/guide-items';
@@ -56,7 +56,7 @@ import {HttpClientModule} from '@angular/common/http';
     GuideViewerModule,
     HomepageModule,
     NavBarModule,
-    PlunkerButtonModule,
+    StackblitzButtonModule,
     SvgViewerModule,
     ThemePickerModule,
   ],
diff --git a/src/app/shared/doc-viewer/doc-viewer-module.ts b/src/app/shared/doc-viewer/doc-viewer-module.ts
index 038fd00c8..dab7bae85 100644
--- a/src/app/shared/doc-viewer/doc-viewer-module.ts
+++ b/src/app/shared/doc-viewer/doc-viewer-module.ts
@@ -1,6 +1,6 @@
 import {DocViewer} from './doc-viewer';
 import {ExampleViewer} from '../example-viewer/example-viewer';
-import {PlunkerButtonModule} from '../plunker/plunker-button';
+import {StackblitzButtonModule} from '../stackblitz/stackblitz-button';
 import {
   MatButtonModule,
   MatIconModule,
@@ -25,7 +25,7 @@ import {CopierService} from '../copier/copier.service';
     MatTabsModule,
     CommonModule,
     PortalModule,
-    PlunkerButtonModule
+    StackblitzButtonModule
   ],
   providers: [CopierService],
   declarations: [DocViewer, ExampleViewer, HeaderLink],
diff --git a/src/app/shared/example-viewer/example-viewer.html b/src/app/shared/example-viewer/example-viewer.html
index 601d1d192..0d597f8f9 100644
--- a/src/app/shared/example-viewer/example-viewer.html
+++ b/src/app/shared/example-viewer/example-viewer.html
@@ -12,7 +12,7 @@
       </mat-icon>
     </button>
 
-  <plunker-button [example]="example"></plunker-button>
+  <stackblitz-button [example]="example"></stackblitz-button>
 </div>
 
   <div class="docs-example-viewer-source" *ngIf="showSource">
diff --git a/src/app/shared/plunker/index.ts b/src/app/shared/plunker/index.ts
deleted file mode 100644
index dc6d41e3e..000000000
--- a/src/app/shared/plunker/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './plunker-button';
diff --git a/src/app/shared/stackblitz/index.ts b/src/app/shared/stackblitz/index.ts
new file mode 100644
index 000000000..d1e0c8e03
--- /dev/null
+++ b/src/app/shared/stackblitz/index.ts
@@ -0,0 +1 @@
+export * from './stackblitz-button';
diff --git a/src/app/shared/plunker/plunker-button.html b/src/app/shared/stackblitz/stackblitz-button.html
similarity index 72%
rename from src/app/shared/plunker/plunker-button.html
rename to src/app/shared/stackblitz/stackblitz-button.html
index 7ac96a451..b7746c1fa 100644
--- a/src/app/shared/plunker/plunker-button.html
+++ b/src/app/shared/stackblitz/stackblitz-button.html
@@ -1,7 +1,7 @@
-<!-- TODO: change the template to be plunker icon -->
-<div [matTooltip]="isDisabled ? 'Building Plunker example...' : 'Edit in Plunker'">
+<!-- TODO: change the template to be stackblitz icon -->
+<div [matTooltip]="isDisabled ? 'Building StackBlitz example...' : 'Edit in StackBlitz'">
   <button mat-icon-button type="button"
-        (click)="openPlunker()"
+        (click)="openStackblitz()"
         [disabled]="isDisabled">
     <mat-icon>
       <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fit="" preserveAspectRatio="xMidYMid meet" focusable="false">
diff --git a/src/app/shared/plunker/plunker-button.ts b/src/app/shared/stackblitz/stackblitz-button.ts
similarity index 53%
rename from src/app/shared/plunker/plunker-button.ts
rename to src/app/shared/stackblitz/stackblitz-button.ts
index 284c29d5f..6d3ca152a 100644
--- a/src/app/shared/plunker/plunker-button.ts
+++ b/src/app/shared/stackblitz/stackblitz-button.ts
@@ -1,53 +1,53 @@
 import {Component, Input, NgModule} from '@angular/core';
-import {PlunkerWriter} from './plunker-writer';
+import {StackblitzWriter} from './stackblitz-writer';
 import {ExampleData} from '@angular/material-examples';
 import {MatButtonModule, MatIconModule, MatTooltipModule} from '@angular/material';
 
 @Component({
-  selector: 'plunker-button',
-  templateUrl: './plunker-button.html',
-  providers: [PlunkerWriter],
+  selector: 'stackblitz-button',
+  templateUrl: './stackblitz-button.html',
+  providers: [StackblitzWriter],
   host: {
-    '(mouseover)': 'isDisabled = !plunkerForm'
+    '(mouseover)': 'isDisabled = !stackblitzForm'
   }
 })
-export class PlunkerButton {
+export class StackblitzButton {
   /**
-   * The button becomes disabled if the user hovers over the button before the plunker form
+   * The button becomes disabled if the user hovers over the button before the stackblitz form
    * is created. After the form is created, the button becomes enabled again.
    * The form creation usually happens extremely quickly, but we handle the case of the
-   * plunker not yet being ready for people will poor network connections or slow devices.
+   * stackblitz not yet being ready for people will poor network connections or slow devices.
    */
   isDisabled = false;
-  plunkerForm: HTMLFormElement;
+  stackblitzForm: HTMLFormElement;
 
   @Input()
   set example(example: string) {
     const exampleData = new ExampleData(example);
 
-    this.plunkerWriter.constructPlunkerForm(exampleData).then(plunkerForm => {
-      this.plunkerForm = plunkerForm;
+    this.stackblitzWriter.constructStackblitzForm(exampleData).then(stackblitzForm => {
+      this.stackblitzForm = stackblitzForm;
       this.isDisabled = false;
     });
   }
 
-  constructor(private plunkerWriter: PlunkerWriter) {}
+  constructor(private stackblitzWriter: StackblitzWriter) {}
 
-  openPlunker(): void {
+  openStackblitz(): void {
     // When the form is submitted, it must be in the document body. The standard of forms is not
     // to submit if it is detached from the document. See the following chromium commit for
     // more details:
     // https://chromium.googlesource.com/chromium/src/+/962c2a22ddc474255c776aefc7abeba00edc7470%5E!
-    document.body.appendChild(this.plunkerForm);
-    this.plunkerForm.submit();
-    document.body.removeChild(this.plunkerForm);
+    document.body.appendChild(this.stackblitzForm);
+    this.stackblitzForm.submit();
+    document.body.removeChild(this.stackblitzForm);
   }
 }
 
 @NgModule({
   imports: [MatTooltipModule, MatButtonModule, MatIconModule],
-  exports: [PlunkerButton],
-  declarations: [PlunkerButton],
-  providers: [PlunkerWriter],
+  exports: [StackblitzButton],
+  declarations: [StackblitzButton],
+  providers: [StackblitzWriter],
 })
-export class PlunkerButtonModule {}
+export class StackblitzButtonModule {}
diff --git a/src/app/shared/plunker/plunker-writer.spec.ts b/src/app/shared/stackblitz/stackblitz-writer.spec.ts
similarity index 79%
rename from src/app/shared/plunker/plunker-writer.spec.ts
rename to src/app/shared/stackblitz/stackblitz-writer.spec.ts
index 6e7ece07a..0b558e530 100644
--- a/src/app/shared/plunker/plunker-writer.spec.ts
+++ b/src/app/shared/stackblitz/stackblitz-writer.spec.ts
@@ -4,19 +4,19 @@ import {
   BaseRequestOptions, Http, HttpModule, Response, ResponseOptions,
   XHRBackend
 } from '@angular/http';
-import {PlunkerWriter} from './plunker-writer';
+import {StackblitzWriter} from './stackblitz-writer';
 import {ExampleData} from '@angular/material-examples';
 
 
-describe('PlunkerWriter', () => {
-  let plunkerWriter: PlunkerWriter;
+describe('StackblitzWriter', () => {
+  let stackblitzWriter: StackblitzWriter;
   let data: ExampleData;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       imports: [HttpModule],
       declarations: [],
       providers: [
-        PlunkerWriter,
+        StackblitzWriter,
         BaseRequestOptions,
         MockBackend,
         {provide: XHRBackend, useExisting: MockBackend},
@@ -30,20 +30,20 @@ describe('PlunkerWriter', () => {
       connection.mockRespond(getFakeDocResponse(url));
     });
 
-    plunkerWriter = TestBed.get(PlunkerWriter);
+    stackblitzWriter = TestBed.get(StackblitzWriter);
     data = new ExampleData('');
     data.examplePath = 'http://material.angular.io/';
     data.exampleFiles = ['test.ts', 'test.html', 'src/detail.ts'];
   }));
 
   it('should append correct copyright', () => {
-    expect(plunkerWriter._appendCopyright('test.ts', 'NoContent')).toBe(`NoContent
+    expect(stackblitzWriter._appendCopyright('test.ts', 'NoContent')).toBe(`NoContent
 
 /**  Copyright 2017 Google Inc. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at http://angular.io/license */`);
 
-    expect(plunkerWriter._appendCopyright('test.html', 'NoContent')).toBe(`NoContent
+    expect(stackblitzWriter._appendCopyright('test.html', 'NoContent')).toBe(`NoContent
 
 <!-- Copyright 2017 Google Inc. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
@@ -52,16 +52,16 @@ describe('PlunkerWriter', () => {
   });
 
   it('should create form element', () => {
-    expect(plunkerWriter._createFormElement().outerHTML).toBe(
+    expect(stackblitzWriter._createFormElement().outerHTML).toBe(
       `<form action="https://plnkr.co/edit/?p=preview" method="post" target="_blank"></form>`);
   });
 
   it('should add files to form input', () => {
-    let form = plunkerWriter._createFormElement();
+    let form = stackblitzWriter._createFormElement();
 
-    plunkerWriter._addFileToForm(form, data, 'NoContent', 'test.ts', 'path/to/file');
-    plunkerWriter._addFileToForm(form, data, 'Test', 'test.html', 'path/to/file');
-    plunkerWriter._addFileToForm(form, data, 'Detail', 'src/detail.ts', 'path/to/file');
+    stackblitzWriter._addFileToForm(form, data, 'NoContent', 'test.ts', 'path/to/file');
+    stackblitzWriter._addFileToForm(form, data, 'Test', 'test.html', 'path/to/file');
+    stackblitzWriter._addFileToForm(form, data, 'Detail', 'src/detail.ts', 'path/to/file');
 
     expect(form.elements.length).toBe(3);
     expect(form.elements[0].getAttribute('name')).toBe('files[test.ts]');
@@ -69,9 +69,9 @@ describe('PlunkerWriter', () => {
     expect(form.elements[2].getAttribute('name')).toBe('files[src/detail.ts]');
   });
 
-  it('should open a new window with plunker url', fakeAsync(() => {
+  it('should open a new window with stackblitz url', fakeAsync(() => {
     let form;
-    plunkerWriter.constructPlunkerForm(data).then(result => form = result);
+    stackblitzWriter.constructStackblitzForm(data).then(result => form = result);
     flushMicrotasks();
 
     expect(form.elements.length).toBe(11);
diff --git a/src/app/shared/plunker/plunker-writer.ts b/src/app/shared/stackblitz/stackblitz-writer.ts
similarity index 71%
rename from src/app/shared/plunker/plunker-writer.ts
rename to src/app/shared/stackblitz/stackblitz-writer.ts
index 240671ef1..95a37fc76 100644
--- a/src/app/shared/plunker/plunker-writer.ts
+++ b/src/app/shared/stackblitz/stackblitz-writer.ts
@@ -2,50 +2,82 @@ import {Injectable} from '@angular/core';
 import {Http} from '@angular/http';
 import {ExampleData} from '@angular/material-examples';
 import 'rxjs/add/operator/toPromise';
+import {VERSION} from '@angular/material';
 
-const PLUNKER_URL = 'https://plnkr.co/edit/?p=preview';
+const STACKBLITZ_URL = 'https://run.stackblitz.com/api/angular/v1/';
 
 const COPYRIGHT =
   `Copyright 2017 Google Inc. All Rights Reserved.
     Use of this source code is governed by an MIT-style license that
     can be found in the LICENSE file at http://angular.io/license`;
 
-const TEMPLATE_PATH = '/assets/plunker/';
-const TEMPLATE_FILES = ['index.html', 'systemjs.config.js', 'main.ts'];
+const TEMPLATE_PATH = '/assets/stackblitz/';
+const TEMPLATE_FILES = [
+  'index.html',
+  'styles.scss',
+  'polyfills.ts',
+  '.angular-cli.json',
+  'main.ts'
+];
 
 const TAGS: string[] = ['angular', 'material', 'example'];
+const angularVersion = '^5.0.0';
+const materialVersion = '^5.0.0-rc.1';
+
+const dependencies = {
+  '@angular/cdk': materialVersion,
+  '@angular/material': materialVersion,
+  '@angular/animations': angularVersion,
+  '@angular/common': angularVersion,
+  '@angular/compiler': angularVersion,
+  '@angular/core': angularVersion,
+  '@angular/forms': angularVersion,
+  '@angular/http': angularVersion,
+  '@angular/platform-browser': angularVersion,
+  '@angular/platform-browser-dynamic': angularVersion,
+  '@angular/router': angularVersion,
+  'angular-in-memory-web-api': '~0.5.0',
+  'core-js': '^2.4.1',
+  'rxjs': '^5.5.2',
+  'web-animations-js': '^2.3.1',
+  'zone.js': '^0.8.14',
+  'hammerjs': '^2.0.8'
+};
 
 /**
- * Plunker writer, write example files to Plunker
+ * Stackblitz writer, write example files to stackblitz
  *
- * Plunker API
- * URL: http://plnkr.co/edit/?p=preview
+ * StackBlitz API
+ * URL: https://run.stackblitz.com/api/aio/v1/
  * data: {
  *   // File name, directory and content of files
  *   files[file-name1]: file-content1,
  *   files[directory-name/file-name2]: file-content2,
  *   // Can add multiple tags
  *   tags[0]: tag-0,
- *   // Description of plunker
+ *   // Description of stackblitz
  *   description: description,
  *   // Private or not
  *   private: true
+ *  // Dependencies
+ *  dependencies: dependencies
  * }
  */
 @Injectable()
-export class PlunkerWriter {
+export class StackblitzWriter {
   constructor(private _http: Http) {}
 
   /**
-   * Returns an HTMLFormElement that will open a new plunker template with the example data when
+   * Returns an HTMLFormElement that will open a new stackblitz template with the example data when
    * called with submit().
    */
-  constructPlunkerForm(data: ExampleData): Promise<HTMLFormElement> {
+  constructStackblitzForm(data: ExampleData): Promise<HTMLFormElement> {
     let form = this._createFormElement();
 
     TAGS.forEach((tag, i) => this._appendFormInput(form, `tags[${i}]`, tag));
     this._appendFormInput(form, 'private', 'true');
     this._appendFormInput(form, 'description', data.description);
+    this._appendFormInput(form, 'dependencies', JSON.stringify(dependencies));
 
     return new Promise(resolve => {
       let templateContents = TEMPLATE_FILES
@@ -65,10 +97,10 @@ export class PlunkerWriter {
     });
   }
 
-  /** Constructs a new form element that will navigate to the plunker url. */
+  /** Constructs a new form element that will navigate to the stackblitz url. */
   _createFormElement(): HTMLFormElement {
     const form = document.createElement('form');
-    form.action = PLUNKER_URL;
+    form.action = STACKBLITZ_URL;
     form.method = 'post';
     form.target = '_blank';
     return form;
@@ -98,12 +130,14 @@ export class PlunkerWriter {
                  path: string) {
     if (path == TEMPLATE_PATH) {
       content = this._replaceExamplePlaceholderNames(data, filename, content);
+    } else {
+      filename = 'app/' + filename;
     }
     this._appendFormInput(form, `files[${filename}]`, this._appendCopyright(filename, content));
   }
 
   /**
-   * The Plunker template assets contain placeholder names for the examples:
+   * The stackblitz template assets contain placeholder names for the examples:
    * "<material-docs-example>" and "MaterialDocsExample".
    * This will replace those placeholders with the names from the example metadata,
    * e.g. "<basic-button-example>" and "BasicButtonExample"
@@ -116,6 +150,7 @@ export class PlunkerWriter {
       // For example, <material-docs-example></material-docs-example> will be replaced as
       // <button-demo></button-demo>
       fileContent = fileContent.replace(/material-docs-example/g, data.selectorName);
+      fileContent = fileContent.replace(/{{version}}/g, VERSION.full);
     } else if (fileName == 'main.ts') {
       // Replace the component name in `main.ts`.
       // For example, `import {MaterialDocsExample} from 'material-docs-example'`
diff --git a/src/assets/plunker/index.html b/src/assets/plunker/index.html
deleted file mode 100644
index bdb13a98b..000000000
--- a/src/assets/plunker/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <title>Angular Material Plunker</title>
-
-  <!-- Load common libraries -->
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/typescript/2.1.1/typescript.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.4.1/core.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/zone.js/0.8.5/zone.min.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
-
-  <!-- Configure SystemJS -->
-  <script src="systemjs.config.js"></script>
-
-  <script>
-    System
-      .import('main.ts')
-      .catch(console.error.bind(console));
-  </script>
-
-  <!-- Load the Angular Material stylesheet -->
-  <link href="https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
-  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
-  <style>body { font-family: Roboto, Arial, sans-serif; }</style>
-</head>
-
-<body>
-<material-docs-example>Loading Material Docs example...</material-docs-example>
-</body>
-
-</html>
diff --git a/src/assets/plunker/systemjs.config.js b/src/assets/plunker/systemjs.config.js
deleted file mode 100644
index 0ffabf698..000000000
--- a/src/assets/plunker/systemjs.config.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/** Add Transpiler for Typescript */
-System.config({
-  transpiler: 'typescript',
-  typescriptOptions: {
-    emitDecoratorMetadata: true
-  },
-  packages: {
-    '.': {
-      defaultExtension: 'ts'
-    },
-    'vendor': {
-      defaultExtension: 'js'
-    }
-  }
-});
-
-System.config({
-  map: {
-    'main': 'main.js',
-
-    // Angular specific mappings.
-    '@angular/core': 'https://unpkg.com/@angular/core/bundles/core.umd.js',
-    '@angular/animations': 'https://unpkg.com/@angular/animations/bundles/animations.umd.js',
-    '@angular/common': 'https://unpkg.com/@angular/common/bundles/common.umd.js',
-    '@angular/common/http': 'https://unpkg.com/@angular/common/bundles/common-http.umd.js',
-    '@angular/compiler': 'https://unpkg.com/@angular/compiler/bundles/compiler.umd.js',
-    '@angular/http': 'https://unpkg.com/@angular/http/bundles/http.umd.js',
-    '@angular/forms': 'https://unpkg.com/@angular/forms/bundles/forms.umd.js',
-    '@angular/router': 'https://unpkg.com/@angular/router/bundles/router.umd.js',
-    '@angular/platform-browser': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser.umd.js',
-    '@angular/platform-browser-dynamic': 'https://unpkg.com/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
-    '@angular/animations/browser': 'https://unpkg.com/@angular/animations/bundles/animations-browser.umd.js',
-    '@angular/platform-browser/animations': 'https://unpkg.com/@angular/platform-browser/bundles/platform-browser-animations.umd.js',
-
-    // Angular Material and Angular CDK primary bundles.
-    '@angular/material': 'https://unpkg.com/@angular/material/bundles/material.umd.js',
-    '@angular/cdk': 'https://unpkg.com/@angular/cdk/bundles/cdk.umd.js',
-
-    // CDK Secondary entry points
-    '@angular/cdk/a11y': 'https://unpkg.com/@angular/cdk/bundles/cdk-a11y.umd.js',
-    '@angular/cdk/accordion': 'https://unpkg.com/@angular/cdk/bundles/cdk-accordion.umd.js',
-    '@angular/cdk/bidi': 'https://unpkg.com/@angular/cdk/bundles/cdk-bidi.umd.js',
-    '@angular/cdk/coercion': 'https://unpkg.com/@angular/cdk/bundles/cdk-coercion.umd.js',
-    '@angular/cdk/collections': 'https://unpkg.com/@angular/cdk/bundles/cdk-collections.umd.js',
-    '@angular/cdk/keycodes': 'https://unpkg.com/@angular/cdk/bundles/cdk-keycodes.umd.js',
-    '@angular/cdk/observers': 'https://unpkg.com/@angular/cdk/bundles/cdk-observers.umd.js',
-    '@angular/cdk/overlay': 'https://unpkg.com/@angular/cdk/bundles/cdk-overlay.umd.js',
-    '@angular/cdk/platform': 'https://unpkg.com/@angular/cdk/bundles/cdk-platform.umd.js',
-    '@angular/cdk/portal': 'https://unpkg.com/@angular/cdk/bundles/cdk-portal.umd.js',
-    '@angular/cdk/scrolling': 'https://unpkg.com/@angular/cdk/bundles/cdk-scrolling.umd.js',
-    '@angular/cdk/table': 'https://unpkg.com/@angular/cdk/bundles/cdk-table.umd.js',
-    '@angular/cdk/stepper': 'https://unpkg.com/@angular/cdk/bundles/cdk-stepper.umd.js',
-    '@angular/cdk/layout': 'https://unpkg.com/@angular/cdk/bundles/cdk-layout.umd.js',
-
-    // Rxjs mapping
-    'rxjs': 'https://unpkg.com/rxjs',
-
-    // TODO(josephperrott): Determine why this is needed and get it removed.
-    'tslib': 'https://unpkg.com/tslib/tslib.js'
-  },
-  packages: {
-    // Thirdparty barrels.
-    'rxjs': { main: 'index' },
-  }
-});
diff --git a/src/assets/stackblitz/.angular-cli.json b/src/assets/stackblitz/.angular-cli.json
new file mode 100644
index 000000000..2d084b92a
--- /dev/null
+++ b/src/assets/stackblitz/.angular-cli.json
@@ -0,0 +1,7 @@
+{
+  "apps": [{
+    "styles": [
+      "styles.scss"
+      ]
+  }]
+}
diff --git a/src/assets/stackblitz/index.html b/src/assets/stackblitz/index.html
new file mode 100644
index 000000000..20f20929c
--- /dev/null
+++ b/src/assets/stackblitz/index.html
@@ -0,0 +1,5 @@
+<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+<div class="mat-app-background basic-container">
+  <material-docs-example>loading</material-docs-example>
+</div>
+<span class="version-info">Current build: {{version}}</span>
\ No newline at end of file
diff --git a/src/assets/plunker/main.ts b/src/assets/stackblitz/main.ts
similarity index 90%
rename from src/assets/plunker/main.ts
rename to src/assets/stackblitz/main.ts
index 652dec2e7..eb7ef4039 100644
--- a/src/assets/plunker/main.ts
+++ b/src/assets/stackblitz/main.ts
@@ -1,3 +1,4 @@
+import './polyfills';
 import {platformBrowserDynamic} from '@angular/platform-browser-dynamic';
 import {BrowserModule} from '@angular/platform-browser';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -36,7 +37,7 @@ import {
   MatTooltipModule,
   MatStepperModule,
 } from '@angular/material';
-import {MaterialDocsExample} from './material-docs-example';
+import {MaterialDocsExample} from './app/material-docs-example';
 import {HttpModule} from '@angular/http';
 import {CdkTableModule} from '@angular/cdk/table';
 
@@ -76,7 +77,7 @@ import {CdkTableModule} from '@angular/cdk/table';
     MatTooltipModule,
   ]
 })
-export class PlunkerMaterialModule {}
+export class DemoMaterialModule {}
 
 @NgModule({
 
@@ -85,7 +86,7 @@ export class PlunkerMaterialModule {}
     BrowserAnimationsModule,
     FormsModule,
     HttpModule,
-    PlunkerMaterialModule,
+    DemoMaterialModule,
     MatNativeDateModule,
     ReactiveFormsModule,
   ],
@@ -94,6 +95,6 @@ export class PlunkerMaterialModule {}
   bootstrap: [MaterialDocsExample],
   providers: []
 })
-export class PlunkerAppModule {}
+export class AppModule {}
 
-platformBrowserDynamic().bootstrapModule(PlunkerAppModule);
+platformBrowserDynamic().bootstrapModule(AppModule);
diff --git a/src/assets/stackblitz/polyfills.ts b/src/assets/stackblitz/polyfills.ts
new file mode 100644
index 000000000..eef29e528
--- /dev/null
+++ b/src/assets/stackblitz/polyfills.ts
@@ -0,0 +1,5 @@
+import 'core-js/es6/reflect';
+import 'core-js/es7/reflect';
+import 'zone.js/dist/zone';
+import 'hammerjs';
+import 'web-animations-js';
diff --git a/src/assets/stackblitz/styles.scss b/src/assets/stackblitz/styles.scss
new file mode 100644
index 000000000..9b7ec22b3
--- /dev/null
+++ b/src/assets/stackblitz/styles.scss
@@ -0,0 +1,15 @@
+@import '~@angular/material/prebuilt-themes/deeppurple-amber.css';
+
+body { 
+  font-family: Roboto, Arial, sans-serif;
+  margin: 0;
+}
+
+.basic-container {
+  padding: 5px;
+}
+
+.version-info {
+  font-size: 8pt;
+  float: right;
+}
diff --git a/tools/fetch-assets-local.sh b/tools/fetch-assets-local.sh
index f1fcef16e..feb197122 100755
--- a/tools/fetch-assets-local.sh
+++ b/tools/fetch-assets-local.sh
@@ -33,8 +33,8 @@ cp -r ${baseSrcPath}/dist/releases/material-examples ./node_modules/@angular/
 # Copy Examples
 cp -r ${baseSrcPath}/dist/docs/examples ${baseTargetPath}
 
-# Copy Plunkers
-cp -r ${baseSrcPath}/dist/docs/plunker ${baseTargetPath}
+# Copy stackblitz
+cp -r ${baseSrcPath}/dist/docs/stackblitz ${baseTargetPath}
 
 # Copy API Files
 cp -r ${baseSrcPath}/dist/docs/api ${baseTargetPath}/documents
diff --git a/tools/fetch-assets.sh b/tools/fetch-assets.sh
index 43e7ffa92..871aebed1 100755
--- a/tools/fetch-assets.sh
+++ b/tools/fetch-assets.sh
@@ -9,7 +9,7 @@ docAssetsPath=./src/assets/documents/
 # Dir where live-example assets will be copied
 exampleAssetsPath=./src/assets/
 
-plunkerExampleAssetsPath=./src/assets/plunker/
+stackblitzxampleAssetsPath=./src/assets/stackblitz/
 
 # Dir where published assets will temporarily copied to (using `git clone`).
 tmpAssetClonePath=/tmp/material-assets
@@ -24,7 +24,7 @@ apiPath=${tmpAssetClonePath}/api
 guidesPath=${tmpAssetClonePath}/guides
 overviewPath=${tmpAssetClonePath}/overview
 examplesPath=${tmpAssetClonePath}/examples
-plunkerExamplesPath=${tmpAssetClonePath}/plunker/examples
+stackblitzExamplesPath=${tmpAssetClonePath}/stackblitz/examples
 
 # Create folders into which to copy content and assets.
 mkdir -p ${tmpAssetClonePath}
@@ -36,7 +36,7 @@ git clone ${docsContentRepo} ${tmpAssetClonePath} --depth 1
 # Copy files over to their proper place in src/assets
 cp -R ${apiPath} ${overviewPath} ${guidesPath} ${docAssetsPath}
 cp -R ${examplesPath} ${exampleAssetsPath}
-cp -R ${plunkerExamplesPath} ${plunkerExampleAssetsPath}
+cp -R ${stackblitzExamplesPath} ${stackblitzExampleAssetsPath}
 
 # Install the live examples component library
 mkdir -p ./node_modules/@angular/material-examples
diff --git a/tools/plunker-example.sh b/tools/plunker-example.sh
deleted file mode 100755
index 8c67508ff..000000000
--- a/tools/plunker-example.sh
+++ /dev/null
@@ -1,2 +0,0 @@
-#!/bin/bash
-cp src/app/examples src/assets/plunker -r
diff --git a/tools/stackblitz-example.sh b/tools/stackblitz-example.sh
new file mode 100755
index 000000000..9f5c1f907
--- /dev/null
+++ b/tools/stackblitz-example.sh
@@ -0,0 +1,2 @@
+#!/bin/bash
+cp src/app/examples src/assets/stackblitz -r