diff --git a/integration/kitchen-sink.tsx b/integration/kitchen-sink.tsx
new file mode 100644
index 0000000..3f5db6a
--- /dev/null
+++ b/integration/kitchen-sink.tsx
@@ -0,0 +1,11 @@
+import React from "react"
+import { Embed } from "../src/components.js"
+
+export function KitchenSink() {
+  return (
+    <>
+      content
+      <Embed color="BLUE"></Embed>
+    </>
+  )
+}
diff --git a/integration/text.test.tsx b/integration/rendering.test.tsx
similarity index 86%
rename from integration/text.test.tsx
rename to integration/rendering.test.tsx
index 1bb0c94..44bc649 100644
--- a/integration/text.test.tsx
+++ b/integration/rendering.test.tsx
@@ -3,6 +3,7 @@ import test from "ava"
 import { Client, TextChannel } from "discord.js"
 import { nanoid } from "nanoid"
 import React, { useState } from "react"
+import { Embed } from "../src/components/embed.js"
 import { raise } from "../src/helpers/raise.js"
 import { createRoot } from "../src/root.js"
 import { testBotToken, testChannelId } from "./test-environment.js"
@@ -32,7 +33,20 @@ test.after(() => {
   client.destroy()
 })
 
-test("rendering text", async (t) => {
+test.only("test", async (t) => {
+  const root = createRoot(channel)
+  await root.render(
+    <>
+      <Embed color="BLUE">
+        <Embed color="DARKER_GREY" />
+      </Embed>
+      <Embed color="DARKER_GREY" />
+    </>,
+  )
+  t.pass()
+})
+
+test("kitchen sink", async (t) => {
   const root = createRoot(channel)
 
   const content = nanoid()
@@ -50,7 +64,7 @@ test("rendering text", async (t) => {
   await assertNoMessageHasContent(t, newContent)
 })
 
-test("rapid updates", async (t) => {
+test("kitchen sink, rapid updates", async (t) => {
   const root = createRoot(channel)
 
   const content = nanoid()
diff --git a/package.json b/package.json
index aaec316..82a217b 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,6 @@
   },
   "devDependencies": {
     "@itsmapleleaf/configs": "^1.1.0",
-    "@types/scheduler": "^0.16.2",
     "@typescript-eslint/eslint-plugin": "^5.6.0",
     "@typescript-eslint/parser": "^5.6.0",
     "ava": "^4.0.0-rc.1",
@@ -54,7 +53,6 @@
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "react": "^17.0.2",
-    "scheduler": "^0.20.2",
     "tsup": "^5.10.3",
     "typescript": "^4.5.2"
   },
@@ -74,7 +72,9 @@
       "--experimental-specifier-resolution=node",
       "--no-warnings"
     ],
-    "files": "{src,test,integration}/**/*.test.{ts,tsx}",
+    "files": [
+      "{src,test,integration}/**/*.test.{ts,tsx}"
+    ],
     "serial": true
   }
 }
diff --git a/src/components/embed.tsx b/src/components/embed.tsx
new file mode 100644
index 0000000..095e9df
--- /dev/null
+++ b/src/components/embed.tsx
@@ -0,0 +1,19 @@
+import type { ColorResolvable } from "discord.js"
+import type { ReactNode } from "react"
+import * as React from "react"
+
+export type EmbedProps = {
+  color?: ColorResolvable
+  children?: ReactNode
+}
+
+export function Embed(props: EmbedProps) {
+  return (
+    <reacord-element
+      modifyOptions={(options) => {
+        options.embeds ??= []
+        options.embeds.push({ color: props.color })
+      }}
+    />
+  )
+}
diff --git a/src/container.ts b/src/container.ts
index 99959c2..8900a29 100644
--- a/src/container.ts
+++ b/src/container.ts
@@ -1,4 +1,5 @@
 import type { Message, MessageOptions, TextBasedChannels } from "discord.js"
+import type { ReacordElement } from "./element.js"
 
 type Action =
   | { type: "updateMessage"; options: MessageOptions }
@@ -14,7 +15,7 @@ export class ReacordContainer {
     this.channel = channel
   }
 
-  render(instances: string[]) {
+  render(instances: ReacordElement[]) {
     const messageOptions: MessageOptions = {
       content: instances.join("") || undefined, // empty strings are not allowed
     }
diff --git a/src/element.ts b/src/element.ts
new file mode 100644
index 0000000..b7a53d6
--- /dev/null
+++ b/src/element.ts
@@ -0,0 +1,15 @@
+import type { MessageOptions } from "discord.js"
+
+export type ReacordElementJsxTag = "reacord-element"
+
+export type ReacordElement = {
+  modifyOptions: (options: MessageOptions) => void
+}
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
+    interface IntrinsicElements
+      extends Record<ReacordElementJsxTag, ReacordElement> {}
+  }
+}
diff --git a/src/reconciler.ts b/src/reconciler.ts
index 1cb8b50..921d1f2 100644
--- a/src/reconciler.ts
+++ b/src/reconciler.ts
@@ -1,15 +1,16 @@
 /* eslint-disable unicorn/no-null */
 import ReactReconciler from "react-reconciler"
 import type { ReacordContainer } from "./container.js"
+import type { ReacordElement, ReacordElementJsxTag } from "./element.js"
 import { raise } from "./helpers/raise.js"
 
 export const reconciler = ReactReconciler<
-  unknown,
-  Record<string, unknown>,
+  ReacordElementJsxTag,
+  ReacordElement,
   ReacordContainer,
+  ReacordElement,
   string,
-  string,
-  string,
+  unknown,
   unknown,
   unknown,
   unknown,
@@ -33,12 +34,12 @@ export const reconciler = ReactReconciler<
 
   createInstance: (
     type,
-    properties,
+    props,
     rootContainerInstance,
     hostContext,
     internalInstanceHandle,
   ) => {
-    throw new Error("Not implemented")
+    return props
   },
 
   createTextInstance: (
@@ -54,24 +55,30 @@ export const reconciler = ReactReconciler<
   resetAfterCommit: () => null,
 
   appendInitialChild: (parent, child) => raise("Not implemented"),
-  finalizeInitialChildren: () => raise("Not implemented"),
+  finalizeInitialChildren: (...args) => {
+    console.log("finalizeInitialChildren", args)
+    return false
+  },
   getPublicInstance: () => raise("Not implemented"),
   prepareUpdate: () => raise("Not implemented"),
   preparePortalMount: () => raise("Not implemented"),
 
-  createContainerChildSet: (container: ReacordContainer): string[] => {
+  createContainerChildSet: (): ReacordElement[] => {
     // console.log("createContainerChildSet", [container])
     return []
   },
 
-  appendChildToContainerChildSet: (children: string[], child: string) => {
+  appendChildToContainerChildSet: (
+    children: ReacordElement[],
+    child: ReacordElement,
+  ) => {
     // console.log("appendChildToContainerChildSet", [children, child])
     children.push(child)
   },
 
   finalizeContainerChildren: (
     container: ReacordContainer,
-    children: string[],
+    children: ReacordElement[],
   ) => {
     // console.log("finalizeContainerChildren", [container, children])
     return false
@@ -79,9 +86,9 @@ export const reconciler = ReactReconciler<
 
   replaceContainerChildren: (
     container: ReacordContainer,
-    children: string[],
+    children: ReacordElement[],
   ) => {
-    // console.log("replaceContainerChildren", [container, children])
+    console.log("replaceContainerChildren", [container, children])
     container.render(children)
   },
 })
diff --git a/tsconfig.json b/tsconfig.json
index 4338bb0..c3ee271 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,4 +1,7 @@
 {
   "extends": "@itsmapleleaf/configs/tsconfig.base",
+  "compilerOptions": {
+    "skipLibCheck": false
+  },
   "exclude": ["node_modules", ".vscode", "dist", "coverage"]
 }