+
+
{document?.foo?.title ?? "Default title"}
+
{JSON.stringify(document, null, 2)}
+
+ );
+};
diff --git a/src/templates/customTemplate/index.tsx b/src/templates/customTemplate/index.tsx
new file mode 100644
index 0000000..d5754e2
--- /dev/null
+++ b/src/templates/customTemplate/index.tsx
@@ -0,0 +1,17 @@
+import { CustomTemplate } from "./customTemplate";
+import styled from "@emotion/styled";
+
+export const templates = [
+ {
+ id: "custom",
+ label: "Custom",
+ template: CustomTemplate
+ },
+ {
+ id: "custom-blue",
+ label: "Blue Custom Template",
+ template: styled(CustomTemplate)`
+ color: blue;
+ `
+ }
+];
diff --git a/src/templates/index.tsx b/src/templates/index.tsx
new file mode 100644
index 0000000..4009793
--- /dev/null
+++ b/src/templates/index.tsx
@@ -0,0 +1,17 @@
+import { TemplateRegistry } from "@govtechsg/decentralized-renderer-react-components";
+import { templates } from "./customTemplate";
+import styled from "@emotion/styled";
+import { CustomTemplate } from "./customTemplate/customTemplate";
+
+export const registry: TemplateRegistry