diff --git a/examples/playground/README.md b/examples/playground/README.md
index 3ff3cf3..398dece 100644
--- a/examples/playground/README.md
+++ b/examples/playground/README.md
@@ -5,21 +5,21 @@ the marker API.
 
 ## Get Started
 
-1.  Install dependencies:
+1. Install dependencies:
 
-    npm install
+   npm install
 
-2.  create the `.env` file. The API Key to use
-    [can be found here][gcloud_console_maps_credentials].
+2. create the `.env` file. The API Key to use
+   [can be found here][gcloud_console_maps_credentials].
 
-        GOOGLE_MAPS_API_KEY="<INSERT API KEY HERE>"
-        PRODUCTION_BASEURL="/marker-api-playground/"
+       GOOGLE_MAPS_API_KEY="<INSERT API KEY HERE>"
+       PRODUCTION_BASEURL="/marker-api-playground/"
 
-3.  start the 'playground' environment:
+3. start the 'playground' environment:
 
-    npm start
+   npm start
 
-4.  open http://localhost:5173 in your browser
+4. open http://localhost:5173 in your browser
 
 [gcloud_console_maps_credentials]: https://console.cloud.google.com/apis/credentials/key/cace4819-4b19-489c-bd49-d91300d72dab?project=ubilabs-dev
 
@@ -41,13 +41,13 @@ modules can only be imported using async imports from urls.
 - `/`: contains `index.html`, `examples.html` and configuration-files
 - `/scripts`: this is the place for utility scripts, mostly written in [zx][]
 - `/src`: the typescript source-root. The application entrypoint is in `main.ts`
-- `/src/code-samples`: contains the source-files for all examples. The 
+- `/src/code-samples`: contains the source-files for all examples. The
   typescript files here should all follow the conventions for examples below.
-  For the examples index-page, these files are packaged into examples.json 
+  For the examples index-page, these files are packaged into examples.json
   by the `build:examples` npm task (see
   `/scripts/update-examples.mjs`)
-- `/src/code-samples/lib`: contains the typescript declaration-files 
-  generated from the library that are required by the editor and referenced 
+- `/src/code-samples/lib`: contains the typescript declaration-files
+  generated from the library that are required by the editor and referenced
   by the examples. Those files are generated by `npm run build:dts` from the
   library files.
 - `/types` is for additional typescript declarations
@@ -64,16 +64,15 @@ modules can only be imported using async imports from urls.
 - the first line of the example has to contain a comment in the form:
   `// title: This describes what it does` - this comment will be the text
   shown in the example-index
-- the example must import the marker-library via the `*.d.ts` files
-  available in `./src/code-samples/lib/`
-  (e.g. `import {Marker} from './lib/marker';`).
+- the example must import components from the marker-library using regular
+  imports (e.g. `import {Marker} from '@ubilabs/google-maps-marker';`).
 - there has to be a default export, which will be called with the
   map-instance as parameter when the script is run
 - When any changes are done in the browser environment (event-listeners,
   timeouts, intervals, ...), the exported function has to return a cleanup
-  function removing all those. This doesn't apply for created markers, those
-  are automatically removed from the map when a new version of the script is
-  executed.
+  function removing all those. This doesn't apply for created markers and
+  marker-collections, those are automatically removed from the map when a
+  new version of the script is executed.
 
 ## scripts, npm-tasks and deployment
 
@@ -88,8 +87,6 @@ The following supporting scripts and tasks are available:
 
 - `npm start`: starts the vite dev-server (this will also run the `build:dts`
   and `build:examples` tasks)
-- `npm run build:dts`: compiles all typescript-files in `./src/lib`
-  into corresponding declaration files in `./examples/lib`
 - `npm run build:examples`: runs the `script/update-examples.mjs` script to
   update the examples index in `./examples/examples.json`. The index is
   loaded in `examples.html` to render the list of examples
diff --git a/examples/playground/examples.html b/examples/playground/examples.html
index 0060fdb..ecdd5fc 100644
--- a/examples/playground/examples.html
+++ b/examples/playground/examples.html
@@ -19,6 +19,7 @@
         background: #1e1e1e;
         color: #d4d4d4;
       }
