diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml
index a7f20afa..23f43b45 100644
--- a/common/config/rush/pnpm-lock.yaml
+++ b/common/config/rush/pnpm-lock.yaml
@@ -21,6 +21,7 @@ specifiers:
   '@rush-temp/openrazer': file:./projects/openrazer.tgz
   '@rush-temp/openrazer-examples': file:./projects/openrazer-examples.tgz
   '@rush-temp/precise-audio': file:./projects/precise-audio.tgz
+  '@rush-temp/react-light-desk': file:./projects/react-light-desk.tgz
   '@rush-temp/server': file:./projects/server.tgz
   '@rush-temp/synesthesia-razer': file:./projects/synesthesia-razer.tgz
   '@types/chai': ^4.1.7
@@ -33,6 +34,7 @@ specifiers:
   '@types/node': ~18.11.18
   '@types/react': ^17.0.0
   '@types/react-dom': ^17.0.0
+  '@types/react-reconciler': ~0.26.0
   '@types/spotify-web-playback-sdk': ^0.1.1
   '@types/styled-components': ~5.1.26
   '@types/uuid': ~9.0.0
@@ -68,6 +70,7 @@ specifiers:
   react-dom: ^17.0.2
   react-icons: ^3.3.0
   react-is: ~18.2.0
+  react-reconciler: 0.26.0
   run-sequence: ^1.2.2
   soundbank-pitch-shift: ~1.0.3
   source-map-loader: ~0.2.4
@@ -101,6 +104,7 @@ dependencies:
   '@rush-temp/openrazer': file:projects/openrazer.tgz
   '@rush-temp/openrazer-examples': file:projects/openrazer-examples.tgz_eslint@8.31.0
   '@rush-temp/precise-audio': file:projects/precise-audio.tgz_typescript@4.9.4
+  '@rush-temp/react-light-desk': file:projects/react-light-desk.tgz
   '@rush-temp/server': file:projects/server.tgz
   '@rush-temp/synesthesia-razer': file:projects/synesthesia-razer.tgz
   '@types/chai': 4.2.5
@@ -113,6 +117,7 @@ dependencies:
   '@types/node': 18.11.18
   '@types/react': 17.0.58
   '@types/react-dom': 17.0.19
+  '@types/react-reconciler': 0.26.7
   '@types/spotify-web-playback-sdk': 0.1.7
   '@types/styled-components': 5.1.26
   '@types/uuid': 9.0.0
@@ -148,6 +153,7 @@ dependencies:
   react-dom: 17.0.2_react@17.0.2
   react-icons: 3.8.0_react@17.0.2
   react-is: 18.2.0
+  react-reconciler: 0.26.0_react@17.0.2
   run-sequence: 1.2.2
   soundbank-pitch-shift: 1.0.3
   source-map-loader: 0.2.4
@@ -548,6 +554,12 @@ packages:
       '@types/react': 17.0.58
     dev: false
 
+  /@types/react-reconciler/0.26.7:
+    resolution: {integrity: sha512-mBDYl8x+oyPX/VBb3E638N0B7xG+SPk/EAMcVPeexqus/5aTpTphQi0curhhshOqRrc9t6OPoJfEUkbymse/lQ==}
+    dependencies:
+      '@types/react': 17.0.58
+    dev: false
+
   /@types/react/17.0.58:
     resolution: {integrity: sha512-c1GzVY97P0fGxwGxhYq989j4XwlcHQoto6wQISOC2v6wm3h0PORRWJFHlkRjfGsiG3y1609WdQ+J+tKxvrEd6A==}
     dependencies:
@@ -5629,6 +5641,18 @@ packages:
     resolution: {integrity: sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==}
     dev: false
 
+  /react-reconciler/0.26.0_react@17.0.2:
+    resolution: {integrity: sha512-n2FJE9vPSiZ0Dn/jaV/iOAO6rXepnk74QGRcgwPSgmN/2syUJnbfEz7Bw5yodBfJhjA3L7cu1YdImYISTj4KZQ==}
+    engines: {node: '>=0.10.0'}
+    peerDependencies:
+      react: ^17.0.0
+    dependencies:
+      loose-envify: 1.4.0
+      object-assign: 4.1.1
+      react: 17.0.2
+      scheduler: 0.20.2
+    dev: false
+
   /react/17.0.2:
     resolution: {integrity: sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==}
     engines: {node: '>=0.10.0'}
