db.diff

diff --git a/packages/build-env/graph.dot b/packages/build-env/graph.dot
index 6931f56f58..238d0554f5 100644
--- a/packages/build-env/graph.dot
+++ b/packages/build-env/graph.dot
@@ -180,6 +180,7 @@ digraph G {
   "@kie-tools/swf-sandbox" -> "@kie-tools/i18n-common-dictionary" [ style = "solid", color = "black" ];
   "@kie-tools/swf-sandbox" -> "@kie-tools/kie-sandbox-fs" [ style = "solid", color = "black" ];
   "@kie-tools/swf-sandbox" -> "@kie-tools/serverless-workflow-editor" [ style = "solid", color = "black" ];
+  "@kie-tools/swf-sandbox" -> "@kie-tools/dashbuilder-editor" [ style = "solid", color = "black" ];
   "@kie-tools/swf-sandbox" -> "@kie-tools/text-editor" [ style = "solid", color = "black" ];
   "@kie-tools/swf-sandbox" -> "@kie-tools-core/webpack-base" [ style = "dashed", color = "black" ];
   "@kie-tools/text-editor" -> "@kie-tools-core/editor" [ style = "solid", color = "blue" ];
diff --git a/packages/swf-sandbox/package.json b/packages/swf-sandbox/package.json
index 4c068dc867..87091878d4 100644
--- a/packages/swf-sandbox/package.json
+++ b/packages/swf-sandbox/package.json
@@ -18,6 +18,7 @@
     "@kie-tools/kie-sandbox-fs": "0.0.0",
     "@kie-tools/serverless-workflow-editor": "0.0.0",
     "@kie-tools/serverless-workflow-service-catalog": "0.0.0",
+    "@kie-tools/dashbuilder-editor": "0.0.0",
     "@kie-tools/text-editor": "0.0.0",
     "@octokit/rest": "^18.5.3",
     "buffer": "^6.0.3",
diff --git a/packages/swf-sandbox/src/envelope/DashbuilderEditorEnvelopeApp.ts b/packages/swf-sandbox/src/envelope/DashbuilderEditorEnvelopeApp.ts
new file mode 100644
index 0000000000..c424bccf2f
--- /dev/null
+++ b/packages/swf-sandbox/src/envelope/DashbuilderEditorEnvelopeApp.ts
@@ -0,0 +1,24 @@
+/*
+ * Copyright 2022 Red Hat, Inc. and/or its affiliates.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *        http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { init } from "@kie-tools-core/editor/dist/envelope";
+import { DashbuilderEditorFactory } from "@kie-tools/dashbuilder-editor";
+
+init({
+  container: document.getElementById("dashbuilder-editor-envelope-app")!,
+  bus: { postMessage: (message, targetOrigin, _) => window.parent.postMessage(message, targetOrigin!, _) },
+  editorFactory: new DashbuilderEditorFactory(),
+});
diff --git a/packages/swf-sandbox/src/envelopeLocator/EditorEnvelopeLocatorContext.tsx b/packages/swf-sandbox/src/envelopeLocator/EditorEnvelopeLocatorContext.tsx
index 164cdbc8f2..fb4309157c 100644
--- a/packages/swf-sandbox/src/envelopeLocator/EditorEnvelopeLocatorContext.tsx
+++ b/packages/swf-sandbox/src/envelopeLocator/EditorEnvelopeLocatorContext.tsx
@@ -27,6 +27,7 @@ export function EditorEnvelopeLocatorContextProvider(props: { children: React.Re
     () =>
       new EditorEnvelopeLocator(window.location.origin, [
         new EnvelopeMapping("sw", "**/*.sw.+(json|yml|yaml)", "", "swf-editor-envelope.html"),
+        new EnvelopeMapping("yml", "**/*.dash.+(yml|yaml)", "", "dashbuilder-editor-envelope.html"),
         new EnvelopeMapping("text", "**/*", "", "text-editor-envelope.html"),
       ]),
     []
diff --git a/packages/swf-sandbox/static/envelope/dashbuilder-editor-envelope.html b/packages/swf-sandbox/static/envelope/dashbuilder-editor-envelope.html
new file mode 100644
index 0000000000..14e49b37f6
--- /dev/null
+++ b/packages/swf-sandbox/static/envelope/dashbuilder-editor-envelope.html
@@ -0,0 +1,42 @@
+<!--
+  ~ Copyright 2022 Red Hat, Inc. and/or its affiliates.
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~        http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <style>
+      html,
+      body,
+      div#envelope-app {
+        margin: 0;
+        border: 0;
+        padding: 0;
+        overflow: hidden;
+        height: 100%;
+        width: 100%;
+      }
+    </style>
+
+    <title></title>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  </head>
+  <body>
+    <div id="dashbuilder-editor-envelope-app"></div>
+    <script src="dashbuilder-editor-envelope.js"></script>
+  </body>
+</html>
diff --git a/packages/swf-sandbox/webpack.config.js b/packages/swf-sandbox/webpack.config.js
index a4c5125a18..538bbcba42 100644
--- a/packages/swf-sandbox/webpack.config.js
+++ b/packages/swf-sandbox/webpack.config.js
@@ -49,6 +49,7 @@ module.exports = async (env, argv) => {
     entry: {
       index: "./src/index.tsx",
       "swf-editor-envelope": "./src/envelope/SwfEditorEnvelopeApp.ts",
+      "dashbuilder-editor-envelope": "./src/envelope/DashbuilderEditorEnvelopeApp.ts",
       "text-editor-envelope": "./src/envelope/TextEditorEnvelopeApp.ts",
       "broadcast-channel-single-tab-polyfill": "./src/polyfill/BroadcastChannelSingleTab.ts",
     },