diff --git a/packages/docs/scripts/buildTemplates.mjs b/packages/docs/scripts/buildTemplates.mjs
index 555d4fd2d..bdd2b1171 100644
--- a/packages/docs/scripts/buildTemplates.mjs
+++ b/packages/docs/scripts/buildTemplates.mjs
@@ -87,6 +87,7 @@ function createIndexHTML(options) {
         )
         .replace('{{app}}', options.app)
         .replace('{{githubLink}}', options.githubUrl)
+        .replace('{{codeSandboxLink}}', options.codeSandboxUrl)
 }
 
 const input_dir = path.join(__dirname, '../templates');
@@ -98,6 +99,7 @@ const FRAMEWORKS = ['react', 'vue', 'typescript'];
 const list = [];
 
 const githubUrl = "https://github.com/mathuo/dockview/tree/master/packages/docs/templates"
+const codeSandboxUrl = "https://codesandbox.io/p/sandbox/github/mathuo/dockview/tree/gh-pages/templates"
 
 for (const component of COMPONENTS) {
     const componentDir = path.join(input_dir, component);
@@ -119,6 +121,7 @@ for (const component of COMPONENTS) {
             );
 
             const templateGithubUrl = `${githubUrl}/${component}/${folder}/${framework}/src`
+            const templateCodeSandboxUrl = `${codeSandboxUrl}/${component}/${folder}/${framework}`
 
             const template = createIndexHTML({
                 title: `Dockview | ${folder} ${framework}`,
@@ -132,7 +135,8 @@ for (const component of COMPONENTS) {
                         USE_LOCAL_CDN ? 'local' : 'remote'
                     ],
                 },
-                githubUrl: templateGithubUrl
+                githubUrl: templateGithubUrl,
+                codeSandboxUrl: templateCodeSandboxUrl
             });
             fs.writeFileSync(
                 path.join(output, component, folder, framework, 'index.html'),
diff --git a/packages/docs/scripts/template.html b/packages/docs/scripts/template.html
index 7dda559be..bc60244bf 100644
--- a/packages/docs/scripts/template.html
+++ b/packages/docs/scripts/template.html
@@ -90,6 +90,11 @@
               </button>
             </a>
             <img id="gh-logo" src="https://github.githubassets.com/assets/GitHub-Mark-ea2971cee799.png"/>
+            <a target="_blank" rel="noopener noreferrer" href="{{codeSandboxLink}}">
+              <button id="header-btn">
+                Edit in Sandbox
+              </button>
+            </a>
           </div>
           <div id="app"></div>
         </div>
diff --git a/packages/docs/templates/dockview/basic/typescript/src/index.ts b/packages/docs/templates/dockview/basic/typescript/src/index.ts
index d3009b950..4745a4739 100644
--- a/packages/docs/templates/dockview/basic/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/basic/typescript/src/index.ts
@@ -3,6 +3,7 @@ import {
     createDockview,
     GroupPanelPartInitParameters,
     IContentRenderer,
+    themeAbyss,
 } from 'dockview-core';
 
 class Panel implements IContentRenderer {
@@ -23,7 +24,7 @@ class Panel implements IContentRenderer {
 }
 
 const api = createDockview(document.getElementById('app'), {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options) => {
         switch (options.name) {
             case 'default':
diff --git a/packages/docs/templates/dockview/custom-header/typescript/src/index.ts b/packages/docs/templates/dockview/custom-header/typescript/src/index.ts
index 7eecc568c..ef3a5b232 100644
--- a/packages/docs/templates/dockview/custom-header/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/custom-header/typescript/src/index.ts
@@ -6,6 +6,7 @@ import {
     ITabRenderer,
     PanelUpdateEvent,
     Parameters,
+    themeAbyss,
 } from 'dockview-core';
 
 class Panel implements IContentRenderer {
@@ -97,7 +98,7 @@ class CustomTab implements ITabRenderer {
 }
 
 const api = createDockview(document.getElementById('app'), {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options) => {
         switch (options.name) {
             case 'default':
diff --git a/packages/docs/templates/dockview/group-actions/typescript/src/index.ts b/packages/docs/templates/dockview/group-actions/typescript/src/index.ts
index 65fd84833..84f43ea4d 100644
--- a/packages/docs/templates/dockview/group-actions/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/group-actions/typescript/src/index.ts
@@ -6,6 +6,7 @@ import {
     IContentRenderer,
     IGroupHeaderProps,
     IHeaderActionsRenderer,
+    themeAbyss,
 } from 'dockview-core';
 import './index.css';
 
@@ -133,7 +134,7 @@ class LeftHeaderActions implements IHeaderActionsRenderer {
 }
 
 const api = createDockview(document.getElementById('app'), {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options): IContentRenderer => {
         switch (options.name) {
             case 'default':
diff --git a/packages/docs/templates/dockview/locked/typescript/src/index.ts b/packages/docs/templates/dockview/locked/typescript/src/index.ts
index 7050b6b89..3a7a69a7c 100644
--- a/packages/docs/templates/dockview/locked/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/locked/typescript/src/index.ts
@@ -6,6 +6,7 @@ import {
     ITabRenderer,
     PanelUpdateEvent,
     Parameters,
+    themeAbyss,
 } from 'dockview-core';
 
 class Panel implements IContentRenderer {
@@ -36,7 +37,7 @@ class Panel implements IContentRenderer {
 }
 
 const api = createDockview(document.getElementById('app'), {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options) => {
         switch (options.name) {
             case 'default':
diff --git a/packages/docs/templates/dockview/scrollbars/typescript/src/index.ts b/packages/docs/templates/dockview/scrollbars/typescript/src/index.ts
index b0b34cb38..c498f97e5 100644
--- a/packages/docs/templates/dockview/scrollbars/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/scrollbars/typescript/src/index.ts
@@ -3,6 +3,7 @@ import {
     createDockview,
     GroupPanelPartInitParameters,
     IContentRenderer,
+    themeAbyss,
 } from 'dockview-core';
 
 const TEXT =
@@ -74,7 +75,7 @@ class UserDefinedOverflowContainer implements IContentRenderer {
 }
 
 const api = createDockview(document.getElementById('app'), {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options) => {
         switch (options.name) {
             case 'fixedHeightContainer':
diff --git a/packages/docs/templates/dockview/tabview/typescript/src/index.ts b/packages/docs/templates/dockview/tabview/typescript/src/index.ts
index 53be1f98a..381347dbe 100644
--- a/packages/docs/templates/dockview/tabview/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/tabview/typescript/src/index.ts
@@ -3,6 +3,7 @@ import {
     createDockview,
     GroupPanelPartInitParameters,
     IContentRenderer,
+    themeAbyss,
 } from 'dockview-core';
 
 class Panel implements IContentRenderer {
@@ -23,7 +24,7 @@ class Panel implements IContentRenderer {
 }
 
 const api = createDockview(document.getElementById('app'), {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options) => {
         switch (options.name) {
             case 'default':
diff --git a/packages/docs/templates/dockview/update-parameters/typescript/src/index.ts b/packages/docs/templates/dockview/update-parameters/typescript/src/index.ts
index 7eecc568c..ef3a5b232 100644
--- a/packages/docs/templates/dockview/update-parameters/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/update-parameters/typescript/src/index.ts
@@ -6,6 +6,7 @@ import {
     ITabRenderer,
     PanelUpdateEvent,
     Parameters,
+    themeAbyss,
 } from 'dockview-core';
 
 class Panel implements IContentRenderer {
@@ -97,7 +98,7 @@ class CustomTab implements ITabRenderer {
 }
 
 const api = createDockview(document.getElementById('app'), {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options) => {
         switch (options.name) {
             case 'default':
diff --git a/packages/docs/templates/dockview/update-title/typescript/src/index.ts b/packages/docs/templates/dockview/update-title/typescript/src/index.ts
index 8925fd53d..59e66df3c 100644
--- a/packages/docs/templates/dockview/update-title/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/update-title/typescript/src/index.ts
@@ -6,6 +6,7 @@ import {
     ITabRenderer,
     PanelUpdateEvent,
     Parameters,
+    themeAbyss,
 } from 'dockview-core';
 
 class Panel implements IContentRenderer {
@@ -50,7 +51,7 @@ class Panel implements IContentRenderer {
 }
 
 const api = createDockview(document.getElementById('app'), {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options) => {
         switch (options.name) {
             case 'default':
diff --git a/packages/docs/templates/dockview/watermark/typescript/src/index.ts b/packages/docs/templates/dockview/watermark/typescript/src/index.ts
index 2a167fcc5..f7262656e 100644
--- a/packages/docs/templates/dockview/watermark/typescript/src/index.ts
+++ b/packages/docs/templates/dockview/watermark/typescript/src/index.ts
@@ -6,6 +6,7 @@ import {
     IContentRenderer,
     IDockviewGroupPanel,
     IWatermarkRenderer,
+    themeAbyss,
     WatermarkRendererInitParameters,
 } from 'dockview-core';
 
@@ -105,7 +106,7 @@ const app = document.getElementById('app');
 app.append(root);
 
 const api = createDockview(container, {
-    className: 'dockview-theme-abyss',
+    theme: themeAbyss,
     createComponent: (options) => {
         switch (options.name) {
             case 'default':