diff --git a/light9/web/TiledHome.ts b/light9/web/TiledHome.ts
new file mode 100644
--- /dev/null
+++ b/light9/web/TiledHome.ts
@@ -0,0 +1,49 @@
+import * as React from "react";
+import { createRoot } from "react-dom/client";
+import * as FlexLayout from "flexlayout-react";
+export { Light9DeviceSettings } from "./live/Light9DeviceSettings";
+export { Light9CollectorUi } from "./collector/Light9CollectorUi";
+
+const config:FlexLayout.IJsonModel = {
+ global: {},
+ borders: [],
+ layout: {
+ type: "row",
+ weight: 100,
+ children: [
+ {
+ type: "tabset",
+ weight: 50,
+ children: [{ type: "tab", name: "devsettings", component: "light9-device-settings" }],
+ },
+ {
+ type: "tabset",
+ weight: 50,
+ children: [{ type: "tab", name: "collector", component: "light9-collector-ui" }],
+ },
+ ],
+ },
+};
+
+const e = React.createElement;
+
+// see https://github.com/lit/lit/tree/main/packages/labs/react
+
+class Main extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = { model: FlexLayout.Model.fromJson(config) };
+ }
+
+ factory = (node) => {
+ var component = node.getComponent();
+ return e(component, null, "");
+ };
+
+ render() {
+ return e(FlexLayout.Layout, { model: this.state.model, factory: this.factory });
+ }
+}
+
+const root = createRoot(document.getElementById("container")!);
+root.render(React.createElement(Main));
diff --git a/light9/web/index.html b/light9/web/index.html
--- a/light9/web/index.html
+++ b/light9/web/index.html
@@ -4,7 +4,10 @@
light9 home
+
+
+