@@ -7775,6 +7799,18 @@ packages:
       - typescript
     dev: false
 
+  file:projects/react-light-desk.tgz:
+    resolution: {integrity: sha512-HfAvriemu8wOaN8umAnEGiloxs1ubOdbCJ9XaMato3uAdqHMUNCY0gVtShzpxrvX7irLbxI8YMkEuPjnIvlrBw==, tarball: file:projects/react-light-desk.tgz}
+    name: '@rush-temp/react-light-desk'
+    version: 0.0.0
+    dependencies:
+      '@types/react': 17.0.58
+      '@types/react-reconciler': 0.26.7
+      gulp: 4.0.2
+      react: 17.0.2
+      react-reconciler: 0.26.0_react@17.0.2
+    dev: false
+
   file:projects/server.tgz:
     resolution: {integrity: sha512-1AaUpi/ZmfT6LQufRxBkBZRvOpazhB1Ovjs/mYMCguAYno/Klt6yO9ZwwBqIK3EJKUt3k54X6Stqk213bWHTAw==, tarball: file:projects/server.tgz}
     name: '@rush-temp/server'
diff --git a/light-desk/CHANGELOG.md b/light-desk/CHANGELOG.md
index 50f01830..d58c89c8 100644
--- a/light-desk/CHANGELOG.md
+++ b/light-desk/CHANGELOG.md
@@ -28,6 +28,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - [breaking]: rework backend interfaces to unify defining and mutating props,
   adding / removing listeners, and child-parent relationships.
 
+Deprecations, to remove before releases:
+- `.addChild()` and `addChildren()` functions
+
 ## [2.1.1] - 2022-01-11
 
 - Update ws and @types/ws