+
       main {
         max-width: 640px;
         width: 100%;
@@ -35,11 +36,21 @@ <h1>List of examples</h1>
     </main>
 
     <script type="module">
-      import data from './src/code-samples/examples.json';
       import {encode} from './src/snippet-encoder';
 
+      const files = import.meta.glob('./src/code-samples/*.ts', {
+        as: 'raw',
+        eager: true
+      });
+
       const root = document.querySelector('ul.examples');
-      for (const {title, source} of Object.values(data)) {
+      for (const [filename, source] of Object.entries(files)) {
+        const firstLine = source.slice(0, source.indexOf('\n')).trim();
+        let title = filename.replace(/^.*\//, '');
+        if (firstLine.startsWith('// title:')) {
+          title = firstLine.replace(/\/\/ title:\s*/, '');
+        }
+
         const el = document.createElement('li');
         const a = document.createElement('a');
 
diff --git a/examples/playground/index.html b/examples/playground/index.html
index 2817878..645d682 100644
--- a/examples/playground/index.html
+++ b/examples/playground/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html>
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -18,14 +18,14 @@
         margin: 0;
         display: flex;
         flex-flow: row nowrap;
-        background: #1e1e1e;
-        color: #d4d4d4;
       }
+
       #map {
         height: 100%;
         width: 100%;
         flex: 1 1 auto;
       }
+
       .sidebar {
         width: 100%;
         min-width: 480px;
@@ -43,6 +43,10 @@
         align-items: center;
       }
 
+      .controls {
+        display: flex;
+      }
+
       h1 {
         font-size: 1em;
         margin: 0;
@@ -58,24 +62,30 @@
       .links {
         padding: 1rem;
       }
+
       .links ul {
         list-style-type: none;
         margin: 0;
         padding: 0;
       }
+
       .links li {
         display: inline-block;
       }
     </style>
+    <title>marker playground</title>
   </head>
   <body>
     <div id="map"></div>
     <div class="sidebar">
       <div class="header">
-        <h1>Marker API Playground</h1>
-        <button id="btn-compile-and-run" title="Run the code (⌘ + ⏎)">
-          Run ▶
-        </button>
+        <h1>marker playground</h1>
+        <div class="controls">
+          <select id="example-select"></select>
+          <button id="btn-compile-and-run" title="Run the code (⌘ + ⏎)">
+            Run ▶
+          </button>
+        </div>
       </div>
       <div id="editor"></div>
       <div class="links">
diff --git a/examples/playground/package.json b/examples/playground/package.json
index deb6d43..ec3d1af 100644
--- a/examples/playground/package.json
+++ b/examples/playground/package.json
@@ -1,13 +1,14 @@
 {
-  "name": "marker-api-design-testing-ground",
+  "name": "@ubilabs/google-maps-marker__playground",
   "version": "1.3.0",
   "scripts": {
-    "start": "run-p build:* && vite",
-    "build:dts": "tsc --declaration --emitDeclarationOnly --module esnext --target es2022 --lib es2022,dom --stripInternal --strict ../../src/*.ts --outDir ./src/code-samples/lib",
-    "build:examples": "zx ./scripts/update-examples.mjs",
+    "start": "npm-run-all -p build:* -s serve",
+    "build:lib": "cd ../.. && npm run build",
     "build": "run-p build:* && vite build",
     "preview": "run-s build && vite preview",
-    "deploy": "run-s build && gsutil -m rsync -drc ./dist/ gs://storage.ubidev.net/marker-api-playground/"
+    "deploy": "run-s build && gsutil -m rsync -drc ./dist/ gs://storage.ubidev.net/marker-api-playground/",
+    "serve": "vite",
+    "watch:library": "cd ../.. && npm run watch"
   },
   "keywords": [],
   "directories": {
diff --git a/examples/playground/scripts/update-examples.mjs b/examples/playground/scripts/update-examples.mjs
deleted file mode 100644
index 73c000e..0000000
--- a/examples/playground/scripts/update-examples.mjs
+++ /dev/null
@@ -1,26 +0,0 @@
-#!/usr/bin/env zx
-
-import 'zx/globals';
-
-const examples = await globby(__dirname + '/../src/code-samples/*ts');
-
-const data = {};
-
-for (let f of examples) {
-  const basename = path.basename(f);
-  const source = await fs.readFile(f, 'utf-8');
-
-  let title = basename;
-  const firstLine = source.slice(0, source.indexOf('\n')).trim();
-  if (firstLine.startsWith('// title:')) {
-    title = firstLine.replace(/\/\/ title:\s*/, '');
-  }
-
-  data[basename] = {
-    title,
-    filename: basename,
-    source
-  };
-}
-
-await fs.writeJSON(__dirname + '/../src/code-samples/examples.json', data);
diff --git a/examples/playground/src/code-samples/00.default.ts b/examples/playground/src/code-samples/00.default.ts
index 414c918..9e301b9 100644
--- a/examples/playground/src/code-samples/00.default.ts
+++ b/examples/playground/src/code-samples/00.default.ts
@@ -8,8 +8,8 @@
 // <Cmd> + <S>        save the code to the URL
 //
 
-import {Marker} from './lib/marker';
-import {MaterialIcons} from './lib/icons';
+import {Marker} from '@ubilabs/google-maps-marker';
+import {MaterialIcons} from '@ubilabs/google-maps-marker/icons';
 
 export default (map: google.maps.Map) => {
   Marker.registerIconProvider(MaterialIcons());
diff --git a/examples/playground/src/code-samples/01.simple-marker.ts b/examples/playground/src/code-samples/01.simple-marker.ts
index 2cf3770..c48ba45 100644
--- a/examples/playground/src/code-samples/01.simple-marker.ts
+++ b/examples/playground/src/code-samples/01.simple-marker.ts
@@ -1,12 +1,12 @@
 // title: create marker and add it to the map
-import {Marker} from './lib/marker';
+import {Marker} from '@ubilabs/google-maps-marker';
 
 export default (map: google.maps.Map) => {
   const m1 = new Marker();
   m1.position = {lat: 53.555, lng: 10.001};
   m1.map = map;
 
-  const m2 = new Marker({
+  new Marker({
     map,
     position: {lat: 53.55, lng: 10}
   });
diff --git a/examples/playground/src/code-samples/02.update-position.ts b/examples/playground/src/code-samples/02.update-position.ts
index 4ec656e..1644944 100644
--- a/examples/playground/src/code-samples/02.update-position.ts
+++ b/examples/playground/src/code-samples/02.update-position.ts
@@ -1,5 +1,5 @@
 // title: specifying and updating position
-import {Marker} from './lib/marker';
+import {Marker} from '@ubilabs/google-maps-marker';
 
 export default (map: google.maps.Map) => {
   const m1 = new Marker({map});
diff --git a/examples/playground/src/code-samples/03.pin-styling.ts b/examples/playground/src/code-samples/03.pin-styling.ts
index cf19594..61d4fc2 100644
--- a/examples/playground/src/code-samples/03.pin-styling.ts
+++ b/examples/playground/src/code-samples/03.pin-styling.ts
@@ -1,5 +1,5 @@
 // title: simple marker customizations: color
-import {Marker} from './lib/marker';
+import {Marker} from '@ubilabs/google-maps-marker';
 
 export default (map: google.maps.Map) => {
   const m1 = new Marker({map, position: {lat: 50, lng: 10}});
diff --git a/examples/playground/src/code-samples/04.pin-icons.ts b/examples/playground/src/code-samples/04.pin-icons.ts
index 44dbd15..35fd4e2 100644
--- a/examples/playground/src/code-samples/04.pin-icons.ts
+++ b/examples/playground/src/code-samples/04.pin-icons.ts
@@ -1,6 +1,9 @@
 // title: simple marker customizations: icons
-import {Marker} from './lib/marker';
-import {MaterialIcons, MaterialIconsStyle} from './lib/icons';
+import {Marker} from '@ubilabs/google-maps-marker';
+import {
+  MaterialIcons,
+  MaterialIconsStyle
+} from '@ubilabs/google-maps-marker/icons';
 
 export default (map: google.maps.Map) => {
   // first we need to register the icon-provider, which is a function that knows how to create the kind of dom-element needed for an icon-set
diff --git a/examples/playground/src/code-samples/04b.places-icons.ts b/examples/playground/src/code-samples/04b.places-icons.ts
index a4e6e8e..af277d2 100644
--- a/examples/playground/src/code-samples/04b.places-icons.ts
+++ b/examples/playground/src/code-samples/04b.places-icons.ts
@@ -1,7 +1,7 @@
 // title: simple marker customizations: Google Maps Places API icons
 
-import {Marker} from './lib/marker';
-import {PlaceIcons} from './lib/icons';
+import {Marker} from '@ubilabs/google-maps-marker';
+import {PlaceIcons} from '@ubilabs/google-maps-marker/icons';
 
 export default (map: google.maps.Map) => {
   Marker.registerIconProvider(PlaceIcons());
diff --git a/examples/playground/src/code-samples/05.hover-styling.ts b/examples/playground/src/code-samples/05.hover-styling.ts
index d785515..8878a21 100644
--- a/examples/playground/src/code-samples/05.hover-styling.ts
+++ b/examples/playground/src/code-samples/05.hover-styling.ts
@@ -1,5 +1,5 @@
 // title: marker interactivity: hover
-import {Marker} from './lib/marker';
+import {Marker} from '@ubilabs/google-maps-marker';
 
 export default (map: google.maps.Map) => {
   const position = {lat: 53.5, lng: 10};
diff --git a/examples/playground/src/code-samples/06.click-events.ts b/examples/playground/src/code-samples/06.click-events.ts
index ef9578d..ed65451 100644
--- a/examples/playground/src/code-samples/06.click-events.ts
+++ b/examples/playground/src/code-samples/06.click-events.ts
@@ -1,5 +1,5 @@
 // title: marker interactivity: click events
-import {Marker} from './lib/marker';
+import {Marker} from '@ubilabs/google-maps-marker';
 
 export default (map: google.maps.Map) => {
   const marker = new Marker({
diff --git a/examples/playground/src/code-samples/07.mulitple-marker-single-select.ts b/examples/playground/src/code-samples/07.mulitple-marker-single-select.ts
index 4f5c91a..1b241d6 100644
--- a/examples/playground/src/code-samples/07.mulitple-marker-single-select.ts
+++ b/examples/playground/src/code-samples/07.mulitple-marker-single-select.ts
@@ -1,5 +1,5 @@
 // title: multiple markers / single selection (w/ user-data)
-import {Marker} from './lib/marker';
+import {Marker} from '@ubilabs/google-maps-marker';
 
 function rnd(min: number, max: number) {
   return min + Math.random() * (max - min);
@@ -29,7 +29,7 @@ export default (map: google.maps.Map) => {
       {
         map,
         position,
-        color: ({data}) => (data.selected ? '#DB4437' : '#4285F4')
+        color: ({data}) => (data?.selected ? '#DB4437' : '#4285F4')
       },
       // initial user-data
       {selected: false}
diff --git a/examples/playground/src/code-samples/07b.mulitple-marker-single-select.ts b/examples/playground/src/code-samples/07b.mulitple-marker-single-select.ts
index 7d38950..f07cd9f 100644
--- a/examples/playground/src/code-samples/07b.mulitple-marker-single-select.ts
+++ b/examples/playground/src/code-samples/07b.mulitple-marker-single-select.ts
@@ -1,5 +1,5 @@
 // title: multiple markers / single selection (alternative w/ 'style objects')
-import {Attributes, Marker} from './lib/marker';
+import {Attributes, Marker} from '@ubilabs/google-maps-marker';
 
 function rnd(min: number, max: number) {
   return min + Math.random() * (max - min);
diff --git a/examples/playground/src/code-samples/08.attribute-dependencies.ts b/examples/playground/src/code-samples/08.attribute-dependencies.ts
index a31997c..c029d4c 100644
--- a/examples/playground/src/code-samples/08.attribute-dependencies.ts
+++ b/examples/playground/src/code-samples/08.attribute-dependencies.ts
@@ -1,6 +1,6 @@
 // title: dynamic attributes depending on each other
 
-import {Marker} from './lib/marker';
+import {Marker} from '@ubilabs/google-maps-marker';
 
 // dynamic attributes can be written to reliably depend on the current value
 // of another attribute, for example to make colors depend on the icon shown
@@ -14,7 +14,8 @@ export default (map: google.maps.Map) => {
   const marker = new Marker({
     position: {lat: 53.55, lng: 10.05},
     color: ({marker}) => (marker.hovered ? 'red' : 'green'),
-    borderColor: ({attr}) => (attr.color === 'red' ? 'black' : undefined),
-    map
+    borderColor: ({attr}) => (attr.color === 'red' ? 'black' : undefined)
   });
+
+  marker.map = map;
 };
diff --git a/examples/playground/src/code-samples/09.draggable-manual.ts b/examples/playground/src/code-samples/09.draggable-manual.ts
index 90c70b5..db49c44 100644
--- a/examples/playground/src/code-samples/09.draggable-manual.ts
+++ b/examples/playground/src/code-samples/09.draggable-manual.ts
@@ -1,6 +1,6 @@
 // title: draggable markers / update position after drag
-import {Marker} from './lib/marker';
-import {MaterialIcons} from './lib/icons';
+import {Marker} from '@ubilabs/google-maps-marker';
+import {MaterialIcons} from '@ubilabs/google-maps-marker/icons';
 
 export default (map: google.maps.Map) => {
   Marker.registerIconProvider(MaterialIcons());
@@ -10,8 +10,8 @@ export default (map: google.maps.Map) => {
   m1.map = map;
 
   m1.draggable = true;
-  m1.addListener('dragend', ev => {
-    console.log('dragend', ev.latLng.toJSON());
-    m1.position = ev.latLng.toJSON();
+  m1.addListener('dragend', (ev: google.maps.MapMouseEvent) => {
+    console.log('dragend', ev.latLng?.toJSON());
+    m1.position = ev.latLng?.toJSON();
   });
 };
diff --git a/examples/playground/src/code-samples/10.marker-collection.ts b/examples/playground/src/code-samples/10.marker-collection.ts
index 70815b2..f1ac85d 100644
--- a/examples/playground/src/code-samples/10.marker-collection.ts
+++ b/examples/playground/src/code-samples/10.marker-collection.ts
@@ -1,12 +1,11 @@
 // title: basic marker collection
 
-import {CollisionBehavior, Marker} from './lib/marker';
-import {MarkerCollection} from './lib/marker-collection';
-import {MaterialIcons} from './lib/icons';
-
-function rnd(min: number, max: number) {
-  return min + Math.random() * (max - min);
-}
+import {
+  CollisionBehavior,
+  Marker,
+  MarkerCollection
+} from '@ubilabs/google-maps-marker';
+import {MaterialIcons} from '@ubilabs/google-maps-marker/icons';
 
 type MyData = {
   id: number;
@@ -21,31 +20,15 @@ const categoryIcons: {[c: string]: string} = {
   c: 'person'
 };
 
-async function loadData(): Promise<MyData[]> {
-  const data = [];
-  for (let i = 0; i < 50; i++) {
-    const position = {lat: rnd(53.5, 53.6), lng: rnd(9.9, 10.1)};
-    const category = categories[Math.floor(Math.random() * 3)];
-
-    data.push({
-      id: i,
-      position,
-      category
-    });
-  }
-
-  return data;
-}
-
 export default async (map: google.maps.Map) => {
   Marker.registerIconProvider(MaterialIcons());
 
   const data = await loadData();
   const markers = new MarkerCollection(data, {
-    position: ({data}) => data.position,
+    position: ({data}) => data?.position,
     scale: 1.4,
     color: ({marker}) => (marker.hovered ? '#ffcc22' : '#dd9222'),
-    icon: ({data}) => categoryIcons[data.category],
+    icon: ({data}) => data && categoryIcons[data.category],
     collisionBehavior: CollisionBehavior.OPTIONAL_AND_HIDES_LOWER_PRIORITY
   });
 
@@ -56,8 +39,24 @@ export default async (map: google.maps.Map) => {
     heading: 0,
     tilt: 0
   });
-
-  return () => {
-    markers.map = null;
-  };
 };
+
+function rnd(min: number, max: number) {
+  return min + Math.random() * (max - min);
+}
+
+async function loadData(): Promise<MyData[]> {
+  const data = [];
+  for (let i = 0; i < 50; i++) {
+    const position = {lat: rnd(53.5, 53.6), lng: rnd(9.9, 10.1)};
+    const category = categories[Math.floor(Math.random() * 3)];
+
+    data.push({
+      id: i,
+      position,
+      category
+    });
+  }
+
+  return data;
+}
diff --git a/examples/playground/src/code-samples/11.marker-collection-update.ts b/examples/playground/src/code-samples/11.marker-collection-update.ts
index aeeb740..3bd415b 100644
--- a/examples/playground/src/code-samples/11.marker-collection-update.ts
+++ b/examples/playground/src/code-samples/11.marker-collection-update.ts
@@ -2,8 +2,7 @@
 
 /* eslint-disable @typescript-eslint/no-misused-promises */
 
-import {CollisionBehavior, Marker} from './lib/marker';
-import {MarkerCollection} from './lib/marker-collection';
+import {MarkerCollection} from '@ubilabs/google-maps-marker';
 
 type MyData = {
   id: number;
@@ -15,8 +14,8 @@ export default async (map: google.maps.Map) => {
   const data = await loadData();
   const markers = new MarkerCollection<MyData>(data, {
     key: data => data.id.toString(),
-    position: ({data}) => data.position,
-    color: ({data}) => data.color,
+    position: ({data}) => data?.position,
+    color: ({data}) => data?.color,
     scale: 1.4
   });
 
@@ -34,7 +33,6 @@ export default async (map: google.maps.Map) => {
   });
 
   return () => {
-    markers.map = null;
     clearInterval(intervalId);
   };
 };
diff --git a/examples/playground/src/code-samples/12.place-details.ts b/examples/playground/src/code-samples/12.place-details.ts
index d92f32c..17cb14a 100644
--- a/examples/playground/src/code-samples/12.place-details.ts
+++ b/examples/playground/src/code-samples/12.place-details.ts
@@ -1,12 +1,13 @@
 // title: simple marker for google places API PlaceResult
-import {Marker} from './lib/marker';
+import {Marker} from '@ubilabs/google-maps-marker';
+
 export default (map: google.maps.Map) => {
   const marker = new Marker<google.maps.places.PlaceResult>({
-    position: ({data}) => data.geometry?.location?.toJSON(),
-    backgroundColor: ({data}) => data.icon_background_color,
-    borderColor: ({data}) => data.icon_background_color,
+    position: ({data}) => data?.geometry?.location?.toJSON(),
+    backgroundColor: ({data}) => data?.icon_background_color,
+    borderColor: ({data}) => data?.icon_background_color,
     glyph: ({data}) =>
-      data.icon_mask_base_uri && new URL(data.icon_mask_base_uri + '.svg'),
+      data?.icon_mask_base_uri && new URL(data.icon_mask_base_uri + '.svg'),
     map
   });
   marker.setData(loadData());
@@ -15,10 +16,7 @@ export default (map: google.maps.Map) => {
 function loadData() {
   return {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.5544977,
-        lng: 10.0073303
-      })
+      location: new google.maps.LatLng({lat: 53.5544977, lng: 10.0073303})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
diff --git a/examples/playground/src/code-samples/12b.place-details.ts b/examples/playground/src/code-samples/12b.place-details.ts
index de7bbfd..e84524c 100644
--- a/examples/playground/src/code-samples/12b.place-details.ts
+++ b/examples/playground/src/code-samples/12b.place-details.ts
@@ -1,6 +1,7 @@
 // title: PlaceResult using the PlaceMarker class
 
-import {PlaceMarker} from './lib/placemarker';
+import {PlaceMarker} from '@ubilabs/google-maps-marker/placemarker';
+
 export default (map: google.maps.Map) => {
   res.forEach(result => {
     new PlaceMarker({
@@ -13,10 +14,7 @@ export default (map: google.maps.Map) => {
 const res: google.maps.places.PlaceResult[] = [
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.55447,
-        lng: 10.0013
-      })
+      location: new google.maps.LatLng({lat: 53.55447, lng: 10.0013})
     },
     icon_background_color: '#FF9E67',
     icon_mask_base_uri:
@@ -24,10 +22,7 @@ const res: google.maps.places.PlaceResult[] = [
   },
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.558,
-        lng: 10.006
-      })
+      location: new google.maps.LatLng({lat: 53.558, lng: 10.006})
     },
     icon_background_color: '#FF9E67',
     icon_mask_base_uri:
@@ -36,10 +31,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.553,
-        lng: 10.006
-      })
+      location: new google.maps.LatLng({lat: 53.553, lng: 10.006})
     },
     icon_background_color: '#FF9E67',
     icon_mask_base_uri:
@@ -48,10 +40,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.57,
-        lng: 9.99
-      })
+      location: new google.maps.LatLng({lat: 53.57, lng: 9.99})
     },
     icon_background_color: '#4B96F3',
     icon_mask_base_uri:
@@ -60,10 +49,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.5664,
-        lng: 9.99
-      })
+      location: new google.maps.LatLng({lat: 53.5664, lng: 9.99})
     },
     icon_background_color: '#4B96F3',
     icon_mask_base_uri:
@@ -72,10 +58,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.5664,
-        lng: 9.984
-      })
+      location: new google.maps.LatLng({lat: 53.5664, lng: 9.984})
     },
     icon_background_color: '#4B96F3',
     icon_mask_base_uri:
@@ -84,10 +67,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.57,
-        lng: 9.984
-      })
+      location: new google.maps.LatLng({lat: 53.57, lng: 9.984})
     },
     icon_background_color: '#4B96F3',
     icon_mask_base_uri:
@@ -96,10 +76,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.578,
-        lng: 9.99
-      })
+      location: new google.maps.LatLng({lat: 53.578, lng: 9.99})
     },
     icon_background_color: '#909CE1',
     icon_mask_base_uri:
@@ -108,10 +85,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.581,
-        lng: 9.99
-      })
+      location: new google.maps.LatLng({lat: 53.581, lng: 9.99})
     },
     icon_background_color: '#909CE1',
     icon_mask_base_uri:
@@ -120,10 +94,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.579,
-        lng: 9.98832
-      })
+      location: new google.maps.LatLng({lat: 53.579, lng: 9.98832})
     },
     icon_background_color: '#909CE1',
     icon_mask_base_uri:
@@ -132,10 +103,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.58,
-        lng: 9.995
-      })
+      location: new google.maps.LatLng({lat: 53.58, lng: 9.995})
     },
     icon_background_color: '#909CE1',
     icon_mask_base_uri:
