diff --git a/src/html/elements.zig b/src/html/elements.zig
index a44973cd..039f8310 100644
--- a/src/html/elements.zig
+++ b/src/html/elements.zig
@@ -1,4 +1,5 @@
 const parser = @import("../parser.zig");
+const generate = @import("../generate.zig");
 
 const Element = @import("../dom/element.zig").Element;
 
@@ -15,132 +16,74 @@ pub const HTMLElement = struct {
     }
 };
 
-const HTMLElementsTags = enum {
-    unknown,
-    anchor,
-    area,
-    audio,
-    br,
-    base,
-    body,
-    button,
-    canvas,
-    dlist,
-    dialog,
-    data,
-    div,
-    embed,
-    fieldset,
-    form,
-    frameset,
-    hr,
-    head,
-    heading,
-    html,
-    iframe,
-    img,
-    input,
-    li,
-    label,
-    legend,
-    link,
-    map,
-    meta,
-    meter,
-    mod,
-    olist,
-    object,
-    optgroup,
-    option,
-    output,
-    paragraph,
-    picture,
-    pre,
-    progress,
-    quote,
-    script,
-    select,
-    source,
-    span,
-    style,
-    table,
-    tablecaption,
-    tablecell,
-    tablecol,
-    tablerow,
-    tablesection,
-    template,
-    textarea,
-    time,
-    title,
-    track,
-    ulist,
-    video,
-};
-
-// TODO: generate comptime?
-pub const HTMLElements = union(HTMLElementsTags) {
-    unknown: HTMLUnknownElement,
-    anchor: HTMLAnchorElement,
-    area: HTMLAreaElement,
-    audio: HTMLAudioElement,
-    br: HTMLBRElement,
-    base: HTMLBaseElement,
-    body: HTMLBodyElement,
-    button: HTMLButtonElement,
-    canvas: HTMLCanvasElement,
-    dlist: HTMLDListElement,
-    dialog: HTMLDialogElement,
-    data: HTMLDataElement,
-    div: HTMLDivElement,
-    embed: HTMLEmbedElement,
-    fieldset: HTMLFieldSetElement,
-    form: HTMLFormElement,
-    frameset: HTMLFrameSetElement,
-    hr: HTMLHRElement,
-    head: HTMLHeadElement,
-    heading: HTMLHeadingElement,
-    html: HTMLHtmlElement,
-    iframe: HTMLIFrameElement,
-    img: HTMLImageElement,
-    input: HTMLInputElement,
-    li: HTMLLIElement,
-    label: HTMLLabelElement,
-    legend: HTMLLegendElement,
-    link: HTMLLinkElement,
-    map: HTMLMapElement,
-    meta: HTMLMetaElement,
-    meter: HTMLMeterElement,
-    mod: HTMLModElement,
-    olist: HTMLOListElement,
-    object: HTMLObjectElement,
-    optgroup: HTMLOptGroupElement,
-    option: HTMLOptionElement,
-    output: HTMLOutputElement,
-    paragraph: HTMLParagraphElement,
-    picture: HTMLPictureElement,
-    pre: HTMLPreElement,
-    progress: HTMLProgressElement,
-    quote: HTMLQuoteElement,
-    script: HTMLScriptElement,
-    select: HTMLSelectElement,
-    source: HTMLSourceElement,
-    span: HTMLSpanElement,
-    style: HTMLStyleElement,
-    table: HTMLTableElement,
-    tablecaption: HTMLTableCaptionElement,
-    tablecell: HTMLTableCellElement,
-    tablecol: HTMLTableColElement,
-    tablerow: HTMLTableRowElement,
-    tablesection: HTMLTableSectionElement,
-    template: HTMLTemplateElement,
-    textarea: HTMLTextAreaElement,
-    time: HTMLTimeElement,
-    title: HTMLTitleElement,
-    track: HTMLTrackElement,
-    ulist: HTMLUListElement,
-    video: HTMLVideoElement,
+const HTMLElementsTypes = .{
+    HTMLUnknownElement,
+    HTMLAnchorElement,
+    HTMLAreaElement,
+    HTMLAudioElement,
+    HTMLBRElement,
+    HTMLBaseElement,
+    HTMLBodyElement,
+    HTMLButtonElement,
+    HTMLCanvasElement,
+    HTMLDListElement,
+    HTMLDialogElement,
+    HTMLDataElement,
+    HTMLDivElement,
+    HTMLEmbedElement,
+    HTMLFieldSetElement,
+    HTMLFormElement,
+    HTMLFrameSetElement,
+    HTMLHRElement,
+    HTMLHeadElement,
+    HTMLHeadingElement,
+    HTMLHtmlElement,
+    HTMLIFrameElement,
+    HTMLImageElement,
+    HTMLInputElement,
+    HTMLLIElement,
+    HTMLLabelElement,
+    HTMLLegendElement,
+    HTMLLinkElement,
+    HTMLMapElement,
+    HTMLMetaElement,
+    HTMLMeterElement,
+    HTMLModElement,
+    HTMLOListElement,
+    HTMLObjectElement,
+    HTMLOptGroupElement,
+    HTMLOptionElement,
+    HTMLOutputElement,
+    HTMLParagraphElement,
+    HTMLPictureElement,
+    HTMLPreElement,
+    HTMLProgressElement,
+    HTMLQuoteElement,
+    HTMLScriptElement,
+    HTMLSelectElement,
+    HTMLSourceElement,
+    HTMLSpanElement,
+    HTMLStyleElement,
+    HTMLTableElement,
+    HTMLTableCaptionElement,
+    HTMLTableCellElement,
+    HTMLTableColElement,
+    HTMLTableRowElement,
+    HTMLTableSectionElement,
+    HTMLTemplateElement,
+    HTMLTextAreaElement,
+    HTMLTimeElement,
+    HTMLTitleElement,
+    HTMLTrackElement,
+    HTMLUListElement,
+    HTMLVideoElement,
 };
+fn generateElements() generate.Union {
+    return generate.Union.compile(HTMLElementsTypes);
+}
+const HTMLElementsGenerated = generateElements();
+pub const HTMLElements = HTMLElementsGenerated._union;
+pub const HTMLElementsTags = HTMLElementsGenerated._enum;
 
 // Deprecated HTMLElements in Chrome (2023/03/15)
 // HTMLContentelement
@@ -765,65 +708,65 @@ pub const HTMLVideoElement = struct {
 pub fn ElementToHTMLElementInterface(base: *parser.Element) HTMLElements {
     const tag = parser.nodeTag(parser.elementNode(base));
     return switch (tag) {
-        .a => .{ .anchor = HTMLAnchorElement.init(base) },
-        .area => .{ .area = HTMLAreaElement.init(base) },
-        .audio => .{ .audio = HTMLAudioElement.init(base) },
-        .br => .{ .br = HTMLBRElement.init(base) },
-        .base => .{ .base = HTMLBaseElement.init(base) },
-        .body => .{ .body = HTMLBodyElement.init(base) },
-        .button => .{ .button = HTMLButtonElement.init(base) },
-        .canvas => .{ .canvas = HTMLCanvasElement.init(base) },
-        .dl => .{ .dlist = HTMLDListElement.init(base) },
-        .dialog => .{ .dialog = HTMLDialogElement.init(base) },
-        .data => .{ .data = HTMLDataElement.init(base) },
-        .div => .{ .div = HTMLDivElement.init(base) },
-        .embed => .{ .embed = HTMLEmbedElement.init(base) },
-        .fieldset => .{ .fieldset = HTMLFieldSetElement.init(base) },
-        .form => .{ .form = HTMLFormElement.init(base) },
-        .frameset => .{ .frameset = HTMLFrameSetElement.init(base) },
-        .hr => .{ .hr = HTMLHRElement.init(base) },
-        .head => .{ .head = HTMLHeadElement.init(base) },
-        .h1, .h2, .h3, .h4, .h5, .h6 => .{ .heading = HTMLHeadingElement.init(base) },
-        .html => .{ .html = HTMLHtmlElement.init(base) },
-        .iframe => .{ .iframe = HTMLIFrameElement.init(base) },
-        .img => .{ .img = HTMLImageElement.init(base) },
-        .input => .{ .input = HTMLInputElement.init(base) },
-        .li => .{ .li = HTMLLIElement.init(base) },
-        .label => .{ .label = HTMLLabelElement.init(base) },
-        .legend => .{ .legend = HTMLLegendElement.init(base) },
-        .link => .{ .link = HTMLLinkElement.init(base) },
-        .map => .{ .map = HTMLMapElement.init(base) },
-        .meta => .{ .meta = HTMLMetaElement.init(base) },
-        .meter => .{ .meter = HTMLMeterElement.init(base) },
-        .ins, .del => .{ .mod = HTMLModElement.init(base) },
-        .ol => .{ .olist = HTMLOListElement.init(base) },
-        .object => .{ .object = HTMLObjectElement.init(base) },
-        .optgroup => .{ .optgroup = HTMLOptGroupElement.init(base) },
-        .option => .{ .option = HTMLOptionElement.init(base) },
-        .output => .{ .output = HTMLOutputElement.init(base) },
-        .p => .{ .paragraph = HTMLParagraphElement.init(base) },
-        .picture => .{ .picture = HTMLPictureElement.init(base) },
-        .pre => .{ .pre = HTMLPreElement.init(base) },
-        .progress => .{ .progress = HTMLProgressElement.init(base) },
-        .blockquote, .q => .{ .quote = HTMLQuoteElement.init(base) },
-        .script => .{ .script = HTMLScriptElement.init(base) },
-        .select => .{ .select = HTMLSelectElement.init(base) },
-        .source => .{ .source = HTMLSourceElement.init(base) },
-        .span => .{ .span = HTMLSpanElement.init(base) },
-        .style => .{ .style = HTMLStyleElement.init(base) },
-        .table => .{ .table = HTMLTableElement.init(base) },
-        .caption => .{ .tablecaption = HTMLTableCaptionElement.init(base) },
-        .th, .td => .{ .tablecell = HTMLTableCellElement.init(base) },
-        .col => .{ .tablecol = HTMLTableColElement.init(base) },
-        .tr => .{ .tablerow = HTMLTableRowElement.init(base) },
-        .thead, .tbody, .tfoot => .{ .tablesection = HTMLTableSectionElement.init(base) },
-        .template => .{ .template = HTMLTemplateElement.init(base) },
-        .textarea => .{ .textarea = HTMLTextAreaElement.init(base) },
-        .time => .{ .time = HTMLTimeElement.init(base) },
-        .title => .{ .title = HTMLTitleElement.init(base) },
-        .track => .{ .track = HTMLTrackElement.init(base) },
-        .ul => .{ .ulist = HTMLUListElement.init(base) },
-        .video => .{ .video = HTMLVideoElement.init(base) },
-        .undef => .{ .unknown = HTMLUnknownElement.init(base) },
+        .a => .{ .HTMLAnchorElement = HTMLAnchorElement.init(base) },
+        .area => .{ .HTMLAreaElement = HTMLAreaElement.init(base) },
+        .audio => .{ .HTMLAudioElement = HTMLAudioElement.init(base) },
+        .br => .{ .HTMLBRElement = HTMLBRElement.init(base) },
+        .base => .{ .HTMLBaseElement = HTMLBaseElement.init(base) },
+        .body => .{ .HTMLBodyElement = HTMLBodyElement.init(base) },
+        .button => .{ .HTMLButtonElement = HTMLButtonElement.init(base) },
+        .canvas => .{ .HTMLCanvasElement = HTMLCanvasElement.init(base) },
+        .dl => .{ .HTMLDListElement = HTMLDListElement.init(base) },
+        .dialog => .{ .HTMLDialogElement = HTMLDialogElement.init(base) },
+        .data => .{ .HTMLDataElement = HTMLDataElement.init(base) },
+        .div => .{ .HTMLDivElement = HTMLDivElement.init(base) },
+        .embed => .{ .HTMLEmbedElement = HTMLEmbedElement.init(base) },
+        .fieldset => .{ .HTMLFieldSetElement = HTMLFieldSetElement.init(base) },
+        .form => .{ .HTMLFormElement = HTMLFormElement.init(base) },
+        .frameset => .{ .HTMLFrameSetElement = HTMLFrameSetElement.init(base) },
+        .hr => .{ .HTMLHRElement = HTMLHRElement.init(base) },
+        .head => .{ .HTMLHeadElement = HTMLHeadElement.init(base) },
+        .h1, .h2, .h3, .h4, .h5, .h6 => .{ .HTMLHeadingElement = HTMLHeadingElement.init(base) },
+        .html => .{ .HTMLHtmlElement = HTMLHtmlElement.init(base) },
+        .iframe => .{ .HTMLIFrameElement = HTMLIFrameElement.init(base) },
+        .img => .{ .HTMLImageElement = HTMLImageElement.init(base) },
+        .input => .{ .HTMLInputElement = HTMLInputElement.init(base) },
+        .li => .{ .HTMLLIElement = HTMLLIElement.init(base) },
+        .label => .{ .HTMLLabelElement = HTMLLabelElement.init(base) },
+        .legend => .{ .HTMLLegendElement = HTMLLegendElement.init(base) },
+        .link => .{ .HTMLLinkElement = HTMLLinkElement.init(base) },
+        .map => .{ .HTMLMapElement = HTMLMapElement.init(base) },
+        .meta => .{ .HTMLMetaElement = HTMLMetaElement.init(base) },
+        .meter => .{ .HTMLMeterElement = HTMLMeterElement.init(base) },
+        .ins, .del => .{ .HTMLModElement = HTMLModElement.init(base) },
+        .ol => .{ .HTMLOListElement = HTMLOListElement.init(base) },
+        .object => .{ .HTMLObjectElement = HTMLObjectElement.init(base) },
+        .optgroup => .{ .HTMLOptGroupElement = HTMLOptGroupElement.init(base) },
+        .option => .{ .HTMLOptionElement = HTMLOptionElement.init(base) },
+        .output => .{ .HTMLOutputElement = HTMLOutputElement.init(base) },
+        .p => .{ .HTMLParagraphElement = HTMLParagraphElement.init(base) },
+        .picture => .{ .HTMLPictureElement = HTMLPictureElement.init(base) },
+        .pre => .{ .HTMLPreElement = HTMLPreElement.init(base) },
+        .progress => .{ .HTMLProgressElement = HTMLProgressElement.init(base) },
+        .blockquote, .q => .{ .HTMLQuoteElement = HTMLQuoteElement.init(base) },
+        .script => .{ .HTMLScriptElement = HTMLScriptElement.init(base) },
+        .select => .{ .HTMLSelectElement = HTMLSelectElement.init(base) },
+        .source => .{ .HTMLSourceElement = HTMLSourceElement.init(base) },
+        .span => .{ .HTMLSpanElement = HTMLSpanElement.init(base) },
+        .style => .{ .HTMLStyleElement = HTMLStyleElement.init(base) },
+        .table => .{ .HTMLTableElement = HTMLTableElement.init(base) },
+        .caption => .{ .HTMLTableCaptionElement = HTMLTableCaptionElement.init(base) },
+        .th, .td => .{ .HTMLTableCellElement = HTMLTableCellElement.init(base) },
+        .col => .{ .HTMLTableColElement = HTMLTableColElement.init(base) },
+        .tr => .{ .HTMLTableRowElement = HTMLTableRowElement.init(base) },
+        .thead, .tbody, .tfoot => .{ .HTMLTableSectionElement = HTMLTableSectionElement.init(base) },
+        .template => .{ .HTMLTemplateElement = HTMLTemplateElement.init(base) },
+        .textarea => .{ .HTMLTextAreaElement = HTMLTextAreaElement.init(base) },
+        .time => .{ .HTMLTimeElement = HTMLTimeElement.init(base) },
+        .title => .{ .HTMLTitleElement = HTMLTitleElement.init(base) },
+        .track => .{ .HTMLTrackElement = HTMLTrackElement.init(base) },
+        .ul => .{ .HTMLUListElement = HTMLUListElement.init(base) },
+        .video => .{ .HTMLVideoElement = HTMLVideoElement.init(base) },
+        .undef => .{ .HTMLUnknownElement = HTMLUnknownElement.init(base) },
     };
 }