diff --git a/light-desk/src/backend/components/base.ts b/light-desk/src/backend/components/base.ts
index 057dc908..eaff6900 100644
--- a/light-desk/src/backend/components/base.ts
+++ b/light-desk/src/backend/components/base.ts
@@ -94,24 +94,32 @@ export abstract class BaseParent<T> extends Base<T> implements Parent {
 
   public abstract validateChildren(children: Component[]): void;
 
-  public addChildren = <CS extends Component[]>(...children: CS): CS => {
+  public appendChildren = <CS extends Component[]>(...children: CS): CS => {
     for (const c of children) {
-      if (!this.children.includes(c)) {
-        const newChildren = [...this.children, c];
-        this.validateChildren(newChildren);
-        this.children = Object.freeze(newChildren);
-        c.setParent(this);
-      }
+      const newChildren = [...this.children.filter((ch) => ch !== c), c];
+      this.validateChildren(newChildren);
+      this.children = Object.freeze(newChildren);
+      c.setParent(this);
     }
     this.updateTree();
     return children;
   };
 
-  public addChild = <C extends Component>(child: C): C => {
-    this.addChildren(child);
+  /**
+   * @deprecated use appendChildren instead
+   */
+  public addChildren = this.appendChildren;
+
+  public appendChild = <C extends Component>(child: C): C => {
+    this.appendChildren(child);
     return child;
   };
 
+  /**
+   * @deprecated use appendChild instead
+   */
+  public addChild = this.appendChild;
+
   public removeChild = (component: Component) => {
     const match = this.children.findIndex((c) => c === component);
     if (match >= 0) {
@@ -158,8 +166,25 @@ export abstract class BaseParent<T> extends Base<T> implements Parent {
     }
   }
 
-  public insertBefore(_child: Component, _beforeChild: Component) {
-    throw new Error('TODO');
+  public insertBefore(child: Component, beforeChild: Component) {
+    // Remove child from current parent (if it exists)
+    const filteredChildren = this.children.filter((c) => c !== child);
+    // Find position of beforeChild
+    let match = filteredChildren.findIndex((c) => c === beforeChild);
+    console.log('match', match);
+    if (match === -1) {
+      // If beforeChild is not found, insert at the end
+      match = filteredChildren.length;
+    }
+    const newChildren = [
+      ...filteredChildren.slice(0, match),
+      child,
+      ...filteredChildren.slice(match),
+    ];
+    this.validateChildren(newChildren);
+    this.children = Object.freeze(newChildren);
+    child.setParent(this);
+    this.updateTree();
   }
 }
 
diff --git a/light-desk/src/backend/components/tabs.ts b/light-desk/src/backend/components/tabs.ts
index 1651ad10..cebfedee 100644
--- a/light-desk/src/backend/components/tabs.ts
+++ b/light-desk/src/backend/components/tabs.ts
@@ -12,7 +12,7 @@ type InternalTabProps = {
   name: string;
 };
 
-export type TabProps = InternalTabsProps;
+export type TabProps = InternalTabProps;
 
 export class Tab extends BaseParent<InternalTabProps> {
   public validateChildren = (children: Component[]) => {
diff --git a/react-light-desk/.gitignore b/react-light-desk/.gitignore
new file mode 100644
index 00000000..2d1d8f95
--- /dev/null
+++ b/react-light-desk/.gitignore
@@ -0,0 +1,5 @@
+/node_modules/
+/lib/
+/index.js
+/index.d.ts
+*.log
\ No newline at end of file
diff --git a/react-light-desk/gulpfile.js b/react-light-desk/gulpfile.js
new file mode 100644
index 00000000..a1127d5f
--- /dev/null
+++ b/react-light-desk/gulpfile.js
@@ -0,0 +1,9 @@
+var util = require('@synesthesia-project/gulp-util');
+var gulp = require('gulp');
+
+util.setupBasicTypescriptProject({
+  clean: ['lib'],
+  outputDir: './lib'
+});
+
+gulp.task('default', gulp.series('clean', 'ts'));
diff --git a/react-light-desk/package.json b/react-light-desk/package.json
new file mode 100644
index 00000000..c61c665a
--- /dev/null
+++ b/react-light-desk/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@synesthesia-project/react-light-desk",
+  "version": "0.0.1",
+  "description": "Core synesthesia libraries, type definitions & protocols",
+  "license": "MIT",
+  "main": "index.js",
+  "types": "index.d.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/synesthesia-project/synesthesia"
+  },
+  "scripts": {
+    "clean": "gulp clean",
+    "build": "gulp",
+    "lint": "gulp lint",
+    "lint:fix": "gulp lint:fix"
+  },
+  "files": [
+    "lib/**/*",
+    "index.d.ts",
+    "index.js",
+    "README.md"
+  ],
+  "dependencies": {
+    "@synesthesia-project/compositor": "^0.0.1",
+    "@synesthesia-project/light-desk": "^2.1.1",
+    "react-reconciler": "0.26.0"
+  },
+  "devDependencies": {
+    "@synesthesia-project/gulp-util": "~0.0.1",
+    "@types/react": "^17.0.0",
+    "@types/react-reconciler": "~0.26.0",
+    "react": "^17.0.2",
+    "gulp": "~4.0.2"
+  }
+}
diff --git a/react-light-desk/src/components.ts b/react-light-desk/src/components.ts
new file mode 100644
index 00000000..6331c89b
--- /dev/null
+++ b/react-light-desk/src/components.ts
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { LightDeskIntrinsicElements } from './types';
+
+export const Button: React.FunctionComponent<
+  LightDeskIntrinsicElements['button']
+> = (props) => React.createElement('button', props, props.children);
+
+export const Group: React.FunctionComponent<
+  LightDeskIntrinsicElements['group']
+> = (props) => React.createElement('group', props, props.children);
+
+export const GroupHeader: React.FunctionComponent<
+  LightDeskIntrinsicElements['group-header']
+> = (props) => React.createElement('group-header', props, props.children);
+
+export const Label: React.FunctionComponent<
+  LightDeskIntrinsicElements['label']
+> = (props) => React.createElement('label', props, props.children);
+
+export const Rect: React.FunctionComponent<
+  LightDeskIntrinsicElements['rect']
+> = (props) => React.createElement('rect', props, props.children);
+
+export const SliderButton: React.FunctionComponent<
+  LightDeskIntrinsicElements['slider-button']
+> = (props) => React.createElement('slider-button', props, props.children);
+
+export const Switch: React.FunctionComponent<
+  LightDeskIntrinsicElements['switch']
+> = (props) => React.createElement('switch', props, props.children);
+
+export const Tab: React.FunctionComponent<LightDeskIntrinsicElements['tab']> = (
+  props
+) => React.createElement('tab', props, props.children);
+
+export const Tabs: React.FunctionComponent<
+  LightDeskIntrinsicElements['tabs']
+> = (props) => React.createElement('tabs', props, props.children);
+
+export const TextInput: React.FunctionComponent<
+  LightDeskIntrinsicElements['text-input']
+> = (props) => React.createElement('text-input', props, props.children);
diff --git a/react-light-desk/src/examples/example-001.tsx b/react-light-desk/src/examples/example-001.tsx
new file mode 100644
index 00000000..0fc8b7f7
--- /dev/null
+++ b/react-light-desk/src/examples/example-001.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as ld from '@synesthesia-project/light-desk';
+
+import { LightDeskRenderer, Group } from '../index';
+
+const desk = new ld.LightDesk();
+
+desk.start({
+  mode: 'automatic',
+  port: 1338,
+});
+
+const group = new ld.Group();
+desk.setRoot(group);
+
+const TestComponent = ({ foo }: { foo: string }) => {
+  const [count, setCount] = React.useState(0);
+
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setCount(count + 1);
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, [count]);
+
+  return <Group title={`asd: ${count}`}>{`${foo}: ${count}`}</Group>;
+};
+
+const App = () => (
+  <Group title="foo">
+    <TestComponent foo="a" />
+    <Group defaultCollapsibleState="closed">
+      <TestComponent foo="b" />
+    </Group>
+  </Group>
+);
+
+LightDeskRenderer.render(<App />, group);
diff --git a/react-light-desk/src/examples/example-002.tsx b/react-light-desk/src/examples/example-002.tsx
new file mode 100644
index 00000000..eec8b33e
--- /dev/null
+++ b/react-light-desk/src/examples/example-002.tsx
@@ -0,0 +1,26 @@
+import * as React from 'react';
+import * as ld from '@synesthesia-project/light-desk';
+
+import { LightDeskRenderer, Group } from '../index';
+
+const desk = new ld.LightDesk();
+
+desk.start({
+  mode: 'automatic',
+  port: 1338,
+});
+
+const group = new ld.Group();
+desk.setRoot(group);
+
+const App = () => {
+  const [title, setTitle] = React.useState('initial-group');
+
+  return (
+    <Group title={title} editableTitle={true} onTitleChanged={setTitle}>
+      {`Label: ${title}`}
+    </Group>
+  );
+};
+
+LightDeskRenderer.render(<App />, group);
diff --git a/react-light-desk/src/examples/example-003.tsx b/react-light-desk/src/examples/example-003.tsx
new file mode 100644
index 00000000..3f48b6c7
--- /dev/null
+++ b/react-light-desk/src/examples/example-003.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import * as ld from '@synesthesia-project/light-desk';
+
+import {
+  LightDeskRenderer,
+  Button,
+  Group,
+  GroupHeader,
+  SliderButton,
+} from '../index';
+
+const desk = new ld.LightDesk();
+
+desk.start({
+  mode: 'automatic',
+  port: 1338,
+});
+
+const group = new ld.Group();
+desk.setRoot(group);
+
+const App = () => {
+  const [count, setCount] = React.useState(2);
+  const [val, setVal] = React.useState(0);
+
+  const buttons: JSX.Element[] = [];
+
+  for (let i = 0; i < count; i++) {
+    buttons.push(
+      <SliderButton value={val} mode="writeThrough" onChange={setVal} />
+    );
+  }
+
+  return (
+    <Group>
+      <GroupHeader>
+        <Button key="add" text="add" onClick={() => setCount(count + 1)} />
+        <Button
+          key="remove"
+          text="remove"
+          onClick={() => setCount(Math.max(0, count - 1))}
+        />
+        <Button text="max" onClick={() => setVal(255)} />
+        <Button text="min" onClick={() => setVal(0)} />
+      </GroupHeader>
+      <>{buttons}</>
+    </Group>
+  );
+};
+
+LightDeskRenderer.render(<App />, group);
diff --git a/react-light-desk/src/examples/example-004.tsx b/react-light-desk/src/examples/example-004.tsx
new file mode 100644
index 00000000..6396632c
--- /dev/null
+++ b/react-light-desk/src/examples/example-004.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import * as ld from '@synesthesia-project/light-desk';
+
+import {
+  LightDeskRenderer,
+  Label,
+  Switch,
+  Tab,
+  Tabs,
+  Group,
+  Rect,
+  Button,
+  TextInput,
+} from '../index';
+import { RGBA_PURPLE } from '@synesthesia-project/compositor/lib/color';
+import { RGBAColor } from '@synesthesia-project/compositor';
+
+const desk = new ld.LightDesk();
+
+desk.start({
+  mode: 'automatic',
+  port: 1338,
+});
+
+const group = new ld.Group({ direction: 'vertical' });
+desk.setRoot(group);
+
+const App = () => {
+  const [switchState, setSwitchState] = React.useState<'off' | 'on'>('off');
+  const [color, setColor] = React.useState(RGBA_PURPLE);
+  const [textValue, setTextValue] = React.useState('initial text');
+
+  return (
+    <Tabs>
+      <Tab name="FooBar">
+        <Group noBorder={true}>
+          {`Switch State: ${switchState}`}
+          <Switch
+            state={switchState}
+            onChange={(value) => setSwitchState(value)}
+          />
+          <Switch
+            state={switchState === 'on' ? 'off' : 'on'}
+            onChange={(value) => setSwitchState(value === 'on' ? 'off' : 'on')}
+          />
+        </Group>
+      </Tab>
+      <Tab name="Colors">
+        <Group noBorder={true}>
+          <Rect color={color} />
+          <Button
+            text="red"
+            onClick={() => setColor(new RGBAColor(255, 0, 0, 1))}
+          />
+          <Button
+            text="blue"
+            onClick={() => setColor(new RGBAColor(0, 0, 255, 1))}
+          />
+        </Group>
+      </Tab>
+      <Tab name="Another">
+        <Group noBorder={true}>
+          <Label text={textValue} />
+          <TextInput value={textValue} onChange={setTextValue} />
+        </Group>
+      </Tab>
+    </Tabs>
+  );
+};
+
+LightDeskRenderer.render(<App />, group);
diff --git a/react-light-desk/src/examples/example-005.tsx b/react-light-desk/src/examples/example-005.tsx
new file mode 100644
index 00000000..c9977764
--- /dev/null
+++ b/react-light-desk/src/examples/example-005.tsx
@@ -0,0 +1,38 @@
+import * as React from 'react';
+import * as ld from '@synesthesia-project/light-desk';
+
+import { LightDeskRenderer, Button, Tabs, Tab } from '../index';
+
+const desk = new ld.LightDesk();
+
+desk.start({
+  mode: 'automatic',
+  port: 1338,
+});
+
+const group = new ld.Group({ direction: 'vertical' });
+desk.setRoot(group);
+
+/**
+ * Test app that explicitly reorders existing elements
+ */
+const App = () => {
+  const [labels, setLabels] = React.useState(['foo', 'bar', 'baz']);
+
+  return (
+    <Tabs>
+      {labels.map((label) => (
+        <Tab name={label} key={label}>
+          <Button
+            text={'move to start'}
+            onClick={() =>
+              setLabels([label, ...labels.filter((l) => l !== label)])
+            }
+          />
+        </Tab>
+      ))}
+    </Tabs>
+  );
+};
+
+LightDeskRenderer.render(<App />, group);
diff --git a/react-light-desk/src/index.ts b/react-light-desk/src/index.ts
new file mode 100644
index 00000000..d61cf7b3
--- /dev/null
+++ b/react-light-desk/src/index.ts
@@ -0,0 +1,280 @@
+import * as Reconciler from 'react-reconciler';
+import * as ld from '@synesthesia-project/light-desk';
+import {
+  Base,
+  BaseParent,
+} from '@synesthesia-project/light-desk/build/backend/components/base';
+import { LightDeskIntrinsicElements } from './types';
+
+export type { LightDeskIntrinsicElements };
+export * from './components';
+
+type Type = keyof LightDeskIntrinsicElements;
+type Props = { [key: string]: any };
+type Container = ld.Group;
+type Instance = ld.Component;
+type TextInstance = ld.Label;
+
+type SuspenseInstance = any;
+type HydratableInstance = any;
+type PublicInstance = any;
+type HostContext = any;
+type UpdatePayload = any;
+type _ChildSet = any;
+type TimeoutHandle = any;
+type NoTimeout = number;
+
+type LightDeskHostConfig = Reconciler.HostConfig<
+  Type,
+  Props,
+  Container,
+  Instance,
+  TextInstance,
+  SuspenseInstance,
+  HydratableInstance,
+  PublicInstance,
+  HostContext,
+  UpdatePayload,
+  _ChildSet,
+  TimeoutHandle,
+  NoTimeout
+>;
+
+const isType = <T extends keyof LightDeskIntrinsicElements>(
+  targetType: T,
+  type: Type,
+  _props: Props
+): _props is LightDeskIntrinsicElements[T] => targetType === type;
+
+const canSetProps = (instance: ld.Component): instance is Base<unknown> =>
+  instance instanceof Base;
+
+const updateListener = <
+  EventName extends string,
+  Property extends string,
+  Listener
+>(
+  eventName: EventName,
+  property: Property,
+  instance: {
+    removeListener: (e: EventName, l: Listener) => void;
+    addListener: (e: EventName, l: Listener) => void;
+  },
+  prevProps: {
+    [key in Property]?: Listener;
+  },
+  nextProps: {
+    [key in Property]?: Listener;
+  }
+) => {
+  const prev = prevProps[property];
+  const next = nextProps[property];
+  if (prev !== next) {
+    prev && instance.removeListener(eventName, prev);
+    next && instance.addListener(eventName, next);
+  }
+};
+
+const updateListeners = (
+  type: Type,
+  instance: ld.Component,
+  prevProps: Props,
+  nextProps: Props
+) => {
+  if (isType('button', type, prevProps) && isType('button', type, nextProps)) {
+    if (instance instanceof ld.Button) {
+      updateListener('click', 'onClick', instance, prevProps, nextProps);
+    }
+  } else if (
+    isType('group', type, prevProps) &&
+    isType('group', type, nextProps)
+  ) {
+    if (instance instanceof ld.Group) {
+      updateListener(
+        'title-changed',
+        'onTitleChanged',
+        instance,
+        prevProps,
+        nextProps
+      );
+    }
+  } else if (
+    isType('slider-button', type, prevProps) &&
+    isType('slider-button', type, nextProps)
+  ) {
+    if (instance instanceof ld.SliderButton) {
+      updateListener('change', 'onChange', instance, prevProps, nextProps);
+    }
+  } else if (
+    isType('switch', type, prevProps) &&
+    isType('switch', type, nextProps)
+  ) {
+    if (instance instanceof ld.Switch) {
+      updateListener('change', 'onChange', instance, prevProps, nextProps);
+    }
+  } else if (
+    isType('text-input', type, prevProps) &&
+    isType('text-input', type, nextProps)
+  ) {
+    if (instance instanceof ld.TextInput) {
+      updateListener('change', 'onChange', instance, prevProps, nextProps);
+    }
+  }
+};
+
+const hostConfig: LightDeskHostConfig = {
+  supportsMutation: true,
+  supportsPersistence: false,
+  noTimeout: -1,
+  isPrimaryRenderer: true,
+  supportsHydration: false,
+
+  appendChild: (parentInstance, child) => {
+    if (parentInstance instanceof BaseParent) {
+      parentInstance.appendChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  appendInitialChild: (parentInstance, child) => {
+    if (parentInstance instanceof BaseParent) {
+      parentInstance.appendChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  appendChildToContainer(container, child) {
+    container.appendChild(child);
+  },
+  cancelTimeout: (id) => clearTimeout(id),
+  clearContainer: (container) => container.removeAllChildren(),
+  commitMount: () => {
+    throw new Error(`Unexpected call to commitMount()`);
+  },
+  commitUpdate(
+    instance,
+    updatePayload,
+    type,
+    prevProps,
+    nextProps,
+    _internalHandle
+  ) {
+    if (canSetProps(instance)) {
+      instance.setProps(updatePayload);
+      updateListeners(type, instance, prevProps, nextProps);
+    } else {
+      throw new Error(`Unexpected Instance: ${instance}`);
+    }
+  },
+  commitTextUpdate: (textInstance, _oldText, newText) =>
+    textInstance.setText(newText),
+  createInstance: (type, props) => {
+    let instance: ld.Component | null = null;
+    if (isType('button', type, props)) {
+      instance = new ld.Button(props);
+    } else if (isType('group', type, props)) {
+      instance = new ld.Group(props);
+    } else if (isType('group-header', type, props)) {
+      instance = new ld.GroupHeader(props);
+    } else if (isType('label', type, props)) {
+      instance = new ld.Label(props);
+    } else if (isType('rect', type, props)) {
+      instance = new ld.Rect(props);
+    } else if (isType('slider-button', type, props)) {
+      instance = new ld.SliderButton(props);
+    } else if (isType('switch', type, props)) {
+      instance = new ld.Switch(props);
+    } else if (isType('tab', type, props)) {
+      instance = new ld.Tab(props);
+    } else if (isType('tabs', type, props)) {
+      instance = new ld.Tabs(props);
+    } else if (isType('text-input', type, props)) {
+      instance = new ld.TextInput(props);
+    }
+    if (instance) {
+      updateListeners(type, instance, {}, props);
+      return instance;
+    } else {
+      throw new Error(`Not implemented type: ${type}`);
+    }
+  },
+  createTextInstance: (text) => new ld.Label({ text }),
+  getChildHostContext: (parentHostContext) => parentHostContext,
+  getPublicInstance: (instance) => instance,
+  getRootHostContext: () => null,
+  insertBefore: (parentInstance, child, beforeChild) => {
+    if (parentInstance instanceof BaseParent) {
+      parentInstance.insertBefore(child, beforeChild);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  insertInContainerBefore: (container, child, beforeChild) =>
+    container.insertBefore(child, beforeChild),
+  finalizeInitialChildren: () => false,
+  now: () => (Performance as any).now(),
+  prepareForCommit: () => null,
+  preparePortalMount: () => null,
+  prepareUpdate: (
+    _instance,
+    _type,
+    _oldProps,
+    newProps,
+    _rootContainer,
+    _hostContext
+  ) => {
+    const updates: Record<string, unknown> = {};
+    for (const [key, val] of Object.entries(newProps)) {
+      // Filter out extra props from set properties
+      if (key !== 'children') {
+        updates[key] = val;
+      }
+    }
+    if (Object.keys(updates).length) {
+      return updates;
+    } else {
+      return null;
+    }
+  },
+  removeChild(parentInstance, child) {
+    if (parentInstance instanceof BaseParent) {
+      parentInstance.removeChild(child);
+    } else {
+      throw new Error(`Unexpected Parent: ${parentInstance}`);
+    }
+  },
+  removeChildFromContainer: (container, child) => container.removeChild(child),
+  resetAfterCommit: () => null,
+  resetTextContent: () => {
+    throw new Error(`Unexpected call to resetTextContent()`);
+  },
+  scheduleTimeout: (fn, delay) => setTimeout(fn, delay),
+  shouldSetTextContent: () => false,
+
+  // Not-implemented
+  hideInstance: () => {
+    // eslint-disable-next-line no-console
+    console.log('Not-implemented: hideInstance');
+  },
+  hideTextInstance: () => {
+    // eslint-disable-next-line no-console
+    console.log('Not-implemented: hideTextInstance');
+  },
+  unhideInstance: () => {
+    // eslint-disable-next-line no-console
+    console.log('Not-implemented: unhideInstance');
+  },
+  unhideTextInstance: () => {
+    // eslint-disable-next-line no-console
+    console.log('Not-implemented: unhideTextInstance');
+  },
+};
+
+const reconciler = Reconciler(hostConfig as LightDeskHostConfig);
+
+export const LightDeskRenderer = {
+  render: (component: JSX.Element, container: ld.Group) => {
+    const root = (reconciler as any).createContainer(container, 0, false, null);
+    reconciler.updateContainer(component, root, null);
+  },
+};
diff --git a/react-light-desk/src/jsxFactory.d.ts b/react-light-desk/src/jsxFactory.d.ts
new file mode 100644
index 00000000..0f65158f
--- /dev/null
+++ b/react-light-desk/src/jsxFactory.d.ts
@@ -0,0 +1,16 @@
+// import type { Props as GroupProps } from '@synesthesia-project/light-desk/build/backend/components/group';
+// import type * as React from 'react';
+
+// interface LightDeskIntrinsicElements {
+//   'slider-button': {
+//     children?: never;
+//   };
+//   group: {
+//     children?: JSX.Element | JSX.Element[] | string | string[];
+//   };
+// }
+
+// declare namespace JSX {
+//   type Element = ReturnType<typeof React.createElement>;
+//   interface IntrinsicElements extends LightDeskIntrinsicElements {}
+// }
diff --git a/react-light-desk/src/tsconfig.json b/react-light-desk/src/tsconfig.json
new file mode 100644
index 00000000..a031a0eb
--- /dev/null
+++ b/react-light-desk/src/tsconfig.json
@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "target": "esnext",
+        "module": "commonjs",
+        "jsx": "react",
+        "isolatedModules": false,
+        "experimentalDecorators": false,
+        "declaration": true,
+        "noImplicitUseStrict": false,
+        "strict": true,
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "removeComments": true,
+        "noLib": false,
+        "preserveConstEnums": true,
+        "skipLibCheck": false
+    },
+    "compileOnSave": false,
+    "buildOnSave": false,
+    "atom": {
+        "rewriteTsconfig": false
+    }
+}
diff --git a/react-light-desk/src/types.ts b/react-light-desk/src/types.ts
new file mode 100644
index 00000000..c63188a4
--- /dev/null
+++ b/react-light-desk/src/types.ts
@@ -0,0 +1,66 @@
+import type {
+  Events as GroupEvents,
+  Props as GroupProps,
+} from '@synesthesia-project/light-desk/build/backend/components/group';
+import type {
+  Events as ButtonEvents,
+  Props as ButtonProps,
+} from '@synesthesia-project/light-desk/build/backend/components/button';
+import type { Props as LabelProps } from '@synesthesia-project/light-desk/build/backend/components/label';
+import type { Props as RectProps } from '@synesthesia-project/light-desk/build/backend/components/rect';
+import type {
+  Events as SliderButtonEvents,
+  Props as SliderButtonProps,
+} from '@synesthesia-project/light-desk/build/backend/components/slider_button';
+import type {
+  Events as SwitchEvents,
+  Props as SwitchProps,
+} from '@synesthesia-project/light-desk/build/backend/components/switch';
+import type {
+  TabProps,
+  TabsProps,
+} from '@synesthesia-project/light-desk/build/backend/components/tabs';
+import type {
+  Events as TextInputEvents,
+  Props as TextInputProps,
+} from '@synesthesia-project/light-desk/build/backend/components/text-input';
+
+type Children = JSX.Element | string | (string | JSX.Element)[];
+
+export interface LightDeskIntrinsicElements {
+  button: ButtonProps & {
+    children?: never;
+    onClick?: ButtonEvents['click'];
+  };
+  group: GroupProps & {
+    children?: Children;
+    onTitleChanged?: GroupEvents['title-changed'];
+  };
+  'group-header': {
+    children?: Children;
+  };
+  label: LabelProps & {
+    children?: never;
+  };
+  rect: RectProps & {
+    children?: never;
+  };
+  'slider-button': SliderButtonProps & {
+    children?: never;
+    onChange?: SliderButtonEvents['change'];
+  };
+  switch: SwitchProps & {
+    children?: never;
+    onChange?: SwitchEvents['change'];
+  };
+  tab: TabProps & {
+    children?: JSX.Element | string;
+  };
+  tabs: TabsProps & {
+    children?: JSX.Element | JSX.Element[];
+  };
+  'text-input': TextInputProps & {
+    children?: JSX.Element | JSX.Element[];
+    onChange?: TextInputEvents['change'];
+  };
+}
diff --git a/rush.json b/rush.json
index de5e6109..0119c5a6 100644
--- a/rush.json
+++ b/rush.json
@@ -275,19 +275,19 @@
     //    * The NPM package name of the project (must match package.json)
     //    */
     //   "packageName": "my-app",
-    // 
+    //
     //   /**
     //    * The path to the project folder, relative to the rush.json config file.
     //    */
     //   "projectFolder": "apps/my-app",
-    // 
+    //
     //   /**
     //    * An optional category for usage in the "browser-approved-packages.json"
     //    * and "nonbrowser-approved-packages.json" files.  The value must be one of the
     //    * strings from the "reviewCategories" defined above.
     //    */
     //   "reviewCategory": "production",
-    // 
+    //
     //   /**
     //    * A list of local projects that appear as devDependencies for this project, but cannot be
     //    * locally linked because it would create a cyclic dependency; instead, the last published
@@ -296,20 +296,20 @@
     //   "cyclicDependencyProjects": [
     //     // "my-toolchain"
     //   ],
-    // 
+    //
     //   /**
     //    * If true, then this project will be ignored by the "rush check" command.
     //    * The default value is false.
     //    */
     //   // "skipRushCheck": false,
-    // 
+    //
     //   /**
     //    * A flag indicating that changes to this project will be published to npm, which affects
     //    * the Rush change and publish workflows. The default value is false.
     //    * NOTE: "versionPolicyName" and "shouldPublish" are alternatives; you cannot specify them both.
     //    */
     //   // "shouldPublish": false,
-    // 
+    //
     //   /**
     //    * An optional version policy associated with the project.  Version policies are defined
     //    * in "version-policies.json" file.  See the "rush publish" documentation for more info.
@@ -389,6 +389,10 @@
       "packageName": "@synesthesia-project/server",
       "projectFolder": "server"
     },
+    {
+      "packageName": "@synesthesia-project/react-light-desk",
+      "projectFolder": "react-light-desk"
+    },
     {
       "packageName": "@synesthesia-project/balccon",
       "projectFolder": "balccon"