@@ -143,10 +111,7 @@ const res: google.maps.places.PlaceResult[] = [
   },
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.58,
-        lng: 9.9999
-      })
+      location: new google.maps.LatLng({lat: 53.58, lng: 9.9999})
     },
     icon_background_color: '#909CE1',
     icon_mask_base_uri:
@@ -157,10 +122,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.56,
-        lng: 9.989
-      })
+      location: new google.maps.LatLng({lat: 53.56, lng: 9.989})
     },
     icon_background_color: '#13B5C7',
     icon_mask_base_uri:
@@ -168,10 +130,7 @@ const res: google.maps.places.PlaceResult[] = [
   },
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.56,
-        lng: 9.995
-      })
+      location: new google.maps.LatLng({lat: 53.56, lng: 9.995})
     },
     icon_background_color: '#13B5C7',
     icon_mask_base_uri:
@@ -180,10 +139,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.565,
-        lng: 9.995
-      })
+      location: new google.maps.LatLng({lat: 53.565, lng: 9.995})
     },
     icon_background_color: '#13B5C7',
     icon_mask_base_uri:
@@ -192,10 +148,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.558,
-        lng: 9.98
-      })
+      location: new google.maps.LatLng({lat: 53.558, lng: 9.98})
     },
     icon_background_color: '#13B5C7',
     icon_mask_base_uri:
