diff --git a/website/libs.config.ts b/website/libs.config.ts
index 4fde2b3..8101c59 100644
--- a/website/libs.config.ts
+++ b/website/libs.config.ts
@@ -73,11 +73,17 @@ export const libs: {
         language: 'csharp',
         path: '/discatsharp-csharp-code-generator'
     },
-
+  
     'discord-net': {
         name: 'C#: Discord.Net',
         language: 'csharp',
         path: '/discord-net-csharp-code-generator'
+    },
+  
+    'discord-net-component-designer': {
+        name: 'C#: Discord.Net Component Designer',
+        language: 'csharp',
+        path: '/discord-net-component-designer-csharp-code-generator'
     }
 };
 
diff --git a/website/src/codegen/discord-net-component-designer/actionrow.cx.ejs b/website/src/codegen/discord-net-component-designer/actionrow.cx.ejs
new file mode 100644
index 0000000..d8e8e06
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/actionrow.cx.ejs
@@ -0,0 +1,5 @@
+<row>
+<% data.comp.components.forEach(function(comp){ _%>
+<%_ %><%- indent(include('/discord-net-component-designer/components.cx.ejs', {comp: comp}), 4); %><% _%>
+<% }); _%>
+</row>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/button.cx.ejs b/website/src/codegen/discord-net-component-designer/button.cx.ejs
new file mode 100644
index 0000000..c4d6cbd
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/button.cx.ejs
@@ -0,0 +1,37 @@
+<% 
+const buttonStyle = {
+    1: 'primary',
+    2: 'secondary',
+    3: 'success',
+    4: 'danger',
+    5: 'link',
+    6: 'premium'
+};
+-%><% _%>
+<button
+    style="<%- buttonStyle[data.comp.style] %>"<% _%>
+<%_ %><% if (data.comp.emoji && (data.comp.emoji.id || data.comp.emoji.name)) { %>
+    emote=<% if (data.comp.emoji.id) { %><% _%>
+<% _%>{new Emote(id: <%= data.comp.emoji.id %>, name: <%= data.comp.emoji.name %>, animated: <%= data.comp.emoji.animated === true %>)}
+<% } else { %><% _%>
+<% _%>{new Emoji(<%= data.comp.emoji.name %>)}
+<%_ } -%>
+<%_ } -%><% _%>
+<%_ %><% if (data.comp.disabled) { %>
+    disabled
+<%_ } -%>
+<%_ %><% if (data.comp.custom_id && data.comp.style !== 5 && data.comp.style !== 6) { %>
+    customId=<%= data.comp.custom_id %><% _%>
+<%_ } -%><% if (data.comp.sku_id && data.comp.style === 6) { %>
+    sku=<%= data.comp.sku_id %><% _%>
+<%_ } -%>
+<%_ %><% if (data.comp.url && data.comp.style === 5) { %>
+    url=<%= data.comp.url %><% _%>
+<% } -%>
+<%_ %><% if (data.comp.label) { %>
+>
+    <%- data.comp.label %>
+</button>
+<%_ } else {-%><% _%>
+/>
+<% } -%>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/components.cx.ejs b/website/src/codegen/discord-net-component-designer/components.cx.ejs
new file mode 100644
index 0000000..02a8b70
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/components.cx.ejs
@@ -0,0 +1,24 @@
+<% if (data.comp.type == 10) { -%>
+<%- include('/discord-net-component-designer/textdisplay.cx.ejs', {comp: data.comp}); -%>
+<% } else if (data.comp.type == 13) { -%>
+<%- include('/discord-net-component-designer/file.cx.ejs', {comp: data.comp}); -%>
+<%_ %><% if (data.comp.spoiler) { %>.WithIsSpoiler(true)<% } %><% _%>
+<% } else if (data.comp.type == 14) { -%>
+<%- include('/discord-net-component-designer/separator.cx.ejs', {comp: data.comp}); -%>
+<% } else if (data.comp.type == 17) { -%>
+<%- include('/discord-net-component-designer/container.cx.ejs', {comp: data.comp}); -%>
+<% } else if (data.comp.type == 1) { -%>
+<%- include('/discord-net-component-designer/actionrow.cx.ejs', {comp: data.comp}); -%>
+<% } else if (data.comp.type == 2) { -%>
+<%- include('/discord-net-component-designer/button.cx.ejs', {comp: data.comp}); -%>
+<% } else if (data.comp.type == 12) { -%>
+<%- include('/discord-net-component-designer/mediagallery.cx.ejs', {comp: data.comp}); -%>
+<% } else if (data.comp.type == 9) { -%>
+<%- include('/discord-net-component-designer/section.cx.ejs', {comp: data.comp}); -%>
+<% } else if (data.comp.type == 11) { -%>
+<%- include('/discord-net-component-designer/thumbnail.cx.ejs', {comp: data.comp}); -%>
+<% } else if (data.comp.type == 3) { -%>
+<%- include('/discord-net-component-designer/selectmenu.cx.ejs', {comp: data.comp}); -%>
+<% } else  { -%>
+// TODO: Implement <%= data.comp.type %><% _%>
+<% } -%>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/container.cx.ejs b/website/src/codegen/discord-net-component-designer/container.cx.ejs
new file mode 100644
index 0000000..a0973e9
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/container.cx.ejs
@@ -0,0 +1,14 @@
+<container<% _%>
+<% if (data.comp.accent_color) { %>
+    color="<%- data.comp.accent_color %>"<% _%>
+<% } -%><% _%>
+<% if (data.comp.spoiler) { %>
+    spoiler<% _%>
+<% } -%><% _%>
+<% if (data.comp.accent_color || data.comp.spoiler) { %>
+<% } -%>
+><%_ %><% data.comp.components.forEach(function(comp){ %>
+<%_ %><%- indent(include('/discord-net-component-designer/components.cx.ejs', {comp: comp}), 4); %><% _%>
+<% }); -%>
+
+</container>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/file.cx.ejs b/website/src/codegen/discord-net-component-designer/file.cx.ejs
new file mode 100644
index 0000000..6f43013
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/file.cx.ejs
@@ -0,0 +1 @@
+<file<% if (data.comp.file.url) { %> url=<%= data.comp.file.url %><% } -%><% if (data.comp.spoiler) { %> spoiler<% } -%><% _%>/>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/main.cs.ejs b/website/src/codegen/discord-net-component-designer/main.cs.ejs
new file mode 100644
index 0000000..856e053
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/main.cs.ejs
@@ -0,0 +1,10 @@
+using System;
+using Discord;
+
+using static Discord.ComponentDesigner;
+
+var components = cx($"""
+<% data.components.forEach(function(comp, i){ -%>
+<%_ %><%- indent(include('/discord-net-component-designer/components.cx.ejs', {comp: comp}), 4); %>
+<% }); -%>
+""");
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/mediagallery.cx.ejs b/website/src/codegen/discord-net-component-designer/mediagallery.cx.ejs
new file mode 100644
index 0000000..dfce1d7
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/mediagallery.cx.ejs
@@ -0,0 +1,5 @@
+<gallery>
+<%_ %><% data.comp.items.forEach(function(comp, i){ -%>
+<%- indent(include('/discord-net-component-designer/mediagalleryitem.cx.ejs', {comp: comp}), 4); %>
+<% }); -%>
+</gallery>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/mediagalleryitem.cx.ejs b/website/src/codegen/discord-net-component-designer/mediagalleryitem.cx.ejs
new file mode 100644
index 0000000..191ccc2
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/mediagalleryitem.cx.ejs
@@ -0,0 +1 @@
+<item url=<%= data.comp.media.url %><% if (data.comp.spoiler) { %> spoiler<% _%><% } -%><% if (data.comp.description) { %> description=<%= data.comp.description %><% _%><% } -%>/>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/section.cx.ejs b/website/src/codegen/discord-net-component-designer/section.cx.ejs
new file mode 100644
index 0000000..031814e
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/section.cx.ejs
@@ -0,0 +1,9 @@
+<section 
+    accessory=(
+<%_ %><%- indent(include('/discord-net-component-designer/components.cx.ejs', {comp: comp}), 8); %>
+    )
+>
+<%_ %><% data.comp.components.forEach(function(comp){ -%>
+<%- indent(include('/discord-net-component-designer/components.cx.ejs', {comp: comp}), 4); %>
+<% }); -%>
+</section>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/selectmenu.cx.ejs b/website/src/codegen/discord-net-component-designer/selectmenu.cx.ejs
new file mode 100644
index 0000000..4bf47dd
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/selectmenu.cx.ejs
@@ -0,0 +1,33 @@
+<%
+const builderConstructor = {
+    3: 'string',
+    5: 'user',
+    6: 'role',
+    7: 'mentionable',
+    8: 'channel',
+};
+-%><% _%>
+<select
+    type="<%- builderConstructor[data.comp.type] %>"
+    customId=<%= data.comp.custom_id %><% _%>
+<%_ %><% if (data.comp.disabled) { %>
+    disabled<% _%>
+<% } %><% _%>
+<%_ %><% if (data.comp.placeholder) { %>
+    placeholder=<%= data.comp.placeholder %><% _%>
+<% } %><% _%>
+<%_ %><% if (data.comp.min_values && data.comp.min_values !== 1) { %>
+    min="<%= data.comp.min_values %>"<% _%>
+<% } %><% _%>
+<%_ %><% if (data.comp.max_values && data.comp.max_values !== 1) { %>
+    max="<%= data.comp.max_values %>"<% _%>
+<% } %><% _%>
+<%_ %><% if (data.comp.options) { %>
+>
+<%_ %><% data.comp.options.forEach(function(comp){ -%>
+<%- indent(include('/discord-net-component-designer/selectmenu_option.cx.ejs', {comp: comp}), 4); %>
+<% }); -%>
+</select>
+<% } else { %><% _%>
+/><% _%>
+<% } %><% _%>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/selectmenu_option.cx.ejs b/website/src/codegen/discord-net-component-designer/selectmenu_option.cx.ejs
new file mode 100644
index 0000000..1878ef8
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/selectmenu_option.cx.ejs
@@ -0,0 +1,22 @@
+<option<% _%>
+<%_ %><% if (data.comp.label) { %>
+    label=<%= data.comp.label %><% _%>
+<% } -%><% _%>
+<%_ %><% if (data.comp.value) { %>
+    value=<%= data.comp.value %><% _%>
+<% } -%><% _%>
+<%_ %><% if (data.comp.description) { %>
+    description=<%= data.comp.description %><% _%>
+<% } -%><% _%>
+<%_ %><% if (data.comp.default) { %>
+    default<% _%>
+<% } -%><% _%>
+<%_ %><% if (data.comp.emoji && (data.comp.emoji.id || data.comp.emoji.name)) { %>
+    emote=<% if (data.comp.emoji.id) { %><% _%>
+<% _%>{new Emote(id: <%= data.comp.emoji.id %>, name: <%= data.comp.emoji.name %>, animated: <%= data.comp.emoji.animated === true %>)}<% _%>
+<% } else { %><% _%>
+<% _%>{new Emoji(<%= data.comp.emoji.name %>)}<% _%>
+<%_ } -%>
+<%_ } -%><% _%>
+
+/>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/separator.cx.ejs b/website/src/codegen/discord-net-component-designer/separator.cx.ejs
new file mode 100644
index 0000000..3a36929
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/separator.cx.ejs
@@ -0,0 +1,4 @@
+<separator<% _%>
+<%_ %><% if (data.comp.spacing) { %>spacing="<%- data.comp.spacing === 2 ? 'large' : 'small' %>"<% } %><% _%>
+<%_ %><% if (typeof data.comp.divider === 'boolean') { %>divider='<%- data.comp.divider %>'<% } %><% _%>
+/>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/textdisplay.cx.ejs b/website/src/codegen/discord-net-component-designer/textdisplay.cx.ejs
new file mode 100644
index 0000000..d95ef00
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/textdisplay.cx.ejs
@@ -0,0 +1,3 @@
+<text>
+<%- indent(data.comp.content, 4) %>
+</text>
\ No newline at end of file
diff --git a/website/src/codegen/discord-net-component-designer/thumbnail.cx.ejs b/website/src/codegen/discord-net-component-designer/thumbnail.cx.ejs
new file mode 100644
index 0000000..90212f8
--- /dev/null
+++ b/website/src/codegen/discord-net-component-designer/thumbnail.cx.ejs
@@ -0,0 +1,10 @@
+<thumbnail<% _%>
+<% if (data.comp.media) { %>
+    url=<%= data.comp.media.url %><% _%>
+<% } -%><% _%>
+<% if (data.comp.description) { %>
+    description=<%= data.comp.description %><% _%>
+<% } -%><% _%>
+<% if (data.comp.spoiler) { %>
+    spoiler<% _%>
+<% } -%><% _%>/>
\ No newline at end of file