@@ -203,10 +156,7 @@ const res: google.maps.places.PlaceResult[] = [
   },
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.5567,
-        lng: 9.992
-      })
+      location: new google.maps.LatLng({lat: 53.5567, lng: 9.992})
     },
     icon_background_color: '#13B5C7',
     icon_mask_base_uri:
@@ -215,10 +165,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.5568,
-        lng: 9.989
-      })
+      location: new google.maps.LatLng({lat: 53.5568, lng: 9.989})
     },
     icon_background_color: '#13B5C7',
     icon_mask_base_uri:
@@ -228,10 +175,7 @@ const res: google.maps.places.PlaceResult[] = [
   // Place category: Transportation
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.55,
-        lng: 9.99
-      })
+      location: new google.maps.LatLng({lat: 53.55, lng: 9.99})
     },
     icon_background_color: '#10BDFF',
     icon_mask_base_uri:
@@ -240,10 +184,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.552,
-        lng: 9.99
-      })
+      location: new google.maps.LatLng({lat: 53.552, lng: 9.99})
     },
     icon_background_color: '#10BDFF',
     icon_mask_base_uri:
@@ -252,10 +193,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.548,
-        lng: 9.997
-      })
+      location: new google.maps.LatLng({lat: 53.548, lng: 9.997})
     },
     icon_background_color: '#10BDFF',
     icon_mask_base_uri:
@@ -266,10 +204,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.588,
-        lng: 10.01
-      })
+      location: new google.maps.LatLng({lat: 53.588, lng: 10.01})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -278,10 +213,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.585,
-        lng: 10.01
-      })
+      location: new google.maps.LatLng({lat: 53.585, lng: 10.01})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -290,10 +222,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.57,
-        lng: 10.01
-      })
+      location: new google.maps.LatLng({lat: 53.57, lng: 10.01})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -302,10 +231,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.57,
-        lng: 10.02
-      })
+      location: new google.maps.LatLng({lat: 53.57, lng: 10.02})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -314,10 +240,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.575,
-        lng: 10.03
-      })
+      location: new google.maps.LatLng({lat: 53.575, lng: 10.03})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -326,10 +249,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.57,
-        lng: 10.03
-      })
+      location: new google.maps.LatLng({lat: 53.57, lng: 10.03})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -338,10 +258,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.58,
-        lng: 10.023
-      })
+      location: new google.maps.LatLng({lat: 53.58, lng: 10.023})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -350,10 +267,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.575,
-        lng: 10.023
-      })
+      location: new google.maps.LatLng({lat: 53.575, lng: 10.023})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -361,10 +275,7 @@ const res: google.maps.places.PlaceResult[] = [
   },
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.575,
-        lng: 10.02
-      })
+      location: new google.maps.LatLng({lat: 53.575, lng: 10.02})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -373,10 +284,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.575,
-        lng: 10.012
-      })
+      location: new google.maps.LatLng({lat: 53.575, lng: 10.012})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -385,10 +293,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.58,
-        lng: 10.012
-      })
+      location: new google.maps.LatLng({lat: 53.58, lng: 10.012})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -397,10 +302,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.578,
-        lng: 10.012
-      })
+      location: new google.maps.LatLng({lat: 53.578, lng: 10.012})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -409,10 +311,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.578,
-        lng: 10.015
-      })
+      location: new google.maps.LatLng({lat: 53.578, lng: 10.015})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -421,10 +320,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.582,
-        lng: 10.015
-      })
+      location: new google.maps.LatLng({lat: 53.582, lng: 10.015})
     },
     icon_background_color: '#7B9EB0',
     icon_mask_base_uri:
@@ -435,10 +331,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.56,
-        lng: 10.015
-      })
+      location: new google.maps.LatLng({lat: 53.56, lng: 10.015})
     },
     icon_background_color: '#4DB546',
     icon_mask_base_uri:
@@ -447,10 +340,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.556,
-        lng: 10.015
-      })
+      location: new google.maps.LatLng({lat: 53.556, lng: 10.015})
     },
     icon_background_color: '#4DB546',
     icon_mask_base_uri:
@@ -459,10 +349,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.55,
-        lng: 10.018
-      })
+      location: new google.maps.LatLng({lat: 53.55, lng: 10.018})
     },
     icon_background_color: '#4DB546',
     icon_mask_base_uri:
@@ -471,10 +358,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.55,
-        lng: 10.013
-      })
+      location: new google.maps.LatLng({lat: 53.55, lng: 10.013})
     },
     icon_background_color: '#4DB546',
     icon_mask_base_uri:
@@ -483,10 +367,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.56,
-        lng: 10.0197
-      })
+      location: new google.maps.LatLng({lat: 53.56, lng: 10.0197})
     },
     icon_background_color: '#4DB546',
     icon_mask_base_uri:
@@ -497,10 +378,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.573,
-        lng: 9.995
-      })
+      location: new google.maps.LatLng({lat: 53.573, lng: 9.995})
     },
     icon_background_color: '#F88181',
     icon_mask_base_uri:
@@ -509,10 +387,7 @@ const res: google.maps.places.PlaceResult[] = [
 
   {
     geometry: {
-      location: new google.maps.LatLng({
-        lat: 53.573,
-        lng: 9.99
-      })
+      location: new google.maps.LatLng({lat: 53.573, lng: 9.99})
     },
     icon_background_color: '#F88181',
     icon_mask_base_uri:
diff --git a/examples/playground/src/code-samples/lib/.gitkeep b/examples/playground/src/code-samples/lib/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/examples/playground/src/configure-monaco-workers.ts b/examples/playground/src/configure-monaco-workers.ts
new file mode 100644
index 0000000..d0e7b0b
--- /dev/null
+++ b/examples/playground/src/configure-monaco-workers.ts
@@ -0,0 +1,25 @@
+import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
+import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
+import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
+import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
+import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
+
+export function configureMonacoWorkers() {
+  self.MonacoEnvironment = {
+    getWorker(_: unknown, label: string) {
+      if (label === 'json') {
+        return new jsonWorker();
+      }
+      if (label === 'css' || label === 'scss' || label === 'less') {
+        return new cssWorker();
+      }
+      if (label === 'html' || label === 'handlebars' || label === 'razor') {
+        return new htmlWorker();
+      }
+      if (label === 'typescript' || label === 'javascript') {
+        return new tsWorker();
+      }
+      return new editorWorker();
+    }
+  };
+}
diff --git a/examples/playground/src/init-editor.ts b/examples/playground/src/init-editor.ts
index f466548..dd652d0 100644
--- a/examples/playground/src/init-editor.ts
+++ b/examples/playground/src/init-editor.ts
@@ -1,82 +1,119 @@
 import {editor, KeyCode, KeyMod, languages, Uri} from 'monaco-editor';
 import {decode, encode} from './snippet-encoder';
-import './worker-config';
 
-import googleMapsDTSSource from '../node_modules/@types/google.maps/index.d.ts?raw';
-import markerExampleSource from './code-samples/00.default.ts?raw';
+import packageJson from '../../../package.json';
 
-const libModules = import.meta.glob('./code-samples/lib/*.d.ts', {as: 'raw'});
-const modules: Record<string, string> = {
-  'node_modules/google.maps/index.d.ts': googleMapsDTSSource
-};
+const {name: packageName}: {name: string} = packageJson as never;
 
-export async function initEditor(
-  runCallback: (jsCode: string) => Promise<void>
-): Promise<editor.IStandaloneCodeEditor> {
-  const {typescript} = languages;
-  const {typescriptDefaults, ScriptTarget, ModuleKind, ModuleResolutionKind} =
-    typescript;
+import './configure-monaco-workers';
 
-  typescriptDefaults.setEagerModelSync(true);
-  typescriptDefaults.setCompilerOptions({
-    target: ScriptTarget.ES2020,
-    allowNonTsExtensions: true,
-    moduleResolution: ModuleResolutionKind.NodeJs,
-    module: ModuleKind.CommonJS,
-    typeRoots: ['node_modules/@types']
-  });
+import {configureMonacoWorkers} from './configure-monaco-workers';
+
+/**
+ * Set up the extraLibs for the typescript-editor to do code-completion for the
+ * dependencies (Google Maps and our marker library).
+ */
+async function initEditorFilesystem() {
+  const markerLibFiles = import.meta.glob(`../../../dist/*.d.ts`, {as: 'raw'});
 
-  // add typings for our marker-library and the Google Maps API
-  await Promise.all(
-    Object.entries(libModules).map(async ([path, module]) => {
-      modules[path.replace('./code-samples', '.')] = await module();
-    })
+  languages.typescript.typescriptDefaults.addExtraLib(
+    (await import('../node_modules/@types/google.maps/index.d.ts?raw')).default,
+    `file:///node_modules/@types/google.maps/index.d.ts`
   );
 
-  console.log('initEditor', libModules, modules);
+  for (const [path, loadFile] of Object.entries(markerLibFiles)) {
+    const editorPath = path.replace(
+      /^.*\/dist\//,
+      `file:///node_modules/${packageName}/`
+    );
+
+    languages.typescript.typescriptDefaults.addExtraLib(
+      await loadFile(),
+      editorPath
+    );
+  }
+}
+
+type CodeSample = {
+  filename: string;
+  title: string;
+  model: editor.IModel;
+};
+
+async function loadCodeSamples(): Promise<Record<string, CodeSample>> {
+  const exampleFiles = import.meta.glob('./code-samples/*.ts', {as: 'raw'});
+  const codeSamples: Record<string, CodeSample> = {};
+
+  for (const [path, loadFile] of Object.entries(exampleFiles)) {
+    const filename = path.replace('./code-samples/', '');
+    const editorPath = `file:///${filename}`;
+    const model = editor.createModel(
+      await loadFile(),
+      'typescript',
+      Uri.parse(editorPath)
+    );
+
+    const firstLine = model.getLineContent(1);
+    let title = filename;
+    if (firstLine.startsWith('// title:')) {
+      title = firstLine.replace(/\/\/ title:\s*/, '');
+    }
 
-  for (const [path, source] of Object.entries(modules)) {
-    typescriptDefaults.addExtraLib(source, `file:///${path}`);
+    codeSamples[filename] = {filename, title, model};
   }
 
-  const container = document.querySelector('#editor') as HTMLElement;
-  const fileUri = Uri.parse('file:///main.ts');
+  return codeSamples;
+}
 
-  let source = markerExampleSource;
-  if (location.hash) {
-    console.log('loading snippet from URL.');
-    const decoded = decode(location.hash.slice(1));
+/**
+ * Load code from url-parameters and validate the version against the current
+ * version.
+ */
+function createModelFromUrl(): editor.IModel | null {
+  if (!location.hash) {
+    return null;
+  }
 
-    const [currentMajorVersion] = API_VERSION.split('.');
-    const [encodedMajorVersion] = decoded.version.split('.');
+  console.log('loading snippet from URL.');
+  const {code, version} = decode(location.hash.slice(1));
 
-    console.info(`loaded version ${decoded.version} (current ${API_VERSION})`);
+  const [currentMajorVersion] = API_VERSION.split('.');
+  const [encodedMajorVersion] = version.split('.');
 
-    if (import.meta.env.PROD && encodedMajorVersion !== currentMajorVersion) {
-      alert(
-        `The code-snippet you are loading was created with a different ` +
-          `API-version (loaded: ${decoded.version} / current: ${API_VERSION}).\n\n` +
-          `There might have been breaking changes.`
-      );
-    }
+  console.info(`loaded version ${version} (current ${API_VERSION})`);
 
-    source = decoded.code;
+  if (import.meta.env.PROD && encodedMajorVersion !== currentMajorVersion) {
+    alert(
+      `The code-snippet you are loading was created with a different ` +
+        `API-version (loaded: ${version} / current: ${API_VERSION}).\n\n` +
+        `There might have been breaking changes.`
+    );
   }
 
-  const model = editor.createModel(source, 'typescript', fileUri);
-  const editorInstance = editor.create(container, {
-    theme: 'vs-dark',
-    minimap: {enabled: false},
-    fontSize: import.meta.env.PROD ? 20 : 12
-  });
-  editorInstance.setModel(model);
+  return editor.createModel(
+    code,
+    'typescript',
+    Uri.parse('file:///example.ts')
+  );
+}
 
+function createEditorActions(
+  editorInstance: editor.IStandaloneCodeEditor,
+  runCallback: (jsCode: string) => Promise<void>
+) {
   editorInstance.addAction({
     id: 'compile-and-run',
     label: 'Compile and run',
     keybindings: [KeyMod.CtrlCmd | KeyCode.Enter],
     async run() {
-      const worker = await typescript.getTypeScriptWorker();
+      const model = editorInstance.getModel();
+
+      if (!model) {
+        console.error('compile-and-run: no editor-model found.');
+        return;
+      }
+
+      const worker = await languages.typescript.getTypeScriptWorker();
       const proxy = await worker(model.uri);
 
       const {outputFiles} = await proxy.getEmitOutput(model.uri.toString());
@@ -86,22 +123,6 @@ export async function initEditor(
     }
   });
 
-  const runButton = document.querySelector(
-    '#btn-compile-and-run'
-  ) as HTMLElement;
-
-  runButton.addEventListener('click', () => {
-    editorInstance
-      .getAction('compile-and-run')
-      .run()
-      .then(() => {
-        console.log('compile-and-run completed.');
-      })
-      .catch(err => {
-        console.error('compile-and-run failed', err);
-      });
-  });
-
   editorInstance.addAction({
     id: 'save-to-url',
     label: 'Save to URL',
@@ -114,6 +135,80 @@ export async function initEditor(
       location.hash = encode({code: tsCode, version: API_VERSION});
     }
   });
+}
+
+function configureTypescriptDefaults() {
+  languages.typescript.typescriptDefaults.setEagerModelSync(true);
+  languages.typescript.typescriptDefaults.setCompilerOptions({
+    target: languages.typescript.ScriptTarget.ES2020,
+    allowNonTsExtensions: true,
+    moduleResolution: languages.typescript.ModuleResolutionKind.NodeJs,
+    module: languages.typescript.ModuleKind.CommonJS,
+    typeRoots: ['node_modules/@types']
+  });
+}
+
+export async function initEditor(
+  runCallback: (jsCode: string) => Promise<void>
+): Promise<editor.IStandaloneCodeEditor> {
+  configureMonacoWorkers();
+  configureTypescriptDefaults();
+
+  await initEditorFilesystem();
+  const userCodeModel = createModelFromUrl();
+  const codeSamples = await loadCodeSamples();
+
+  const editorContainer = document.querySelector('#editor') as HTMLElement;
+  const runButton = document.querySelector(
+    '#btn-compile-and-run'
+  ) as HTMLElement;
+
+  // create editor-instance
+  const editorInstance = editor.create(editorContainer, {
+    minimap: {enabled: false},
+    fontSize: import.meta.env.PROD ? 20 : 12
+  });
+
+  const codeSampleIds = Object.keys(codeSamples);
+
+  if (codeSampleIds.length === 0) {
+    throw new Error('failed to load editor models');
+  }
+
+  const defaultModel = codeSampleIds.at(0) as string;
+  editorInstance.setModel(userCodeModel || codeSamples[defaultModel].model);
+
+  // populate examples dropdown
+  const exampleSelect = document.querySelector(
+    '#example-select'
+  ) as HTMLSelectElement;
+
+  exampleSelect.innerHTML = '';
+  for (const [id, {title}] of Object.entries(codeSamples)) {
+    const el = document.createElement('option');
+    el.textContent = title;
+    el.value = id;
+
+    exampleSelect.appendChild(el);
+  }
+
+  exampleSelect.addEventListener('change', () => {
+    const modelId = exampleSelect.value;
+
+    editorInstance.setModel(codeSamples[modelId].model);
+    editorInstance.focus();
+  });
+
+  createEditorActions(editorInstance, runCallback);
+
+  runButton.addEventListener('click', () => {
+    editorInstance
+      .getAction('compile-and-run')
+      .run()
+      .catch(err => {
+        console.error('compile-and-run failed', err);
+      });
+  });
 
   editorInstance.focus();
 
diff --git a/examples/playground/src/run-playground-js.ts b/examples/playground/src/run-playground-js.ts
index 370b0e7..a9a6e2e 100644
--- a/examples/playground/src/run-playground-js.ts
+++ b/examples/playground/src/run-playground-js.ts
@@ -1,17 +1,42 @@
-import {Marker} from '../../../src/marker';
-import * as marker from '../../../src/marker';
-import * as markerCollection from '../../../src/marker-collection';
-import * as icons from '../../../src/icons';
-import * as color from '../../../src/color';
-import * as placeMarker from '../../../src/placemarker'
+import {Marker, MarkerOptions, MarkerCollection} from '../../../src';
+
+import packageJson from '../../../package.json';
+
+const {
+  name: packageName,
+  exports: packageExports
+}: {name: string; exports: {[src: string]: never}} = packageJson as never;
 
 const markers: Set<Marker> = new Set();
-let cleanupFn: (() => void) | void = void 0;
+let cleanupFn: (() => void) | void = undefined;
+
+let modulesLoaded = false;
+const modules: Record<string, object> = {};
+
+async function loadModules() {
+  modules[packageName] = await import('../../../src');
+
+  const moduleCallbacks = import.meta.glob('../../../src/*');
+  for (const src of Object.keys(packageExports)) {
+    if (src === '.') continue;
+
+    const moduleCallback = moduleCallbacks[
+      src.replace('./', '../../../src/') + '.ts'
+    ] as () => Promise<object>;
+    modules[src.replace('.', packageName)] = await moduleCallback();
+  }
+
+  modulesLoaded = true;
+}
 
 export async function runPlaygroundJs(
   js: string,
   map: google.maps.Map
 ): Promise<void> {
+  if (!modulesLoaded) {
+    await loadModules();
+  }
+
   // remove all markers
   for (const m of markers) m.map = null;
   markers.clear();
@@ -38,22 +63,24 @@ export async function runPlaygroundJs(
     }
   }
 
-  const modules: Record<string, unknown> = {
-    './lib/marker': marker,
-    './lib/marker-collection': markerCollection,
-    './lib/color': color,
-    './lib/icons': icons,
-    './lib/placemarker' : placeMarker
-  };
+  class MarkerCollectionProxy<T extends object> extends MarkerCollection<T> {
+    protected createMarker(options: MarkerOptions<T>, data: T): Marker<T> {
+      const m = super.createMarker(options, data);
+      markers.add(m as Marker);
+      return m;
+    }
+  }
+
   const require = (moduleString: string) => {
-    // fixme: can we somehow hack the markerCollection to also use the
-    //  patched marker-class?
-    if (moduleString === './lib/marker')
+    if (moduleString === packageName) {
       return {
-        ...marker,
-        Marker: MarkerProxy
+        ...modules[moduleString],
+        Marker: MarkerProxy,
+        MarkerCollection: MarkerCollectionProxy
       };
-    else if (modules[moduleString]) {
+    }
+
+    if (moduleString in modules) {
       return modules[moduleString];
     }
 
diff --git a/examples/playground/src/worker-config.ts b/examples/playground/src/worker-config.ts
deleted file mode 100644
index 94e1957..0000000
--- a/examples/playground/src/worker-config.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
-import jsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
-import cssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
-import htmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
-import tsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';
-
-self.MonacoEnvironment = {
-  getWorker(_: unknown, label: string) {
-    if (label === 'json') {
-      return new jsonWorker();
-    }
-    if (label === 'css' || label === 'scss' || label === 'less') {
-      return new cssWorker();
-    }
-    if (label === 'html' || label === 'handlebars' || label === 'razor') {
-      return new htmlWorker();
-    }
-    if (label === 'typescript' || label === 'javascript') {
-      return new tsWorker();
-    }
-    return new editorWorker();
-  }
-};
diff --git a/examples/playground/tsconfig.json b/examples/playground/tsconfig.json
index e56bb8e..14b4e6d 100644
--- a/examples/playground/tsconfig.json
+++ b/examples/playground/tsconfig.json
@@ -5,6 +5,10 @@
     "target": "ES2020",
     "moduleResolution": "node",
     "baseUrl": "./",
+    "paths": {
+      "@ubilabs/google-maps-marker": ["../../src/index.ts"],
+      "@ubilabs/google-maps-marker/*": ["../../src/*"]
+    },
     "typeRoots": ["./types", "./node_modules/@types"],
     "importsNotUsedAsValues": "error",
     "isolatedModules": true,
@@ -13,8 +17,10 @@
     "strict": true,
     "skipLibCheck": true,
     "forceConsistentCasingInFileNames": true,
-    "stripInternal": true
+    "stripInternal": true,
+    "resolveJsonModule": true
   },
+
   "ts-node": {
     "experimentalResolverFeatures": true
   }
diff --git a/package.json b/package.json
index 499e5a1..f61cb3c 100644
--- a/package.json
+++ b/package.json
@@ -31,6 +31,7 @@
   },
   "scripts": {
     "build": "microbundle src/index.ts src/icons.ts",
+    "watch": "microbundle watch src/index.ts src/icons.ts",
     "test": "TS_NODE_COMPILER_OPTIONS='{\"module\":\"commonjs\"}' mocha"
   },
   "devDependencies": {
diff --git a/src/marker.ts b/src/marker.ts
index ffcf306..8ca09d1 100644
--- a/src/marker.ts
+++ b/src/marker.ts
@@ -67,7 +67,7 @@ export class Marker<TUserData = unknown> {
 
   // since updates can be triggered in multiple ways, we store the last
   // known state of the three contributing sources
-  private data_?: TUserData;
+  private data_: TUserData | null = null;
   private markerState_: MarkerState = {visible: false, hovered: false};
 
   // attributes set by the user are stored in attributes_ and
@@ -301,9 +301,6 @@ export class Marker<TUserData = unknown> {
     //   state updates might require us to reset the state (i.e. icon changes
     //   from 'some-icon' to undefined).
 
-    // FIXME: how to handle undefined values? Should we skip those?
-    //  Or have fixed defaults for everything?
-
     this.markerView_.position = position;
     this.markerView_.draggable = attrs.draggable;
     this.markerView_.title = attrs.title;
@@ -389,7 +386,7 @@ export class Marker<TUserData = unknown> {
    * @internal
    */
   getDynamicAttributeState(): {
-    data?: TUserData;
+    data: TUserData | null;
     map: MapState;
     marker: MarkerState;
   } {
@@ -409,7 +406,7 @@ export class Marker<TUserData = unknown> {
     // ComputedMarkerAttributes. For performance reasons, these are defined on
     // the prototype instead of the object itself.
     for (const key of attributeKeys) {
-      // Note: In a static initializer, `this` points to the class constructor,
+      // Note: In the static initializer, `this` points to the class constructor,
       // so `this.prototype` is the same as `Marker.prototype` (which isn't
       // allowed). Within the get/set functions, this is bound to the actual
       // marker instance.
@@ -425,7 +422,12 @@ export class Marker<TUserData = unknown> {
   }
 }
 
-/** @internal */
+/**
+ * ComputedMarkerAttributes resolves all attributes based on dynamic and static
+ * values and makes them behave as if there were only static attributes.
+ *
+ * @internal
+ */
 class ComputedMarkerAttributes<TUserData = unknown>
   implements Partial<StaticAttributes>
 {
@@ -468,7 +470,7 @@ class ComputedMarkerAttributes<TUserData = unknown>
 
             if (this.callbackDepth_ > 10) {
               throw new Error(
-                'maximum recurcion depth reached. ' +
+                'maximum recursion depth reached. ' +
                   'This is probably caused by a cyclic dependency in dynamic attributes.'
               );
             }
@@ -544,7 +546,7 @@ export type AttributeKey = keyof StaticAttributes;
  * evaluated whenever a state-change happens or user-data is updated.
  */
 export type DynamicAttributeValue<TUserData, TAttr> = (
-  state: {data: TUserData} & {
+  state: {data?: TUserData} & {
     map: MapState;
     marker: MarkerState;
     attr: Partial<StaticAttributes>;
diff --git a/tsconfig.json b/tsconfig.json
index 43a7596..7c54a76 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "include": ["./src/**/*"],
+  "include": ["./src/*","./src/**/*"],
   "compilerOptions": {
     "module": "ES2020",
     "target": "ES2020",